互联网-社管一张图，画圆形（框选、周边分析和工具）时：未做到双击结束；

src/components/easyMap/func/base-draw.ts

@@ -402,8 +402,27 @@ export const drawEdits = (map, obj, emitWkt) => {
                 };
                 const addInteraction = () => {
                     const id = 'baseDrawName'
+                    let drawLastPoint = ''
+                    let drawLastPointTimer: any = null
                     const draw = new interaction.Draw({
                         stopClick: true,
+                        condition: (e) => {
+                            const str = e.coordinate.join(',')
+                            let flag = true
+                            // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                            if (!drawLastPointTimer && str === drawLastPoint) {
+                                flag = false
+                            } else {
+                                if (drawLastPointTimer) {
+                                    clearTimeout(drawLastPointTimer)
+                                }
+                                drawLastPoint = str
+                            }
+                            drawLastPointTimer = setTimeout(() => {
+                                drawLastPointTimer = null
+                            }, 1000)
+                            return flag
+                        },
                         source: _source,//测量绘制层数据源
                         type: obj.featureType,  //几何图形类型
                         // geometryFunction: typeSelect === 'rectangle' ? createBox() : null,
@@ -418,6 +437,7 @@ export const drawEdits = (map, obj, emitWkt) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.commit('gis/SET_IS_DRAWING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -464,6 +484,9 @@ export const drawEdits = (map, obj, emitWkt) => {
                         map.un('pointermove', pointerMoveHandler)
                         const baseDrawFeature = evt.feature
                         getWkt(baseDrawFeature)
+                        setTimeout(() => {
+                            store.commit('gis/SET_IS_DRAWING', false)
+                        }, 600)
                     }
                     draw.on('drawend', drawendHandle);
                 }

src/components/easyMap/func/draw.ts

@@ -149,8 +149,49 @@ export default function Draw (map, typeSelect) {
             };
             const addInteraction = () => {
                 const id = 'drawName'
+                let drawLastPoint = ''
+                let drawLastPointTimer: any = null
+                let drawCircleDBClickTimer: any = null
                 const draw = new interaction.Draw({
                     stopClick: true,
+                    condition: (e) => {
+                        // 圆形单击即触发finishCondition，跳过
+                        if (typeSelect === 'circle') {
+                            return true
+                        }
+                        const str = e.coordinate.join(',')
+                        let flag = true
+                        // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                        if (!drawLastPointTimer && str === drawLastPoint) {
+                            flag = false
+                        } else {
+                            if (drawLastPointTimer) {
+                                clearTimeout(drawLastPointTimer)
+                            }
+                            drawLastPoint = str
+                        }
+                        drawLastPointTimer = setTimeout(() => {
+                            drawLastPointTimer = null
+                        }, 1000)
+                        return flag
+                    },
+                    finishCondition: (e) => {
+                        if (typeSelect !== 'circle') {
+                            return true
+                        }
+                        let flag = true
+                        //  圆形进行双击延时监听判断
+                        if (!drawCircleDBClickTimer) {
+                            flag = false
+                        }
+                        if (drawCircleDBClickTimer) {
+                            clearTimeout(drawCircleDBClickTimer)
+                        }
+                        drawCircleDBClickTimer = setTimeout(() => {
+                            drawCircleDBClickTimer = null
+                        }, 1000)
+                        return flag
+                    },
                     source: _source,//测量绘制层数据源
                     // @ts-ignore
                     type: typeMapper.get(typeSelect),  //几何图形类型
@@ -183,6 +224,7 @@ export default function Draw (map, typeSelect) {
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.commit('gis/SET_IS_DRAWING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -262,6 +304,9 @@ export default function Draw (map, typeSelect) {
                         wkt = formatPosition.cpnTwpn(circlePoly.getCoordinates())
                     }
                     resolve({feature: oldDrawFeature, wkt: wkt})
+                    setTimeout(() => {
+                        store.commit('gis/SET_IS_DRAWING', false)
+                    }, 600)
                 }
                 draw.on('drawend', drawendHandle);
             }

src/components/easyMap/func/measure.ts

@@ -153,8 +153,49 @@ export default function Measure (map, typeSelect) {
         };
         const addInteraction = () => {
             const id = 'measureName'
+            let drawLastPoint = ''
+            let drawLastPointTimer: any = null
+            let drawCircleDBClickTimer: any = null
             const draw = new interaction.Draw({
                 stopClick: true,
+                condition: (e) => {
+                    // 圆形单击即触发finishCondition，跳过
+                    if (typeSelect === 'circle') {
+                        return true
+                    }
+                    const str = e.coordinate.join(',')
+                    let flag = true
+                    // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                    if (!drawLastPointTimer && str === drawLastPoint) {
+                        flag = false
+                    } else {
+                        if (drawLastPointTimer) {
+                            clearTimeout(drawLastPointTimer)
+                        }
+                        drawLastPoint = str
+                    }
+                    drawLastPointTimer = setTimeout(() => {
+                        drawLastPointTimer = null
+                    }, 1000)
+                    return flag
+                },
+                finishCondition: (e) => {
+                    if (typeSelect !== 'circle') {
+                        return true
+                    }
+                    let flag = true
+                    //  圆形进行双击延时监听判断
+                    if (!drawCircleDBClickTimer) {
+                        flag = false
+                    }
+                    if (drawCircleDBClickTimer) {
+                        clearTimeout(drawCircleDBClickTimer)
+                    }
+                    drawCircleDBClickTimer = setTimeout(() => {
+                        drawCircleDBClickTimer = null
+                    }, 1000)
+                    return flag
+                },
                 source: _source,//测量绘制层数据源
                 // @ts-ignore
                 type: typeMapper.get(typeSelect),  //几何图形类型
@@ -186,6 +227,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事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -247,6 +289,9 @@ export default function Measure (map, typeSelect) {
                 map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                 map.un('pointermove', pointerMoveHandler)
                 store.dispatch('gis/LOAD_IS_TOOLING', false)
+                setTimeout(() => {
+                    store.commit('gis/SET_IS_DRAWING', false)
+                }, 600)
             }
             draw.on('drawend', drawendHandle);
         }

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,30 @@ 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)
         }
       })
     }

