定位

src/components/easyMap/func/measure.scss

@@ -40,6 +40,18 @@
   vertical-align: middle;
   margin-left: 10px;
   cursor: pointer;
-  background: url('@/assets/images/map/lineDel.png') no-repeat;
+  background: url('../images/lineDel.png') no-repeat;
   background-size: 100% 100%;
+}
+
+.tooltip-location {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  background: url('../images/close.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 34px;
+  margin-bottom: 14px;
 }

src/components/easyMap/func/draw.ts

@@ -10,7 +10,7 @@ import * as coordinate from 'ol/coordinate'
 import * as control from 'ol/control'
 import * as sphere from 'ol/sphere'
 import { unByKey } from 'ol/Observable'
-import './measure.scss'
+import './dom.scss'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 import {formatPosition} from '@/utils/easyMap'

src/components/easyMap/func/location.ts

@@ -7,51 +7,71 @@ import * as proj from 'ol/proj'
 import * as interaction from 'ol/interaction'
 import * as coordinate from 'ol/coordinate'
 import * as format from "ol/format";
+// @ts-ignore
+import LocationImg from '../images/location.png'
+import {ElMessage} from "element-plus";
 
 const layerFlag = ['layerName', 'positionLayer']
+let locationTooltipElement
 export default function Location ({map, position = null, wkt = null, zoom = null, color = '#039ff3'}) {
-    let _source
-    const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
-    if (realLayer[0]) {
-        _source = realLayer[0].getSource()
-        _source.clear()
-    } else {
-        _source = new source.Vector(); //图层数据源
-        const _vector = new layer.Vector({
-            zIndex: 9999,
-            source: _source,
+    try {
+        const feat: any = new format.WKT().readFeature(position ? `POINT(${position[0]} ${position[1]})` : wkt)
+        let _source
+        const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
+        if (realLayer[0]) {
+            _source = realLayer[0].getSource()
+            _source.clear()
+        } else {
+            _source = new source.Vector(); //图层数据源
+            const _vector = new layer.Vector({
+                zIndex: 9999,
+                source: _source,
+            });
+            _vector.set(layerFlag[0], layerFlag[1])
+            map.addLayer(_vector);
+        }
+        let locationTooltip
+        const id = 'locationTooltipElementId'
+        if (locationTooltipElement) {
+            map.removeOverlay(map.getOverlayById(id))
+            locationTooltipElement.parentNode.removeChild(locationTooltipElement);
+        }
+        locationTooltipElement = document.createElement('div');
+        locationTooltipElement.className = 'tooltip-location';
+        locationTooltipElement.onclick = () => {
+            _source.removeFeature(feat)
+            map.removeOverlay(map.getOverlayById(id))
+            locationTooltipElement.parentNode.removeChild(locationTooltipElement);
+            locationTooltipElement = null
+        };
+        locationTooltip = new ol.Overlay({
+            id,
+            element: locationTooltipElement,
+            offset: [0, -15],
+            positioning: 'bottom-center'
         });
-        _vector.set(layerFlag[0], layerFlag[1])
-        map.addLayer(_vector);
-    }
-    const feat = new format.WKT().readFeature(position ? `POINT(${position[0]} ${position[1]})` : wkt)
-    const radius = 25
-    const longRadius = radius * Math.SQRT2
-    feat.setStyle([new style.Style({ //图层样式
-        image: new style.RegularShape({
-            stroke: new style.Stroke({
-                color: color,
-                width: 2,
-                lineDash: [
-                    (longRadius * 3) / 10,
-                    (longRadius * 4) / 10,
-                    (longRadius * 3) / 10,
-                    0
-                ]
-            }),
-            radius1: radius,
-            rotation: Math.PI / (180 / 45),
-            points: 4
-        })
-    })])
-    _source.addFeature(feat)
-    setTimeout(() => {
+        map.addOverlay(locationTooltip);
+        const radius = 25
+        const longRadius = radius * Math.SQRT2
+        feat.setStyle([new style.Style({ //图层样式
+            image: new style.Icon({
+                src: LocationImg,
+                displacement:[0, 15]
+            })
+        })])
+        _source.addFeature(feat)
+        locationTooltip.setPosition(feat.getGeometry().getCoordinates())
+        // setTimeout(() => {
+        //     // @ts-ignore
+        //     feat?.getGeometry().setCoordinates([0, 0])
+        // }, 3000)
         // @ts-ignore
-        feat?.getGeometry().setCoordinates([0, 0])
-    }, 3000)
-    // @ts-ignore
-    map.getView().setCenter(feat?.getGeometry().getCoordinates())
-    if (zoom) {
-        map.getView().setZoom(zoom)
+        map.getView().setCenter(feat?.getGeometry().getCoordinates())
+        if (zoom) {
+            map.getView().setZoom(zoom)
+        }
+    }catch (e) {
+        console.log(wkt ?? position)
+        ElMessage.warning('坐标异常！')
     }
 }

src/components/easyMap/func/measure.ts

@@ -9,7 +9,7 @@ import * as coordinate from 'ol/coordinate'
 import * as control from 'ol/control'
 import * as sphere from 'ol/sphere'
 import { unByKey } from 'ol/Observable'
-import './measure.scss'
+import './dom.scss'
 import {createBox} from "ol/interaction/Draw";
 import {Circle, LineString, Polygon} from "ol/geom";
 

src/views/gis/layout/index.vue

@@ -44,7 +44,7 @@
         </template>
       </div>
       <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear' && toolsCom">
-        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc" v-model:transfer="toolsParams[toolsType]"/>
+        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc" v-model:transfer="toolsParams[toolsType]" @cancel="toolsType = ''"/>
       </div>
     </div>
     <div class="gis-content">

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

@@ -12,7 +12,7 @@
           <template v-if="cusTransfer.tab === 'd'">
             <CusFormColumn
                 link="number"
-                :decimal="8"
+                :decimal="14"
                 v-model:param="cusTransfer.format.d.lon1"/>
             <div class="unit">°</div>
           </template>
@@ -52,7 +52,7 @@
           <template v-if="cusTransfer.tab === 'd'">
             <CusFormColumn
                 link="number"
-                :decimal="8"
+                :decimal="14"
                 v-model:param="cusTransfer.format.d.lat1"/>
             <div class="unit">°</div>
           </template>
@@ -88,8 +88,8 @@
       </div>
     </div>
     <div class="buttons">
-      <div class="__hover">确定</div>
-      <div class="__hover cancel">取消</div>
+      <div class="__hover" @click="toPosition">确定</div>
+      <div class="__hover cancel" @click="$emit('cancel')">取消</div>
     </div>
   </div>
 </template>
@@ -156,6 +156,21 @@ export default defineComponent({
         },
       }
     })
+    const toPosition = () => {
+      //度°分′秒″转度
+      const convertGPSToXY = (d, f, m) => {
+        const _d = d
+        let _f = f || 0
+        const _m = m || 0
+        _f = parseFloat(String(_f)) + parseFloat(String(_m / 60))
+        const du = parseFloat(String(_f / 60)) + parseFloat(_d)
+        return du
+      }
+      const lonS = state.cusTransfer.format.isEast ? 1 : -1
+      const latS = state.cusTransfer.format.isSouth ? -1 : 1
+      const coor = [lonS * convertGPSToXY(state.cusTransfer.format[state.cusTransfer.tab].lon1, state.cusTransfer.format[state.cusTransfer.tab].lon2, state.cusTransfer.format[state.cusTransfer.tab].lon3), latS * convertGPSToXY(state.cusTransfer.format[state.cusTransfer.tab].lat1, state.cusTransfer.format[state.cusTransfer.tab].lat2, state.cusTransfer.format[state.cusTransfer.tab].lat3)]
+      props.mapFunc.toLocation({position: coor})
+    }
     onMounted(() => {
       if (props.transfer) {
         state.cusTransfer = props.transfer
@@ -165,6 +180,7 @@ export default defineComponent({
     })
     return {
       ...toRefs(state),
+      toPosition
     }
   },
 })