周边分析交互

src/components/easyMap/initMapInfo.ts

@@ -4,7 +4,7 @@ import * as source from 'ol/source'
 import HaituImg from './images/bg-ocean.png'
 import store from '@/store/index'
 
-const isInternet = true
+const isInternet = false
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],

src/views/gis/layout/index.vue

@@ -185,6 +185,8 @@ export default defineComponent({
       }
     }
     onMounted(() => {
+      // state.toolsCom = AnalysisCom
+      // state.toolsType = 'analysis'
     })
     return {
       ...toRefs(state),

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

@@ -1,18 +1,17 @@
 <template>
   <div class="analysis-com">
-    <div class="draw-edit">
-      <div class="content">
+    <div class="draw-edit" v-if="cusTransfer.draw.center">
+      <div class="draw-edit-content">
         周边范围：
-        <div class="range-min __hover" @click="cusTransfer.draw.range > 1 ? cusTransfer.draw.range-- : undefined">-</div>
+        <div class="radius-min __hover" @click="cusTransfer.draw.radius > 1 ? (cusTransfer.draw.radius--, setCircle()) : undefined">-</div>
         <CusFormColumn
             link="number"
             label=""
             :min="1"
-            :max="60"
             :clearable="false"
-            v-model:param="cusTransfer.draw.range"
+            v-model:param="cusTransfer.draw.radius"
             @blur="handleRangeBlur"/>
-        <div class="range-max __hover" @click="cusTransfer.draw.range < 60 ? cusTransfer.draw.range++ : undefined">+</div>
+        <div class="radius-max __hover" @click="cusTransfer.draw.radius++, setCircle()">+</div>
         km
       </div>
       <div class="__cus-buttons-3">
@@ -20,9 +19,17 @@
         <div class="__cus-button-cancel __hover" @click="$emit('cancel')">取消</div>
       </div>
     </div>
-    <div class="content __box-shadow" v-if="cusTransfer.draw.wkt">
-      <div class="head">
-        <div></div>
+    <div class="content __box-shadow" v-if="cusTransfer.draw.radius">
+      <div class="head-tab">
+        <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'power'}" @click="cusTransfer.switchType = 'power'">
+          <SvgIcon name="search"/>处置力量(4人)
+        </div>
+        <div class="head-tab-item __hover" :class="{active: cusTransfer.switchType === 'device'}" @click="cusTransfer.switchType = 'device'">
+          <SvgIcon name="search"/>设备(2台)
+        </div>
+        <div class="head-tab-close __hover" @click="$emit('cancel')">
+          <SvgIcon name="close_2" color="#0069FF" size="14"/>
+        </div>
       </div>
     </div>
   </div>
@@ -53,6 +60,8 @@ import * as proj from "ol/proj";
 import PointIcon from "@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png";
 import * as ol from "ol";
 import {fromCircle} from "ol/geom/Polygon";