src/views/gis/layout/tools/analysis.vue

@@ -220,8 +220,23 @@ export default defineComponent({
         }
         createHelpTooltip(); //创建帮助提示框
         //  标绘
+        let drawCircleDBClickTimer: any = null
         state.cusTransfer.analysisDraw = new interaction.Draw({
           stopClick: true,
+          finishCondition: (e) => {
+            let flag = true
+            //  圆形进行双击延时监听判断
+            if (!drawCircleDBClickTimer) {
+              flag = false
+            }
+            if (drawCircleDBClickTimer) {
+              clearTimeout(drawCircleDBClickTimer)
+            }
+            drawCircleDBClickTimer = setTimeout(() => {
+              drawCircleDBClickTimer = null
+            }, 1000)
+            return flag
+          },
           source: store.state.gis.analysis.source,//测量绘制层数据源
           type: 'Circle',  //几何图形类型
           style: new style.Style({
@@ -238,6 +253,7 @@ export default defineComponent({
         // @ts-ignore
         props.map.addInteraction(state.cusTransfer.analysisDraw);
         const drawstartHandle = (evt) => {
+          store.commit('gis/SET_IS_DRAWING', true)
           sketch = evt.feature; //绘制的要素
         }
         state.cusTransfer.analysisDraw.on('drawstart', drawstartHandle);
@@ -255,6 +271,9 @@ export default defineComponent({
           store.state.gis.analysis.feature = evt.feature
           store.state.gis.analysis.feature.set('featureType', 'analysisCircle')
           getCircleParams(evt.feature.getGeometry())
+          setTimeout(() => {
+            store.commit('gis/SET_IS_DRAWING', false)
+          }, 600)
         }
         state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
         const getCircleParams = (circle) => {

src/views/gis/layout/tools/select-draw.ts

@@ -149,8 +149,49 @@ export default function SelectDraw (map, typeSelect) {
                 return output;
             };
             const addInteraction = () => {
+                let drawLastPoint = ''
+                let drawLastPointTimer: any = null
+                let drawCircleDBClickTimer: any = null
                 selectDraw = new interaction.Draw({
                     stopClick: true,
+                    condition: (e) => {
+                        // 圆形单击即触发finishCondition，跳过
+                        if (typeSelect === 'circle') {
+                            return true
+                        }
+                        const str = e.coordinate.join(',')
+                        let flag = true
+                        // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                        if (!drawLastPointTimer && str === drawLastPoint) {
+                            flag = false
+                        } else {
+                            if (drawLastPointTimer) {
+                                clearTimeout(drawLastPointTimer)
+                            }
+                            drawLastPoint = str
+                        }
+                        drawLastPointTimer = setTimeout(() => {
+                            drawLastPointTimer = null
+                        }, 1000)
+                        return flag
+                    },
+                    finishCondition: (e) => {
+                        if (typeSelect !== 'circle') {
+                            return true
+                        }
+                        let flag = true
+                        //  圆形进行双击延时监听判断
+                        if (!drawCircleDBClickTimer) {
+                            flag = false
+                        }
+                        if (drawCircleDBClickTimer) {
+                            clearTimeout(drawCircleDBClickTimer)
+                        }
+                        drawCircleDBClickTimer = setTimeout(() => {
+                            drawCircleDBClickTimer = null
+                        }, 1000)
+                        return flag
+                    },
                     source: _source,//测量绘制层数据源
                     // @ts-ignore
                     type: typeMapper.get(typeSelect),  //几何图形类型
@@ -183,6 +224,7 @@ export default function SelectDraw (map, typeSelect) {
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
+                    store.commit('gis/SET_IS_DRAWING', true)
                     sketch = evt.feature; //绘制的要素
                     let tooltipCoord = evt.coordinate;// 绘制的坐标
                     //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -262,6 +304,9 @@ export default function SelectDraw (map, typeSelect) {
                         wkt = formatPosition.cpnTwpn(circlePoly.getCoordinates())
                     }
                     resolve({feature: oldDrawFeature, wkt: wkt})
+                    setTimeout(() => {
+                        store.commit('gis/SET_IS_DRAWING', false)
+                    }, 600)
                 }
                 selectDraw.on('drawend', drawendHandle);
             }

src/views/gis/layout/tools/tool-draw.ts

@@ -283,8 +283,49 @@ export const draw = (map, obj) => {
                 };
                 const addInteraction = () => {
                     const id = 'baseDrawName'
+                    let drawLastPoint = ''
+                    let drawLastPointTimer: any = null
+                    let drawCircleDBClickTimer: any = null
                     const draw = new interaction.Draw({
                         stopClick: true,
+                        condition: (e) => {
+                            // 圆形单击即触发finishCondition，跳过
+                            if (obj.featureType === 'Circle') {
+                                return true
+                            }
+                            const str = e.coordinate.join(',')
+                            let flag = true
+                            // 进行延时判断，避免只要鼠标不移动，单击后间隔很久也会视为双击，
+                            if (!drawLastPointTimer && str === drawLastPoint) {
+                                flag = false
+                            } else {
+                                if (drawLastPointTimer) {
+                                    clearTimeout(drawLastPointTimer)
+                                }
+                                drawLastPoint = str
+                            }
+                            drawLastPointTimer = setTimeout(() => {
+                                drawLastPointTimer = null
+                            }, 1000)
+                            return flag
+                        },
+                        finishCondition: (e) => {
+                            if (obj.featureType !== 'Circle') {
+                                return true
+                            }
+                            let flag = true
+                            //  圆形进行双击延时监听判断
+                            if (!drawCircleDBClickTimer) {
+                                flag = false
+                            }
+                            if (drawCircleDBClickTimer) {
+                                clearTimeout(drawCircleDBClickTimer)
+                            }
+                            drawCircleDBClickTimer = setTimeout(() => {
+                                drawCircleDBClickTimer = null
+                            }, 1000)
+                            return flag
+                        },
                         source: _source,//测量绘制层数据源
                         type: obj.rectangle ? 'LineString' : obj.featureType,  //几何图形类型
                         // @ts-ignore
@@ -292,7 +333,6 @@ export const draw = (map, obj) => {
                         geometryFunction: obj.rectangle ? createBox() : null,
                         // geometryFunction: createRegularPolygon(6),
                         style: commonStyle(obj.featureType === 'Point' ? true : false),
-                        stopClick: true
                     });
                     draw.set('showText', obj.featureType === 'Point' ? true : false)
                     draw.set(drawFlag[0], drawFlag[1])
@@ -303,6 +343,7 @@ export const draw = (map, obj) => {
                     let listener;
                     //绑定交互绘制工具开始绘制的事件
                     const drawstartHandle = (evt) => {
+                        store.commit('gis/SET_IS_DRAWING', true)
                         sketch = evt.feature; //绘制的要素
                         let tooltipCoord = evt.coordinate;// 绘制的坐标
                         //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
@@ -352,6 +393,9 @@ export const draw = (map, obj) => {
                         featEnd.set(layerFlag[0], layerFlag[1])
                         featEnd.setId(v4())
                         store.dispatch('gis/LOAD_IS_TOOLING', false)
+                        setTimeout(() => {
+                            store.commit('gis/SET_IS_DRAWING', false)
+                        }, 600)
                     }
                     draw.on('drawend', drawendHandle);
                 }