测量工具

src/components/supermap.vue

@@ -16,7 +16,7 @@
 
   import {getSuperMap, iconList} from '@/api/components/supermap.js'
   // import {setToken} from '../plugins/auth'
-
+  import modal from '@/plugins/modal'
 
   export default {
     name: "sookaSuperMap",
@@ -34,7 +34,59 @@
         graphicsLayer: [],
         latLngLayers: [],
         latLngGroup: [],
-        editableLayers: [],
+        isEditableLayers: false,
+      }
+    },
+    watch: {
+      isEditableLayers: {
+        handler (newValue, oldValue) {
+          if (newValue) {
+            var editableLayers = new window.L.FeatureGroup();
+            this.map.addLayer(editableLayers);
+            let options = {
+              position: 'topleft',
+              draw: {
+                polyline: {},
+                polygon: {},
+                circle: {},
+                rectangle: {},
+                marker: {},
+                remove: {}
+              },
+              edit: {
+                featureGroup: editableLayers,
+                remove: true
+              }
+            };
+            let 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];
+                  //一个自定义的计算面积的函数
+                  var seeArea = window.L.GeometryUtil.geodesicArea(latlng);
+                  let area = (seeArea / 10e5).toFixed(2) + "k㎡";
+                  modal.msg(area);
+                } else if (layerType === "polyline") {
+                  let latlng = editableLayer.getLatLngs();
+                  //一个自定义的计算长度的函数
+                  let dis = 0;
+                  for (let i = 0; i < latlng.length - 1; i++) {
+                    let start = latlng[i];
+                    let end = latlng[i + 1];
+                    dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]);//计算两个点之间的距离，并累加
+                  }
+                  //结果得到的也是number类型，单位是 米
+                  modal.msg((dis / 10e2).toFixed(2) + "km");
+                }
+              })
+              editableLayers.addLayer(editableLayer);
+            });
+          }
+        },
       }
     },
     mounted() {
@@ -46,7 +98,6 @@
       mapSite: {},
       isSideBySide: null,
       showLatLng: null,
-      isEditableLayers: null,
     },
     methods: {
       clearM: async function (isAggregation) {//清理地图标点
@@ -97,7 +148,6 @@
         this.mapDivId = this.mapDiv;
         let mapSite = this.mapSite;
         let isSideBySide = this.isSideBySide;
-        let isEditableLayers = this.isEditableLayers;
         // setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY5Zjg3ZjVmLWQ4NTctNDQxZC04NmQ5LTg4OWExZWRlODE4ZSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.26mAzmaM9pUza9585aLnRMyRd4GxvrWbCxN0erYsuiBDYQiYnyc-TwXVNDI7Xrpt3Bqmbnul-XMszOxYQi12LA");
         _that.isAggregationLayers = window.L.markerClusterGroup({
           //设置为true时显示聚类所占据的范围
@@ -140,12 +190,9 @@
                 dragging: dragging,
                 logoControl: logoControl
               };
-              if (isEditableLayers) {
-                Object.assign(defaultConfigure, {drawControl: true});
-              }
               let loadConfiguration = Object.assign(defaultConfigure, mapSite);
-              let mapOption = window.L.map(this.mapDiv, loadConfiguration);
-              this.map = mapOption;
+              this.map = window.L.map(this.mapDiv, loadConfiguration);
+              //鼠标双击落点
               if (this.showLatLng != undefined) {
                 let icon = new window.L.Icon({
                   iconUrl: iconList['marker'],
@@ -154,54 +201,19 @@
                   popupAnchor: [-3, -40],
                   shadowSize: [41, 41],
                 })
-                if (isEditableLayers) {
-                  this.editableLayers = new L.FeatureGroup().addTo(mapOption);
-                  let options = {
-                    position: 'topleft',
-                    draw: {
-                      polyline: null,
-                      polygon: {},
-                      circlemarker: null,
-                      circle: null,
-                      rectangle: {},
-                      marker: null,
-                      remove: null
-                    }
-                  };
-                  let drawControl = new window.L.Control.Draw(options);
-                  mapOption.addControl(drawControl);
-                  mapOption.on(window.L.Draw.Event.CREATED, function (e) {
-                    let layer = e.layer;
-                    let layerType = e.layerType;
 
-                    if (layerType === "polygon") {
-                      let latlng = layer.getLatLngs()[0];
-                      //一个自定义的计算面积的函数
-                      let area = _that.formatArea(latlng);
-                      alert(area);
-                    } else if (layerType === "polyline") {
-                      let latlng = layer.getLatLngs();
-                      //一个自定义的计算长度的函数
-                      let distance = _that.formatLength(latlng);
-                      alert(distance);
-                    }
-                    this.editableLayers.clearLayers();
-                    this.editableLayers.addLayer(layer);
-                  });
-                }
-
-                mapOption.on('dblclick', function (e) {
+                this.map.on('dblclick', function (e) {
                   _that.clearP();
                   _that.showLatLng(e.latlng.lat, e.latlng.lng);
                   let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                     icon: icon
-                  }).addTo(mapOption);
+                  }).addTo(this.map);
                   _that.latLngLayers.push(marker)
                   _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
-                  mapOption.addLayer(_that.latLngGroup)
+                  this.map.addLayer(_that.latLngGroup)
                 })
               }
-              window.L.supermap.tiledMapLayer(url).addTo(mapOption);
+              window.L.supermap.tiledMapLayer(url).addTo(this.map);
             }
           })
         } else {  //卷帘地图
@@ -237,12 +249,8 @@
                 logoControl: logoControl
               };
 
