新页面

src/components/supermap.vue

@@ -43,109 +43,6 @@
       isEditableLayers: {
         handler (newValue, oldValue) {
           if (newValue) {
-            //添加画图的提示信息
-            window.L.drawLocal.draw.toolbar = {
-              actions: {
-                title: '取消绘图',
-                text: '取消'
-              },
-              finish: {
-                title: '完成绘图',
-                text: '完成'
-              },
-              undo: {
-                title: '删除最后绘制的点',
-                text: '删除最后一个点'
-              },
-              buttons: {
-                polyline: '绘制折线',
-                polygon: '绘制多边形',
-                rectangle: '绘制矩形',
-                circle: '绘制圆圈',
-                marker: '绘制标记',
-                circlemarker: '绘制圆圈标记'
-              }
-            }
-            window.L.drawLocal.draw.handlers = {
-              circle: {
-                tooltip: {
-                  start: '单击并拖动以绘制圆形'
-                },
-                radius: '半径'
-              },
-              circlemarker: {
-                tooltip: {
-                  start: '点击地图放置圆圈标记'
-                }
-              },
-              marker: {
-                tooltip: {
-                  start: '点击地图放置标记'
-                }
-              },
-              polygon: {
-                tooltip: {
-                  start: '点击开始绘制形状',
-                  cont: '点击继续绘制形状',
-                  end: '单击第一个点以关闭此形状'
-                }
-              },
-              polyline: {
-                error: '<strong>Error:</strong> shape edges cannot cross!',
-                tooltip: {
-                  start: '点击开始画线',
-                  cont: '点击继续画线',
-                  end: '单击最后一点以完成线'
-                }
-              },
-              rectangle: {
-                tooltip: {
-                  start: '单击并拖动以绘制矩形'
-                }
-              },
-              simpleshape: {
-                tooltip: {
-                  end: '释放鼠标完成绘图'
-                }
-              }
-            }
-            window.L.drawLocal.edit = {
-              toolbar: {
-                actions: {
-                  save: {
-                    title: '保存更改',
-                    text: '保存'
-                  },
-                  cancel: {
-                    title: '取消编辑，放弃所有更改',
-                    text: '取消'
-                  },
-                  clearAll: {
-                    title: '清除所有图层',
-                    text: '清除所有'
-                  }
-                },
-                buttons: {
-                  edit: '编辑图层',
-                  editDisabled: '没有可编辑的图层',
-                  remove: '删除图层',
-                  removeDisabled: '没有可删除的图层'
-                }
-              },
-              handlers: {
-                edit: {
-                  tooltip: {
-                    text: '拖动手柄或标记以编辑要素',
-                    subtext: '单击取消以撤消更改'
-                  }
-                },
-                remove: {
-                  tooltip: {
-                    text: '单击要删除的功能'
-                  }
-                }
-              }
-            }
             var editableLayers = new window.L.FeatureGroup();
             this.map.addLayer(editableLayers);
             let options = {
@@ -165,21 +62,6 @@
             };
             this.drawControl = new window.L.Control.Draw(options);
             this.map.addControl(this.drawControl);
-            this.map.on(window.L.Draw.Event.DRAWSTART, function (e) {
-              let layerType = e.layerType;
-              if(layerType === "marker"){
-                let icon = new window.L.Icon({
-                  iconUrl: iconList['marker'],
-                  iconSize: [48, 48],
-                  iconAnchor: [24, 40],
-                  popupAnchor: [-3, -40],
-                  shadowSize: [41, 41],
-                })
-                 let latLngGroup = window.L.layerGroup(null)
-                e.layer=latLngGroup
-                e.layer.options.icon=icon;
-              }
-            });
             this.map.on(window.L.Draw.Event.CREATED, function (e) {
               let editableLayer = e.layer;
               let layerType = e.layerType;
@@ -223,6 +105,109 @@
     },
     mounted() {
       this.initMap();
+      //添加画图的提示信息
+      window.L.drawLocal.draw.toolbar = {
+        actions: {
+          title: '取消绘图',
+          text: '取消'
+        },
+        finish: {
+          title: '完成绘图',
+          text: '完成'
+        },
+        undo: {
+          title: '删除最后绘制的点',
+          text: '删除最后一个点'
+        },
+        buttons: {
+          polyline: '绘制折线',
+          polygon: '绘制多边形',
+          rectangle: '绘制矩形',
+          circle: '绘制圆圈',
+          marker: '绘制标记',
+          circlemarker: '绘制圆圈标记'
+        }
+      }
+      window.L.drawLocal.draw.handlers = {
+        circle: {
+          tooltip: {
+            start: '单击并拖动以绘制圆形'
+          },
+          radius: '半径'
+        },
+        circlemarker: {
+          tooltip: {
+            start: '点击地图放置圆圈标记'
+          }
+        },
+        marker: {
+          tooltip: {
+            start: '点击地图放置标记'
+          }
+        },
+        polygon: {
+          tooltip: {
+            start: '点击开始绘制形状',
+            cont: '点击继续绘制形状',
+            end: '单击第一个点以关闭此形状'
+          }
+        },
+        polyline: {
+          error: '<strong>Error:</strong> shape edges cannot cross!',
+          tooltip: {
+            start: '点击开始画线',
+            cont: '点击继续画线',
+            end: '单击最后一点以完成线'
+          }
+        },
+        rectangle: {
+          tooltip: {
+            start: '单击并拖动以绘制矩形'
+          }
+        },
+        simpleshape: {
+          tooltip: {
+            end: '释放鼠标完成绘图'
+          }
+        }
+      }
+      window.L.drawLocal.edit = {
+        toolbar: {
+          actions: {
+            save: {
+              title: '保存更改',
+              text: '保存'
+            },
+            cancel: {
+              title: '取消编辑，放弃所有更改',
+              text: '取消'
+            },
+            clearAll: {
+              title: '清除所有图层',
+              text: '清除所有'
+            }
+          },
+          buttons: {
+            edit: '编辑图层',
+            editDisabled: '没有可编辑的图层',
+            remove: '删除图层',
+            removeDisabled: '没有可删除的图层'
+          }
+        },
+        handlers: {
+          edit: {
+            tooltip: {
+              text: '拖动手柄或标记以编辑要素',
+              subtext: '单击取消以撤消更改'
+            }
+          },
+          remove: {
+            tooltip: {
+              text: '单击要删除的功能'
+            }
+          }
+        }
+      }
     },
     props: {
       mapDiv: null,
@@ -230,6 +215,8 @@
       mapSite: {},
       isSideBySide: null,
       showLatLng: null,
+      showAreaLatLng: null,
+      showLineLatLng: null,
     },
     methods: {
       clearM: async function (isAggregation) {//清理地图标点
@@ -345,6 +332,74 @@
                   this.map.addLayer(_that.latLngGroup)
                 })
               }
+              //鼠标绘制区域
+              if (this.showAreaLatLng != undefined) {
+                var editableLayers = new window.L.FeatureGroup();
+                this.map.addLayer(editableLayers);
+                let options = {
+                  position: 'topleft',
+                  draw: {
+                    polyline: null,
+                    polygon: {},
+                    circle: null,
+                    rectangle: null,
+                    circlemarker: null,
+                    marker: null,
+                    remove: {}
+                  },
+                  edit: {
+                    featureGroup: editableLayers,
+                    remove: true
+                  }
+                };
+                var drawControl = new window.L.Control.Draw(options);
+                this.map.addControl(drawControl);
+                this.map.on(window.L.Draw.Event.CREATED, function (e) {
+                  let editableLayer = e.layer;
+                  let layerType = e.layerType;
+                  editableLayer.on('dblclick', function (e) {
+                    if (layerType === "polygon"||layerType === "rectangle") {
+                      let latlng = editableLayer.getLatLngs()[0];
+                      _that.showAreaLatLng(latlng)
+                    }
+                  })
+                  editableLayers.addLayer(editableLayer);
+                });
+              }
+              //鼠标绘制线段
+              if (this.showLineLatLng != undefined) {
+                var editableLayers = new window.L.FeatureGroup();
+                this.map.addLayer(editableLayers);
+                let options = {
+                  position: 'topleft',
+                  draw: {
+                    polyline: {},
+                    polygon: null,
+                    circle: null,
+                    rectangle: null,
+                    circlemarker: null,
+                    marker: null,
+                    remove: {}
+                  },
+                  edit: {
+                    featureGroup: editableLayers,
+                    remove: true
+                  }
+                };
+                var drawControl = new window.L.Control.Draw(options);
+                this.map.addControl(drawControl);
+                this.map.on(window.L.Draw.Event.CREATED, function (e) {
+                  let editableLayer = e.layer;
+                  let layerType = e.layerType;
+                  editableLayer.on('dblclick', function (e) {
+                     if (layerType === "polyline") {
+                      let latlng = editableLayer.getLatLngs();
+                      _that.showLineLatLng(latlng)
+                    }
+                  })
+                  editableLayers.addLayer(editableLayer);
+                });
+              }
               window.L.supermap.tiledMapLayer(url).addTo(this.map);
             }
           })
