Forráskód Böngészése

互联网-社管一张图,画矩形:快速双击结束没问题;但是间隔双击有问题,即单击一次,间隔1s再单击一次居然可以结束绘制,且会选中目标;

CzRger 1 éve%!(EXTRA string=óta)
szülő
commit
e09268336b

+ 5 - 0
src/components/easyMap/func/base-draw.ts

@@ -14,6 +14,7 @@ import {unByKey} from "ol/Observable";
 import {formatPosition} from "@/utils/easyMap";
 import {isValue} from "@/utils/util";
 import {fromCircle} from "ol/geom/Polygon";
+import store from "@/store";
 
 const globalLineDash = [
     [0, 0], //实线
@@ -416,6 +417,7 @@ export const drawEdits = (map, obj, emitWkt) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.dispatch('gis/LOAD_IS_TOOLING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件,根据绘制几何类型得到测量长度值或面积值,并将其设置到测量工具提示框中显示
@@ -447,6 +449,9 @@ export const drawEdits = (map, obj, emitWkt) => {
                         document.body.removeChild(str)
                     }
                     const drawendHandle = (evt) => {
+                        setTimeout(() => {
+                            store.dispatch('gis/LOAD_IS_TOOLING', false)
+                        }, 300)
                         map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                         // 标绘的时候不需要最终结果dom
                         map.removeOverlay(map.getOverlayById('baseDrawHelpTooltipElementId'))

+ 5 - 0
src/components/easyMap/func/draw.ts

@@ -14,6 +14,7 @@ import './dom.scss'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 import {formatPosition} from '@/utils/easyMap'
+import store from "@/store";
 
 const layerFlag = ['layerName', 'drawLayer']
 let drawTooltipElement;
@@ -181,6 +182,7 @@ export default function Draw (map, typeSelect) {
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.dispatch('gis/LOAD_IS_TOOLING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件,根据绘制几何类型得到测量长度值或面积值,并将其设置到测量工具提示框中显示
@@ -212,6 +214,9 @@ export default function Draw (map, typeSelect) {
                     document.body.removeChild(str)
                 }
                 const drawendHandle = (evt) => {
+                    setTimeout(() => {
+                        store.dispatch('gis/LOAD_IS_TOOLING', false)
+                    }, 300)
                     map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                     // const del = document.createElement("div");
                     // del.className = "lineDel";

+ 4 - 0
src/components/easyMap/func/measure.ts

@@ -185,6 +185,7 @@ export default function Measure (map, typeSelect) {
             let listener;
             //绑定交互绘制工具开始绘制的事件
             const drawstartHandle = (evt) => {
+                store.commit('gis/SET_IS_DRAWING', true)
                 sketch = evt.feature; //绘制的要素
                 let tooltipCoord = evt.coordinate;// 绘制的坐标
                 //绑定change事件,根据绘制几何类型得到测量长度值或面积值,并将其设置到测量工具提示框中显示
@@ -216,6 +217,9 @@ export default function Measure (map, typeSelect) {
                 document.body.removeChild(str)
             }
             const drawendHandle = (evt) => {
+                setTimeout(() => {
+                    store.dispatch('gis/LOAD_IS_TOOLING', false)
+                }, 300)
                 map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                 const del: any = document.createElement("div");
                 del.className = "lineDel";

+ 27 - 20
src/store/modules/gis.ts

@@ -22,6 +22,7 @@ const formatWkt = (wkt) => {
 const featureTypeKey = 'featureType'
 
 const state = {
+  isDrawing: false,
   menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
   isTooling: false,
   videoParams: {
@@ -137,6 +138,9 @@ const getters = {
 }
 
 const mutations = {
+  SET_IS_DRAWING(state, flag) {
+    state.isDrawing = flag
+  }
 }
 
 const actions = {
@@ -399,28 +403,31 @@ const actions = {
         }
       }
       state.map.on('singleclick', e => {
-        let isFeature = false
-        e.map.forEachFeatureAtPixel(e.pixel, (feature) => {
-          if (!isFeature) {
-            isFeature = true
-            switch (feature.get(featureTypeKey)) {
-              case 'qy': clickQy(e, feature)
-                break
-              case 'sb': clickDefault(e, feature)
-                break
-              case 'qyAnalysisCircle': isFeature = false
-                break
-              case 'analysisCircle': isFeature = false
-                break
-              case 'statisticFeature': isFeature = false
-                break
+        if (!state.isDrawing) {
+
+          let isFeature = false
+          e.map.forEachFeatureAtPixel(e.pixel, (feature) => {
+            if (!isFeature) {
+              isFeature = true
+              switch (feature.get(featureTypeKey)) {
+                case 'qy': clickQy(e, feature)
+                  break
+                case 'sb': clickDefault(e, feature)
+                  break
+                case 'qyAnalysisCircle': isFeature = false
+                  break
+                case 'analysisCircle': isFeature = false
+                  break
+                case 'statisticFeature': isFeature = false
+                  break
+              }
             }
+          }, {
+            hitTolerance: 0,
+          });
+          if (!isFeature) {
+            handleTileClick(e)
           }
-        }, {
-          hitTolerance: 0,
-        });
-        if (!isFeature) {
-          handleTileClick(e)
         }
       })
     }

+ 5 - 0
src/views/gis/layout/tools/analysis.vue

@@ -114,6 +114,7 @@ import * as style from "ol/style";
 import * as ol from "ol";
 import SelectChartCom from "@/views/gis/layout/tools/select-chart.vue";
 import * as turf from "@turf/turf";
+import store from "@/store";
 
 export default defineComponent({
   name: '',
@@ -236,10 +237,14 @@ export default defineComponent({
         // @ts-ignore
         props.map.addInteraction(state.cusTransfer.analysisDraw);
         const drawstartHandle = (evt) => {
+          store.dispatch('gis/LOAD_IS_TOOLING', true)
           sketch = evt.feature; //绘制的要素
         }
         state.cusTransfer.analysisDraw.on('drawstart', drawstartHandle);
         const drawendHandle = (evt) => {
+          setTimeout(() => {
+            store.dispatch('gis/LOAD_IS_TOOLING', false)
+          }, 300)
           // 标绘的时候不需要最终结果dom
           props.map.removeOverlay(helpTooltip)
           sketch = null; //置空当前绘制的要素对象

+ 5 - 0
src/views/gis/layout/tools/select-draw.ts

@@ -13,6 +13,7 @@ import { unByKey } from 'ol/Observable'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 import {formatPosition} from '@/utils/easyMap'
+import store from "@/store";
 
 const layerFlag = ['layerName', 'selectDrawLayer']
 let drawTooltipElement;
@@ -181,6 +182,7 @@ export default function SelectDraw (map, typeSelect) {
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.dispatch('gis/LOAD_IS_TOOLING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件,根据绘制几何类型得到测量长度值或面积值,并将其设置到测量工具提示框中显示
@@ -212,6 +214,9 @@ export default function SelectDraw (map, typeSelect) {
                     document.body.removeChild(str)
                 }
                 const drawendHandle = (evt) => {
+                    setTimeout(() => {
+                        store.dispatch('gis/LOAD_IS_TOOLING', false)
+                    }, 300)
                     map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)[0]);
                     // const del = document.createElement("div");
                     // del.className = "lineDel";

+ 4 - 0
src/views/gis/layout/tools/tool-draw.ts

@@ -302,6 +302,7 @@ export const draw = (map, obj) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.dispatch('gis/LOAD_IS_TOOLING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件,根据绘制几何类型得到测量长度值或面积值,并将其设置到测量工具提示框中显示
@@ -333,6 +334,9 @@ export const draw = (map, obj) => {
                         document.body.removeChild(str)
                     }
                     const drawendHandle = (evt) => {
+                        setTimeout(() => {
+                            store.dispatch('gis/LOAD_IS_TOOLING', false)
+                        }, 300)
                         map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                         // 标绘的时候不需要最终结果dom
                         map.removeOverlay(map.getOverlayById('baseDrawHelpTooltipElementId'))