feat: 根据value显示不同宽度

Author: linlj

README.md

@@ -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   

index.html

@@ -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,
@@ -60,6 +63,7 @@
             arcWidth:1,
             arcLabel:true,
             arcLabelFont:'10px sans-serif',
+            maxWidth:10
             }
         );
         migrationLayer.addTo(lrmap);

src/src.js

@@ -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();
@@ -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) {
@@ -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
             });
         };
@@ -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({
@@ -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
                     });
@@ -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);
@@ -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]));
@@ -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;
             }
         },