@@ -383,6 +438,7 @@
 
               let loadConfiguration = Object.assign(defaultConfigure, mapSite);
               this.map = window.L.map(this.mapDiv, loadConfiguration);
+              //鼠标双击落点
               if (this.showLatLng != undefined) {
                 let icon = new window.L.Icon({
                   iconUrl: iconList['marker'],
@@ -392,7 +448,6 @@
                   shadowSize: [41, 41],
                 })
 
-
                 this.map.on('dblclick', function (e) {
                   _that.clearP();
                   _that.showLatLng(e.latlng.lat, e.latlng.lng);
@@ -404,6 +459,75 @@
                   this.map.addLayer(_that.latLngGroup)
                 })
               }
+              //鼠标绘制区域
+              if (this.showAreaLatLng != undefined) {
+                var editableLayers = new window.L.FeatureGroup();
+                this.map.addLayer(editableLayers);
+                let options = {
+                  position: 'topleft',
+                  draw: {
+                    polyline: null,
+                    polygon: {},
+                    circle: null,
+                    rectangle: null,
+                    circlemarker: null,
+                    marker: null,
+                    remove: {}
+                  },
+                  edit: {
+                    featureGroup: editableLayers,
+                    remove: true
+                  }
+                };
+                var drawControl = new window.L.Control.Draw(options);
+                this.map.addControl(drawControl);
+                this.map.on(window.L.Draw.Event.CREATED, function (e) {
+                  let editableLayer = e.layer;
+                  let layerType = e.layerType;
+                  editableLayer.on('dblclick', function (e) {
+                    if (layerType === "polygon"||layerType === "rectangle") {
+                      let latlng = editableLayer.getLatLngs()[0];
+                      _that.showAreaLatLng(latlng)
+                    }
+                  })
+                  editableLayers.addLayer(editableLayer);
+                });
+              }
+              //鼠标绘制线段
+              if (this.showLineLatLng != undefined) {
+                var editableLayers = new window.L.FeatureGroup();
+                this.map.addLayer(editableLayers);
+                let options = {
+                  position: 'topleft',
+                  draw: {
+                    polyline: {},
+                    polygon: null,
+                    circle: null,
+                    rectangle: null,
+                    circlemarker: null,
+                    marker: null,
+                    remove: {}
+                  },
+                  edit: {
+                    featureGroup: editableLayers,
+                    remove: true
+                  }
+                };
+                var drawControl = new window.L.Control.Draw(options);
+                this.map.addControl(drawControl);
+                this.map.on(window.L.Draw.Event.CREATED, function (e) {
+                  let editableLayer = e.layer;
+                  let layerType = e.layerType;
+                  editableLayer.on('dblclick', function (e) {
+                    if (layerType === "polyline") {
+                      let latlng = editableLayer.getLatLngs();
+                      _that.showLineLatLng(latlng)
+                    }
+                  })
+                  editableLayers.addLayer(editableLayer);
+                });
+              }
+
               let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(this.map);
               let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map);
               L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map);