-              if (isEditableLayers) {
-                Object.assign(defaultConfigure, {drawControl: true});
-              }
               let loadConfiguration = Object.assign(defaultConfigure, mapSite);
-              let mapOption = window.L.map(this.mapDiv, loadConfiguration);
-              this.map = mapOption;
+              this.map = window.L.map(this.mapDiv, loadConfiguration);
               if (this.showLatLng != undefined) {
                 let icon = new window.L.Icon({
                   iconUrl: iconList['marker'],
@@ -252,57 +260,21 @@
                   shadowSize: [41, 41],
                 })
 
-                if (isEditableLayers) {
-                  this.editableLayers = new L.FeatureGroup().addTo(mapOption);
-                  let options = {
-                    position: 'topleft',
-                    draw: {
-                      polyline: null,
-                      polygon: {},
-                      circlemarker: null,
-                      circle: null,
-                      rectangle: {},
-                      marker: null,
-                      remove: null
-                    }
-                  };
-                  let drawControl = new window.L.Control.Draw(options);
-                  mapOption.addControl(drawControl);
-                  mapOption.on(window.L.Draw.Event.CREATED, function (e) {
-                    let layer = e.layer;
-                    let layerType = e.layerType;
-
-                    if (layerType === "polygon") {
-                      let latlng = layer.getLatLngs()[0];
-                      //一个自定义的计算面积的函数
-                      let area = _that.formatArea(latlng);
-                      alert(area);
-                    } else if (layerType === "polyline") {
-                      let latlng = layer.getLatLngs();
-                      //一个自定义的计算长度的函数
-                      let distance = _that.formatLength(latlng);
-                      alert(distance);
-                    }
-                    this.editableLayers.clearLayers();
-                    this.editableLayers.addLayer(layer);
-                  });
-                }
 
-                mapOption.on('dblclick', function (e) {
+                this.map.on('dblclick', function (e) {
                   _that.clearP();
                   _that.showLatLng(e.latlng.lat, e.latlng.lng);
                   let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                     icon: icon
-                  }).addTo(mapOption);
+                  }).addTo(this.map);
                   _that.latLngLayers.push(marker)
                   _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
-                  mapOption.addLayer(_that.latLngGroup)
+                  this.map.addLayer(_that.latLngGroup)
                 })
               }
-              let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(mapOption);
-              let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(mapOption);
-              L.control.sideBySide(stamenLayer, osmLayer).addTo(mapOption);
-
+              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);
             }
           })
         }
@@ -482,7 +454,21 @@
       },
       controlLevel: function (level) {//控制地图缩放级别
         this.map.setZoom(level)
-      }
+      },
+      // handleMapEvent(div, map) {
+      //   debugger
+      //   if (!div || !map) {
+      //     return
+      //   }
+      //   div.addEventListener('mouseover', function() {
+      //     this.map.scrollWheelZoom.disable()
+      //     this.map.doubleClickZoom.disable()
+      //   })
+      //   div.addEventListener('mouseout', function() {
+      //     this.map.scrollWheelZoom.enable()
+      //     this.map.doubleClickZoom.enable()
+      //   })
+      // }
     }
   }
 </script>

src/components/vBottomMenu.vue

@@ -25,7 +25,7 @@
           {
             name: '测量工具',
             icon: 'sj-icon-clgj',
-            click: ''
+            click: 'editableLayers'
           },
           {
             name: '林班',

src/views/datacenter.vue

@@ -119,6 +119,12 @@
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()
+        }else if(click=="editableLayers"){
+          if(!this.$refs.supermap.isEditableLayers){
+            this.$refs.supermap.isEditableLayers=true
+          }else{
+            this.$refs.supermap.isEditableLayers=false
+          }
         }
       },
 			//数据分布chart

src/views/event.vue

@@ -575,6 +575,12 @@
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()
+        }else if(click=="editableLayers"){
+          if(!this.$refs.supermap.isEditableLayers){
+            this.$refs.supermap.isEditableLayers=true
+          }else{
+            this.$refs.supermap.isEditableLayers=false
+          }
         }
       },
       //事件chart

src/views/forest.vue

@@ -660,7 +660,6 @@
 				indentright:'',
 				indentText:'收起左右栏',
 				indentdisabled:false
-
 			}
 		},
 
@@ -669,6 +668,12 @@
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()
+        }else if(click=="editableLayers"){
+          if(!this.$refs.supermap.isEditableLayers){
+            this.$refs.supermap.isEditableLayers=true
+          }else{
+            this.$refs.supermap.isEditableLayers=false
+          }
         }
       },
 			//态势感知chart

src/views/monitor.vue

@@ -160,6 +160,12 @@
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()
+        }else if(click=="editableLayers"){
+          if(!this.$refs.supermap.isEditableLayers){
+            this.$refs.supermap.isEditableLayers=true
+          }else{
+            this.$refs.supermap.isEditableLayers=false
+          }
         }
       },
       cameraChat(){