周边分析

src/style/cus.scss

@@ -315,3 +315,31 @@
     color: #108DF3;
   }
 }
+.__cus-buttons-3 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >div {
+    width: 60px;
+    height: 20px;
+    border: 1px solid #1270DA;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+  .__cus-button-submit {
+    background-color: #1280F1;
+    color: #FFFFFF;
+  }
+  .__cus-button-cancel {
+    background-color: #FFFFFF;
+    color: #108DF3;
+  }
+}

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

@@ -1,6 +1,30 @@
 <template>
   <div class="analysis-com">
-    周边分析
+    <div class="draw-edit">
+      <div class="content">
+        周边范围：
+        <div class="range-min __hover" @click="cusTransfer.draw.range > 1 ? cusTransfer.draw.range-- : undefined">-</div>
+        <CusFormColumn
+            link="number"
+            label=""
+            :min="1"
+            :max="60"
+            :clearable="false"
+            v-model:param="cusTransfer.draw.range"
+            @blur="handleRangeBlur"/>
+        <div class="range-max __hover" @click="cusTransfer.draw.range < 60 ? cusTransfer.draw.range++ : undefined">+</div>
+        km
+      </div>
+      <div class="__cus-buttons-3">
+        <div class="__cus-button-submit __hover" @click="initData">确定</div>
+        <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>
+    </div>
   </div>
 </template>
 
@@ -15,37 +39,266 @@ import {
   getCurrentInstance,
   ComponentInternalInstance,
   toRefs,
-  nextTick
+  nextTick, onUnmounted
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import * as source from "ol/source";
+import * as layer from "ol/layer";
+import * as interaction from "ol/interaction";
+import * as geom from 'ol/geom';
+import * as style from "ol/style";
+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";
 
 export default defineComponent({
   name: '',
   components: {},
   props: {
     map: {
-      required: true
+      required: true,
+      default: <any>{}
     },
     mapFunc: {
       required: true
-    }
+    },
+    transfer: {}
   },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      transfer: <any>props.transfer,
+      cusTransfer: <any>{
+        draw: {
+          center: null,
+          range: 5,
+          wkt: ''
+        },
+        analysisLayer: <any>null,
+        analysisRealLayer: <any>null,
+        analysisModify: <any>null,
+        analysisDraw: <any>null,
+      },
+    })
+    const handleRangeBlur = () => {
+      if (!state.cusTransfer.draw.range) {
+        state.cusTransfer.draw.range = 5
+      }
+    }
+    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);
+        }
+        if (state.cusTransfer.analysisDraw) {
+          props.map.addInteraction(state.cusTransfer.analysisDraw);
+        }
+      } else {
+        const layerFlag = ['layerName', 'analysisDrawViewsLayer']
+        const _source = new source.Vector(); //图层数据源
+        state.cusTransfer.analysisLayer = new layer.Vector({
+          zIndex: 10000,
+          source: _source,
+          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)',
+              }),
+            })
+          ]
+        });
+        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,
+        });
+        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()
+          } catch {
+          }
+        })
+        //  标绘
+        state.cusTransfer.analysisDraw = new interaction.Draw({
+          source: _source,//测量绘制层数据源
+          type: 'Point',  //几何图形类型
+          style: new style.Style({
+            image: new style.Icon({
+              src: PointIcon,
+              displacement: [0, 24]
+            })
+          })
+        });
+        // @ts-ignore
+        props.map.addInteraction(state.cusTransfer.analysisDraw);
+        const drawendHandle = (evt) => {
+          state.cusTransfer.analysisDraw.un('drawend', drawendHandle);
+          props.map.removeInteraction(state.cusTransfer.analysisDraw);
+          state.cusTransfer.analysisDraw = null
+          const feat = evt.feature
+          state.cusTransfer.draw.center = feat.getGeometry().getCoordinates()
+        }
+        state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
+      }
+    }
+    const initData = () => {
+      const transformProjection = (arr, EPSG, EPSG2) => {
+        try {
+          if (EPSG2 && EPSG) {
+            if (arr && arr.length === 4) {
+              return proj.transformExtent(arr, EPSG, EPSG2);
+            } else {
+              return proj.transform(arr, EPSG, EPSG2);
+            }
+          }
+          return undefined;
+        } catch (e) {
+          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)
+    }
     onMounted(() => {
+      if (props.transfer) {
+        state.cusTransfer = props.transfer
+      } else {
+        emit('update:transfer', state.cusTransfer)
+      }
+      initLayer()
+    })
+    onUnmounted(() => {
+      state.cusTransfer.analysisLayer.setVisible(false)
+      state.cusTransfer.analysisRealLayer.setVisible(false)
+      if (state.cusTransfer.analysisModify) {
+        props.map.removeInteraction(state.cusTransfer.analysisModify);
+      }
+      if (state.cusTransfer.analysisDraw) {
+        props.map.removeInteraction(state.cusTransfer.analysisDraw);
+      }
     })
     return {
       ...toRefs(state),
+      handleRangeBlur,
+      initData
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+.draw-edit {
+  width: 160px;
+  height: 66px;
+  background: #FFFFFF;
+  opacity: 0.8;
+  border-radius: 5px;
+  position: fixed;
+  bottom: 68px;
+  left: calc((100% - 160px) / 2);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 0;
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #808080;
+    .range-min, .range-max {
+      margin: 0 3px;
+      &:hover {
+        color: #409EFF;
+      }
+    }
+    :deep(.cus-form-column) {
+      max-width: unset;
+      width: 44px;
+      flex: unset;
+      .el-form-item {
+        margin: 0;
+        .el-form-item__content {
+          height: 20px;
+          .el-input {
+            .el-input__wrapper {
+              padding: 0;
+              border-radius: 5px;
+              .el-input__inner {
+                height: 100%;
+                text-align: center;
+                border: 1px solid #808080;
+                border-radius: 5px;
+                &::placeholder {
+                  font-size: 12px;
+                  font-family: Microsoft YaHei;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.analysis-com {
+  position: fixed;
+  width: 404px;
+  max-height: calc(100% - 100px);
+  background-color: #FFFFFF;
+  box-sizing: border-box;
+  overflow-y: auto;
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

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

@@ -2,18 +2,12 @@ import * as ol from 'ol'
 import * as style from 'ol/style'
 import * as layer from 'ol/layer'
 import * as source from 'ol/source'
-import * as geom from 'ol/geom'
-import * as extent from 'ol/extent'
-import * as proj from 'ol/proj'
 import * as interaction from 'ol/interaction'
-import * as format from "ol/format";
 import Modify from "ol/interaction/Modify"
-import Draw, {createBox, createRegularPolygon} from "ol/interaction/Draw"
+import {createBox} from "ol/interaction/Draw"
 import * as sphere from "ol/sphere";
 import {unByKey} from "ol/Observable";
-import {formatPosition} from "@/utils/easyMap";
 import {isValue} from "@/utils/util";
-import {fromCircle} from "ol/geom/Polygon";
 // @ts-ignore
 import PointIcon from "@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png"