+import {unByKey} from "ol/Observable";
+import * as sphere from "ol/sphere";
 
 export default defineComponent({
   name: '',
@@ -77,24 +86,29 @@ export default defineComponent({
       cusTransfer: <any>{
         draw: {
           center: null,
-          range: 5,
+          radius: 5,
           wkt: ''
         },
+        analysisFeat: <any>null,
         analysisLayer: <any>null,
-        analysisRealLayer: <any>null,
         analysisModify: <any>null,
         analysisDraw: <any>null,
+        switchType: 'power',
+        result: {
+          power: {}
+        },
+        analysisDrawHelpTooltipElement: null,
       },
     })
     const handleRangeBlur = () => {
-      if (!state.cusTransfer.draw.range) {
-        state.cusTransfer.draw.range = 5
+      if (!state.cusTransfer.draw.radius) {
+        state.cusTransfer.draw.radius = 5
       }
+      setCircle()
     }
     const initLayer = () => {
       if (state.cusTransfer.analysisLayer) {
         state.cusTransfer.analysisLayer.setVisible(true)
-        state.cusTransfer.analysisRealLayer.setVisible(true)
         if (state.cusTransfer.analysisModify) {
           props.map.addInteraction(state.cusTransfer.analysisModify);
         }
@@ -103,10 +117,10 @@ export default defineComponent({
         }
       } else {
         const layerFlag = ['layerName', 'analysisDrawViewsLayer']
-        const _source = new source.Vector(); //图层数据源
+        state.cusTransfer.analysisSource = new source.Vector(); //图层数据源
         state.cusTransfer.analysisLayer = new layer.Vector({
           zIndex: 10000,
-          source: _source,
+          source: state.cusTransfer.analysisSource,
           style: [
             new style.Style({
               image: new style.Icon({
@@ -126,61 +140,97 @@ export default defineComponent({
         });
         state.cusTransfer.analysisLayer.set(layerFlag[0], layerFlag[1])
         props.map.addLayer(state.cusTransfer.analysisLayer);
-        const layerRealFlag = ['layerName', 'analysisRealDrawViewsLayer']
-        const _sourceReal = new source.Vector(); //图层数据源
-        state.cusTransfer.analysisRealLayer = new layer.Vector({
-          zIndex: 999,
-          source: _sourceReal,
-          style: [
-            new style.Style({
-              stroke: new style.Stroke({
-                color: '#2860F1',
-                width: 2,
-                lineDash: [10, 10]
-              }),
-              fill: new style.Fill({
-                color: 'rgba(20, 129, 241, 0.3)',
-              }),
-            })
-          ]
-        });
-        state.cusTransfer.analysisRealLayer.set(layerRealFlag[0], layerRealFlag[1])
-        props.map.addLayer(state.cusTransfer.analysisRealLayer);
         state.cusTransfer.analysisModify = new interaction.Modify({
-          source: _source,
+          source: state.cusTransfer.analysisSource,
         });
         props.map.addInteraction(state.cusTransfer.analysisModify)
         state.cusTransfer.analysisModify.on('modifyend', evt => {
           try {
             const feat = evt.features.item(0)
-            state.cusTransfer.draw.center = feat.getGeometry().getCoordinates()
+            getCircleParams(feat.getGeometry())
           } catch {
           }
         })
+
+        let sketch;
+        let helpTooltip;
+        const createHelpTooltip = () => {
+          const id = 'analysisDrawHelpTooltipElementId'
+          if (state.cusTransfer.analysisDrawHelpTooltipElement) {
+            props.map.removeOverlay(props.map.getOverlayById(id))
+            state.cusTransfer.analysisDrawHelpTooltipElement.parentNode.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
+          }
+          state.cusTransfer.analysisDrawHelpTooltipElement = document.createElement('div');
+          state.cusTransfer.analysisDrawHelpTooltipElement.className = 'tooltip hidden';
+          helpTooltip = new ol.Overlay({
+            id,
+            element: state.cusTransfer.analysisDrawHelpTooltipElement,
+            offset: [15, 0],
+            positioning: 'center-left'
+          });
+          props.map.addOverlay(helpTooltip);
+        }
+        createHelpTooltip(); //创建帮助提示框
         //  标绘
         state.cusTransfer.analysisDraw = new interaction.Draw({
-          source: _source,//测量绘制层数据源
-          type: 'Point',  //几何图形类型
+          source: state.cusTransfer.analysisSource,//测量绘制层数据源
+          type: 'Circle',  //几何图形类型
           style: new style.Style({
-            image: new style.Icon({
-              src: PointIcon,
-              displacement: [0, 24]
-            })
+            stroke: new style.Stroke({
+              color: '#2860F1',
+              width: 2,
+              lineDash: [10, 10]
+            }),
+            fill: new style.Fill({
+              color: 'rgba(20, 129, 241, 0.3)',
+            }),
           })
         });
         // @ts-ignore
         props.map.addInteraction(state.cusTransfer.analysisDraw);
+        const drawstartHandle = (evt) => {
+          sketch = evt.feature; //绘制的要素
+        }
+        state.cusTransfer.analysisDraw.on('drawstart', drawstartHandle);
         const drawendHandle = (evt) => {
+          // 标绘的时候不需要最终结果dom
+          props.map.removeOverlay(helpTooltip)
+          sketch = null; //置空当前绘制的要素对象
+          state.cusTransfer.analysisDrawHelpTooltipElement.parentNode.removeChild(state.cusTransfer.analysisDrawHelpTooltipElement);
+          state.cusTransfer.analysisDrawHelpTooltipElement = null; //置空测量工具提示框对象
+          state.cusTransfer.analysisDraw.un('drawstart', drawstartHandle);
           state.cusTransfer.analysisDraw.un('drawend', drawendHandle);
           props.map.removeInteraction(state.cusTransfer.analysisDraw);
+          props.map.un('pointermove', pointerMoveHandler)
           state.cusTransfer.analysisDraw = null
-          const feat = evt.feature
-          state.cusTransfer.draw.center = feat.getGeometry().getCoordinates()
+          state.cusTransfer.analysisFeat = evt.feature
+          getCircleParams(state.cusTransfer.analysisFeat.getGeometry())
         }
         state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
+        const getCircleParams = (circle) => {
+          const sourceProj = props.map.getView().getProjection();
+          const radius = Math.round(circle.getRadius() * sourceProj.getMetersPerUnit() / 1000)
+          state.cusTransfer.draw.center = circle.getCenter()
+          state.cusTransfer.draw.radius = radius
+          setCircle()
+        }
+        const pointerMoveHandler = (evt) => {
+          if (evt.dragging) {
+            return;
+          }
+          let helpMsg = '单击开始标绘';//当前默认提示信息
+          //判断绘制几何类型设置相应的帮助提示信息
+          if (sketch) {
+            helpMsg = '双击结束标绘';
+          }
+          state.cusTransfer.analysisDrawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
+          helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
+          state.cusTransfer.analysisDrawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+        };
+        props.map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
       }
     }
-    const initData = () => {
+    const  setCircle = () => {
       const transformProjection = (arr, EPSG, EPSG2) => {
         try {
           if (EPSG2 && EPSG) {
@@ -195,15 +245,9 @@ export default defineComponent({
           console.error(e);
         }
       }
-      //  @ts-ignore
-      const circle = new geom.Circle(state.cusTransfer.draw.center, transformProjection([state.cusTransfer.draw.range * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
-      const circlePoly = fromCircle(circle, 128)
-      const polyFeat = new ol.Feature({
-        geometry: circlePoly
-      })
-      state.cusTransfer.draw.wkt = that.$easyMap.formatPosition.cpnTwpn(circlePoly.getCoordinates())
-      state.cusTransfer.analysisRealLayer.getSource().clear()
-      state.cusTransfer.analysisRealLayer.getSource().addFeature(polyFeat)
+      state.cusTransfer.analysisFeat.getGeometry().setRadius(transformProjection([state.cusTransfer.draw.radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
+    }
+    const initData = () => {
     }
     onMounted(() => {
       if (props.transfer) {
@@ -215,7 +259,6 @@ export default defineComponent({
     })
     onUnmounted(() => {
       state.cusTransfer.analysisLayer.setVisible(false)
-      state.cusTransfer.analysisRealLayer.setVisible(false)
       if (state.cusTransfer.analysisModify) {
         props.map.removeInteraction(state.cusTransfer.analysisModify);
       }
@@ -226,7 +269,8 @@ export default defineComponent({
     return {
       ...toRefs(state),
       handleRangeBlur,
-      initData
+      initData,
+      setCircle
     }
   },
 })
@@ -245,8 +289,8 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 10px 0;
-  .content {
+  padding: 9px 0;
+  .draw-edit-content {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -254,7 +298,7 @@ export default defineComponent({
     font-family: Microsoft YaHei;
     font-weight: 400;
     color: #808080;
-    .range-min, .range-max {
+    .radius-min, .radius-max {
       margin: 0 3px;
       &:hover {
         color: #409EFF;
@@ -299,6 +343,47 @@ export default defineComponent({
   .content {
     width: 100%;
     height: 100%;
+    .head-tab {
+      height: 40px;
+      width: 100%;
+      border-bottom: 1px solid #EEEEEE;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding-left: 12px;
+      padding-right: 22px;
+      .head-tab-item {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #757575;
+        padding: 0 4px;
+        min-width: 60px;
+        margin-right: 10px;
+        &:last-child {
+          margin-right: 0;
+        }
+        &.active {
+          color: #0069FF;
+          &:after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 3px;
+            bottom: -1px;
+            background-color: #0062E9;
+          }
+        }
+      }
+      .head-tab-close {
+        margin-left: auto;
+      }
+    }
   }
 }
 </style>