road组件添加线宽支持

Lpbzzz · Nov 16, 2017 · 83719ce · 83719ce
1 parent d77b842
commit 83719ce
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 22 deletions.
diff --git a/docs/dist/react-bmap.min.js b/docs/dist/react-bmap.min.js
diff --git a/docs/examples/build/app.js b/docs/examples/build/app.js
@@ -29893,14 +29893,15 @@ var App = function (_Component) {
             var ctx = this.canvasLayer.canvas.getContext('2d');
             var roadGroup = this.getRoadGroup(roadPath);
             ctx.beginPath();
+            var lineWidth = this.props.lineWidth || 10;
             _mapLine2.default.drawRoads(map, ctx, roadGroup.allPath, {
                 color: '#fff',
-                lineWidth: 14,
+                lineWidth: lineWidth + 4,
                 lineCap: 'butt',
                 arrow: false,
                 line: false
             });
-            ctx.lineWidth = 16;
+            ctx.lineWidth = lineWidth + 6;
             var isPointInStroke = ctx.isPointInStroke(pixel.x * window.devicePixelRatio, pixel.y * window.devicePixelRatio);
             return isPointInStroke;
         }
@@ -29963,23 +29964,28 @@ var App = function (_Component) {
             var roadPath = this.props.roadPath;
             var roadPaths = this.props.roadPaths;
 
+            var lineWidth = this.props.lineWidth || 10;
+
             if (roadPaths) {
-                roadPaths.forEach(function (roadPath) {
-                    _this4.drawRoad(ctx, roadPath, _this4.props.category, _this4.props.splitList);
+                roadPaths.forEach(function (roadPath, index) {
+                    if (_this4.props.lineWidths) {
+                        lineWidth = _this4.props.lineWidths[index];
+                    }
+                    _this4.drawRoad(ctx, roadPath, _this4.props.category, _this4.props.splitList, lineWidth);
                 });
             } else if (roadPath) {
-                this.drawRoad(ctx, this.props.roadPath, this.props.category, this.props.splitList);
+                this.drawRoad(ctx, this.props.roadPath, this.props.category, this.props.splitList, lineWidth);
             }
         }
     }, {
         key: 'drawRoad',
-        value: function drawRoad(ctx, roadPath, category, splitList) {
+        value: function drawRoad(ctx, roadPath, category, splitList, lineWidth) {
             var roadGroup = this.getRoadGroup(roadPath, category, splitList);
             var data = roadGroup.group;
 
             _mapLine2.default.drawRoads(this.props.map, ctx, roadGroup.allPath, {
                 color: '#fff',
-                lineWidth: 14,
+                lineWidth: lineWidth + 4,
                 lineCap: 'butt',
                 arrow: false,
                 line: true
@@ -29991,15 +29997,15 @@ var App = function (_Component) {
                 _mapLine2.default.drawRoads(this.props.map, ctx, roadPath, {
                     color: item.color,
                     line: true,
-                    lineWidth: 10,
+                    lineWidth: lineWidth,
                     lineCap: 'butt',
                     arrow: false
                 });
             };
 
             _mapLine2.default.drawRoads(this.props.map, ctx, roadGroup.allPath, {
                 color: item.color,
-                lineWidth: 10,
+                lineWidth: lineWidth,
                 border: {},
                 lineCap: 'butt',
                 arrow: {
@@ -31867,7 +31873,7 @@ function DraggingTip(options) {
 
     this.map = map;
     var tip = this.tip = new _Tip2.default(options);
-    var icon = new BMap.Icon("http://huiyan-fe.github.io/tools/gis-drawing/static/images/drag.png", new BMap.Size(25, 25), {
+    var icon = new BMap.Icon("http://huiyan.baidu.com/github/tools/gis-drawing/static/images/drag.png", new BMap.Size(25, 25), {
         imageSize: new BMap.Size(25, 25)
     });
     var marker = this.marker = new BMap.Marker(this.point);
@@ -32913,6 +32919,7 @@ var App = function (_Component) {
                 //    3: '#ff5e47'
                 //}} 
                 , { color: '#1495ff',
+                    lineWidth: 10,
                     roadPath: ["116.488838,39.911212,116.489818,39.911292,116.490838,39.911387", "116.490838,39.911387,116.491164,39.911424,116.491454,39.911463,116.491707,39.911499,116.491926,39.911536,116.492145,39.911582,116.492374,39.911637,116.492781,39.911755,116.493174,39.911884,116.493791,39.912089,116.494033,39.91217,116.494171,39.912216", "116.494171,39.912216,116.494771,39.912415,116.495098,39.912526,116.495156,39.912544,116.495428,39.912634,116.49559,39.912688,116.4958,39.912758,116.496114,39.912863,116.496263,39.912913,116.496354,39.912943,116.496514,39.912997,116.496613,39.913029,116.496777,39.913084", "116.496777,39.913084,116.496997,39.913158,116.497585,39.913355", "116.497585,39.913355,116.497732,39.913434,116.498083,39.913551,116.498295,39.913652,116.49836,39.913686,116.498457,39.913737,116.498528,39.913779,116.498601,39.913832,116.498694,39.913925,116.498763,39.914018,116.498811,39.914114,116.498817,39.914134,116.498848,39.914243,116.498865,39.914342,116.498871,39.914375,116.498884,39.914527,116.498879,39.914676,116.498871,39.91473,116.498858,39.91482,116.498842,39.914863,116.49881,39.914955,116.498736,39.915081,116.498631,39.915198,116.498495,39.915309,116.498321,39.915415,116.498089,39.915526,116.497796,39.915617,116.497515,39.915734,116.497409,39.915771,116.497312,39.915814,116.497199,39.915898,116.497065,39.916021,116.496761,39.916372", "116.496761,39.916372,116.49673,39.916463", "116.49673,39.916463,116.496729,39.916465,116.496689,39.916608,116.496668,39.916691", "116.496668,39.916691,116.496647,39.916774", "116.496647,39.916774,116.496604,39.916953,116.496585,39.917192,116.49654,39.917395,116.496522,39.917438,116.496496,39.917537"],
                     onClick: function onClick(index) {
                         console.log(index);

diff --git a/docs/examples/components/road.js b/docs/examples/components/road.js
@@ -13,6 +13,7 @@ export default class App extends Component {
             //    3: '#ff5e47'
             //}} 
             color='#1495ff' 
+            lineWidth={10} 
             roadPath={[
                 "116.488838,39.911212,116.489818,39.911292,116.490838,39.911387",
                 "116.490838,39.911387,116.491164,39.911424,116.491454,39.911463,116.491707,39.911499,116.491926,39.911536,116.492145,39.911582,116.492374,39.911637,116.492781,39.911755,116.493174,39.911884,116.493791,39.912089,116.494033,39.91217,116.494171,39.912216",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bmap",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "react-bmap",
   "main": "lib/index.js",
   "contributors": [

diff --git a/src/components/road.js b/src/components/road.js
@@ -82,14 +82,15 @@ export default class App extends Component {
         const ctx = this.canvasLayer.canvas.getContext('2d');
         var roadGroup = this.getRoadGroup(roadPath);
         ctx.beginPath();
+        var lineWidth = this.props.lineWidth || 10;
         mapLine.drawRoads(map, ctx, roadGroup.allPath, {
             color: '#fff',
-            lineWidth: 14,
+            lineWidth: lineWidth + 4,
             lineCap: 'butt',
             arrow: false,
             line: false
         });
-        ctx.lineWidth = 16;
+        ctx.lineWidth = lineWidth + 6;
         var isPointInStroke = ctx.isPointInStroke(pixel.x * window.devicePixelRatio, pixel.y * window.devicePixelRatio);
         return isPointInStroke;
     }
@@ -151,23 +152,28 @@ export default class App extends Component {
         var roadPath = this.props.roadPath;
         var roadPaths = this.props.roadPaths;
 
+        var lineWidth = this.props.lineWidth || 10;
+
         if (roadPaths) {
-            roadPaths.forEach((roadPath) => {
-                this.drawRoad(ctx, roadPath, this.props.category, this.props.splitList);
+            roadPaths.forEach((roadPath, index) => {
+                if (this.props.lineWidths) {
+                    lineWidth = this.props.lineWidths[index];
+                }
+                this.drawRoad(ctx, roadPath, this.props.category, this.props.splitList, lineWidth);
             });
         } else if(roadPath) {
-            this.drawRoad(ctx, this.props.roadPath, this.props.category, this.props.splitList);
+            this.drawRoad(ctx, this.props.roadPath, this.props.category, this.props.splitList, lineWidth);
         }
 
     }
 
-    drawRoad(ctx, roadPath, category, splitList) {
+    drawRoad(ctx, roadPath, category, splitList, lineWidth) {
         var roadGroup = this.getRoadGroup(roadPath, category, splitList);
         var data = roadGroup.group;
 
         mapLine.drawRoads(this.props.map, ctx, roadGroup.allPath, {
             color: '#fff',
-            lineWidth: 14,
+            lineWidth: lineWidth + 4,
             lineCap: 'butt',
             arrow: false,
             line: true
@@ -179,15 +185,15 @@ export default class App extends Component {
             mapLine.drawRoads(this.props.map, ctx, roadPath, {
                 color: item.color,
                 line: true,
-                lineWidth: 10,
+                lineWidth: lineWidth,
                 lineCap: 'butt',
                 arrow: false
             });
         };
 
         mapLine.drawRoads(this.props.map, ctx, roadGroup.allPath, {
             color: item.color,
-            lineWidth: 10,
+            lineWidth: lineWidth,
             border: {
             },
             lineCap: 'butt',

diff --git a/src/overlay/DraggingTip.js b/src/overlay/DraggingTip.js
@@ -9,7 +9,7 @@ function DraggingTip(options) {
 
     this.map = map;
     var tip = this.tip = new Tip(options);
-    var icon = new BMap.Icon("http://huiyan-fe.github.io/tools/gis-drawing/static/images/drag.png", new BMap.Size(25, 25), {
+    var icon = new BMap.Icon("http://huiyan.baidu.com/github/tools/gis-drawing/static/images/drag.png", new BMap.Size(25, 25), {
         imageSize: new BMap.Size(25, 25)
     });
     var marker = this.marker = new BMap.Marker(this.point);