Skip to content

Commit

Permalink
feat: 根据value显示不同宽度
Browse files Browse the repository at this point in the history
  • Loading branch information
linlj committed Oct 23, 2018
1 parent 276882e commit 3c25bd7
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 14 deletions.
11 changes: 10 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,16 @@ migrationLayer.destroy();
| pulseBorderWidth| pulse border width | 3 | any number>0 | no |
| arcWidth | arc width | 1 | any number>0 | no |
| arcLabel | show from and to label | true | Bool | no |
| arcLabelFont | label font and size | '15px sans-serif'| 'size font' | no |
| arcLabelFont | label font and size | '15px sans-serif'| 'size font' | no |
| maxWidth | the max width of arc | 10 | any number>1 | no |

## data format

```js
data = [{"from":[-118.2705,33.9984],"to":[-122.789336,37.920458],"labels":["Los Angeles","San Francisco"],"color":"#ff3a31","value":15}];
```

If the value is not undefined, the width of arc will depend on the value.

## Leaflet Version
Requires Leaflet 1.0.2 or newer
Expand Down
6 changes: 5 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@
var lrmap = L.map('map').setView([35, -95], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw')
.addTo(lrmap);

var data = [{"from":[-118.2705,33.9984],"to":[-122.789336,37.920458],"labels":["Los Angeles","San Francisco"],"color":"#ff3a31"},{"from":[-118.2705,33.9984],"to":[-80.247887,25.792296],"labels":[null,"Miami"],"color":"#ff7e2b"},{"from":[-118.2705,33.9984],"to":[-73.999705,40.795047],"labels":[null,"New York"],"color":"#ffc726"},{"from":[-118.2705,33.9984],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#e9ff20"},{"from":[-118.2705,33.9984],"to":[-92.145189,46.77372],"labels":[null,"Duluth"],"color":"#99ff1b"},{"from":[-118.2705,33.9984],"to":[-111.824547,40.788055],"labels":[null,"Salt Lake"],"color":"#45ff15"},{"from":[-118.2705,33.9984],"to":[-111.364615,47.536109],"labels":[null,"Great Falls"],"color":"#10ff33"},{"from":[-118.2705,33.9984],"to":[-97.585039,35.511099],"labels":[null,"Oklahoma"],"color":"#0aff84"},{"from":[-118.2705,33.9984],"to":[-115.157907,36.173032],"labels":[null,"Las Vegas"],"color":"#05ffd9"},{"from":[-118.2705,33.9984],"to":[-103.196215,34.418753],"labels":[null,"Clovis"],"color":"#00ccff"}];

var data2=[{"from":[-73.875523,40.781063],"to":[-80.247887,25.792296],"labels":["New York","Maima"],"color":"#05ffd9"},{"from":[-73.875523,40.781063],"to":[-118.2705,33.9984],"labels":[null,"Los Angeles"],"color":"#00ccff"},{"from":[-73.875523,40.781063],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#ffc726"},{"from":[-73.875523,40.781063],"to":[-71.058437,42.35902],"labels":[null,"Boston"],"color":"#e9ff20"},{"from":[-73.875523,40.781063],"to":[-75.683057,45.42172],"labels":[null,"Ottawa"],"color":"#99ff1b"}];

data = data.map(item => { return {...item, value: parseInt(Math.random()*20)}});
data2 = data2.map(item => { return {...item, value: parseInt(Math.random()*20)}});

var migrationLayer = new L.migrationLayer({
map: lrmap,
data: data,
Expand All @@ -60,6 +63,7 @@
arcWidth:1,
arcLabel:true,
arcLabelFont:'10px sans-serif',
maxWidth:10
}
);
migrationLayer.addTo(lrmap);
Expand Down
60 changes: 48 additions & 12 deletions src/src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,12 @@
if (this.style === 'circle') {
context.arc(0, 0, this.size, 0, Math.PI * 2, false);
} else if (this.style === 'arrow') {
context.moveTo(-this.size, -this.size);
context.lineTo(this.size, 0);
context.lineTo(-this.size, this.size);
context.lineTo(-this.size / 4, 0);
context.lineTo(-this.size, -this.size);
// 将箭头后退，让箭头的尖头指向终点
context.moveTo(-this.size*2, -this.size);
context.lineTo(-this.size*5/4, 0);
context.lineTo(-this.size*2, this.size);
context.lineTo(0, 0);
context.lineTo(-this.size*2, -this.size);
}
context.closePath();
context.stroke();
Expand Down Expand Up @@ -117,6 +118,7 @@
this.label = options.label;
this.font = options.font;
this.shadowBlur = options.shadowBlur;
this.endAngle = endAngle - this.lineWidth / radius; // 让线后退，与箭头结合
};

A.prototype.draw = function (context) {
Expand Down Expand Up @@ -236,14 +238,15 @@

this.animateBlur = true;

const size = options.size? options.size/2:1
this.marker = new Marker({
x: 50,
y: 80,
rotation: 50 * Math.PI / 180,
style: 'arrow',
color: 'rgb(255, 255, 255)',
size: 3,
borderWidth: 0,
size: size+1,
borderWidth: size ,
borderColor: this.strokeStyle
});
};
Expand Down Expand Up @@ -367,7 +370,7 @@
labels: element.labels,
label: this.style.arc.label,
font: this.style.arc.font,
width: this.style.arc.width,
width: element.arcWidth || this.style.arc.width,
color: element.color
});
var marker = new Marker({
Expand All @@ -376,7 +379,7 @@
rotation: arc.endAngle + Math.PI / 2,
style: 'arrow',
color: element.color,
size: 4,
size: element.arcWidth || this.style.arc.width+3,
borderWidth: 0,
borderColor: element.color
});
Expand All @@ -393,7 +396,8 @@
endX: element.to[0],
endY: element.to[1],
width: 15,
color: element.color
color: element.color,
size: element.arcWidth
});

this.store.arcs.push(arc);
Expand Down Expand Up @@ -515,9 +519,37 @@
},
_convertData: function () {
var bounds = this._map.getBounds();

let maxValue;
let minValue
if (this._data && bounds) {
arrayUtils.forEach(this._data, function (d) {
if(d.value){
if(!maxValue){
maxValue = d.value;
minValue = d.value;
}
if(maxValue<d.value){
maxValue = d.value;
}
if(minValue>d.value){
minValue = d.value;
}
}
});
var maxWidth = this.options.maxWidth || 10;
var data = arrayUtils.map(this._data, function (d) {
if(d.value){
if(!maxValue){
maxValue = d.value;
minValue = d.value;
}
if(maxValue<d.value){
maxValue = d.value;
}
if(minValue>d.value){
minValue = d.value;
}
}

var fromPixel = this._map.latLngToContainerPoint(new L.LatLng(d.from[1], d.from[0]));
var toPixel = this._map.latLngToContainerPoint(new L.LatLng(d.to[1], d.to[0]));
Expand All @@ -526,10 +558,14 @@
to: [toPixel.x, toPixel.y],
labels: d.labels,
value: d.value,
color: d.color
color: d.color,
arcWidth: d.value? parseInt((d.value - minValue) * (maxWidth-1)/(maxValue - minValue)) + 1:this.options.arcWidth
}
}, this);




return data;
}
},
Expand Down

0 comments on commit 3c25bd7

Please sign in to comment.