临时提交

web/src/views/common/MapComponent.vue

@@ -234,22 +234,23 @@ export default {
       }
     },
     /**
-       * 添加图层， 数据坐标系由控件内完成，输入和输出永远是wgs84
-       * @param data
-       * [
-       *     {
-       *
-       *         position: [119.1212,45,122],
-       *             image: {
-       *                 src:"/images/123.png",
-       *                 anchor: [0.5, 0.5]
-       *
-       *             }
-       *     }
-       *
-       * ]
-       */
-    addLayer(data, clickEvent) {
+     * 添加图层， 数据坐标系由控件内完成，输入和输出永远是wgs84
+     * [
+     *     {
+     *
+     *         position: [119.1212,45,122],
+     *             image: {
+     *                 src:"/images/123.png",
+     *                 anchor: [0.5, 0.5]
+     *
+     *             }
+     *     }
+     *
+     * ]
+     * @param data
+     * @param clickEvent
+     */
+    addPointLayer(data, clickEvent) {
       if (data.length > 0) {
         const features = []
         for (let i = 0; i < data.length; i++) {
@@ -290,7 +291,7 @@ export default {
         return vectorLayer
       }
     },
-    updateLayer(layer, data, postponement) {
+    updatePointLayer(layer, data, postponement) {
       layer.getSource().clear(true)
       const features = []
       for (let i = 0; i < data.length; i++) {
@@ -310,7 +311,7 @@ export default {
       if (postponement) {
         olMap.removeLayer(layer)
         setTimeout(() => {
-          olMap.addLayer(layer)
+          olMap.addPointLayer(layer)
         }, 100)
       }
       return layer
@@ -371,7 +372,7 @@ export default {
         const vectorLayer = new VectorLayer({
           source: source
         })
-        olMap.addLayer(vectorLayer)
+        olMap.addPointLayer(vectorLayer)
         return vectorLayer
       }
     },
@@ -390,6 +391,27 @@ export default {
         // 修正地图的中心点
         olMap.getView().setCenter(fromLonLat(center))
       }
+    },
+    /**
+     * 根据距离计算经纬度差值，方便前端抽稀计算
+     * @param distance 距离， 单位：像素值
+     * @param zoom 地图层级，默认取值当前层级
+     */
+    computeDiff(distance, zoom) {
+      if (!distance) {
+        return []
+      }
+      let resolution;
+      if (!zoom) {
+        resolution = olMap.getView().getResolution()
+      }else {
+        resolution = olMap.getView().getResolutionForZoom(zoom)
+      }
+      let diff = resolution * distance
+      let position = toLonLat([diff, diff])
+      console.log(position)
+      
+
     }
   }
 }

web/src/views/map/index.vue

@@ -32,7 +32,7 @@
       </div>
       <div class="map-tool-box-top-left">
         <div class="map-tool-btn-group">
-          <div class="map-tool-btn" title="图层抽稀">
+          <div class="map-tool-btn" title="图层抽稀" @click="drawThin">
             <i class="iconfont icon-mti-sandian"></i> <span>图层抽稀</span>
           </div>
           <div class="map-tool-btn" title="位置编辑" @click="testArray">
@@ -214,9 +214,9 @@ export default {
     },
     updateChannelLayer: function(array) {
       if (this.channelLayer) {
-        this.channelLayer = this.$refs.mapComponent.updateLayer(this.channelLayer, array, true)
+        this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, array, true)
       }else {
-        this.channelLayer = this.$refs.mapComponent.addLayer(array, data => {
+        this.channelLayer = this.$refs.mapComponent.addPointLayer(array, data => {
           this.closeInfoBox()
           this.$nextTick(() => {
             if (data[0].edit) {
@@ -388,6 +388,13 @@ export default {
     },
     testArray: function (){
       this.$store.dispatch('commonChanel/test')
+    },
+    drawThin: function (){
+      // 假设抽稀的距离
+      let distance = 1000
+      // 根据距离计算经纬度差值
+      let diff = this.$refs.mapComponent.computeDiff(distance)
+
     }
   }