lz提交修改1-20230728

src/components/GMap.vue

@@ -603,7 +603,7 @@ export default defineComponent({
             setLayers({
               id: ele.id,
               name: ele.name,
-              resource: ele.resource
+              resource: ele.resource,
             })
 
             updateCoordinates('wgs84-gcj02', ele)
@@ -613,7 +613,7 @@ export default defineComponent({
               ele.resource.content.properties.color,
               {
                 id: ele.id,
-                name: ele.name
+                name: ele.name,
               }
             )
           }
@@ -658,6 +658,8 @@ export default defineComponent({
     })
 
     function getDrawCallback ({ obj }) {
+      console.log(333)
+      console.log(obj)
       switch (state.currentType) {
         case MapDoodleEnum.PIN:
           postPinPositionResource(obj)
@@ -697,7 +699,7 @@ export default defineComponent({
       setLayers(req)
       updateCoordinates('gcj02-wgs84', req)
       const result = await postElementsReq(shareId.value, req)
-      obj.setExtData({ id: req.id, name: req.name })
+      obj.setExtData({ id: req.id, name: req.name, area: 222 })
       store.state.coverList.push(obj)
       // console.log(store.state.coverList)
     }
@@ -746,8 +748,8 @@ export default defineComponent({
       if (layer?.elements) {
         ;(layer?.elements as any[]).push(resource)
       }
-      console.log('layers', layers)
-      store.commit('SET_LAYER_INFO', layers)
+      // console.log('layers', layers)
+      // store.commit('SET_LAYER_INFO', layers)
     }
     function updateCoordinates (transformType: string, element: any) {
       const geoType = element.resource?.content.geometry.type

src/hooks/use-g-map-cover.ts

@@ -29,10 +29,10 @@ export function useGMapCover () {
     } = {
       '2d8cf0': pin2d8cf0,
       '19be6b': pin19be6b,
-      '212121': pin212121,
-      'b620e0': pinb620e0,
-      'e23c39': pine23c39,
-      'ffbb00': pineffbb00,
+      212121: pin212121,
+      b620e0: pinb620e0,
+      e23c39: pine23c39,
+      ffbb00: pineffbb00,
     }
     const iconName = (color?.replaceAll('#', '') || '').toLocaleLowerCase()
     return new AMap.Icon({
@@ -53,15 +53,14 @@ export function useGMapCover () {
       // fillColor: color || normalColor,
       extData: data
     })
-
     // 点击触发
-    pin.on('click', function(e) {
+    pin.on('click', function (e) {
       store.commit('SET_LAYER_ID', data.id)
       const infoWindow = new AMap.InfoWindow({
         content: data.name,
         offset: new AMap.Pixel(0, -10) // 左上角
       })
-      root.$map.setFitView([ pin ])
+      root.$map.setFitView([pin])
       infoWindow.open(root.$map, [coordinates[0], coordinates[1]])
     })
     // console.log('coordinates pin', pin)
@@ -87,14 +86,28 @@ export function useGMapCover () {
       // draggable: true,
     })
 
+    // 计算线段长度距离
+    const p1 = coordinates[0]
+    const p2 = coordinates[1]
+    // 返回 p1 到 p2 间的地面距离，单位：米
+    const dis = AMap.GeometryUtil.distance(p1, p2).toFixed(1)
+    // console.log(dis)
+    store.state.Layers.forEach(item => {
+      item.elements.forEach(item2 => {
+        if (item2.id == data.id) {
+          item2.around = around
+        }
+      })
+    })
+
     // 点击触发
-    polyline.on('click', function(e) {
+    polyline.on('click', function (e) {
       store.commit('SET_LAYER_ID', data.id)
       const infoWindow = new AMap.InfoWindow({
-        content: data.name,
+        content: '<div>' + '名称：' + data.name + '</div>' + '直线距离：' + dis + 'm',
         offset: new AMap.Pixel(0, -10) // 左上角
       })
-      root.$map.setFitView([ polyline ])
+      root.$map.setFitView([polyline])
       infoWindow.open(root.$map, [coordinates[0][0], coordinates[0][1]])
     })
     AddOverlayGroup(polyline)
@@ -108,6 +121,7 @@ export function useGMapCover () {
     // console.log('Polygon', path)
     const Polygon = new AMap.Polygon({
       path: path,
+      area: 'lizhao',
       strokeOpacity: 1,
       strokeWeight: 2,
       fillColor: color || normalColor,
@@ -116,17 +130,40 @@ export function useGMapCover () {
       strokeColor: color || normalColor,
       extData: data
     })
-
+    // 计算多边形面积
+    const area = Math.round(AMap.GeometryUtil.ringArea(coordinates))
+    // 计算多边形周长 返回线段 p0-p1-p2 的实际长度，单位：米
+    const aroundList = coordinates
+    aroundList.push(coordinates[0])
+    const around = AMap.GeometryUtil.distanceOfLine(aroundList).toFixed(1)
+    // console.log(around)
     // 点击触发
-    Polygon.on('click', function(e) {
+    Polygon.on('click', function (e) {
+      // console.log(coordinates)
       store.commit('SET_LAYER_ID', data.id)
-      const infoWindow = new AMap.InfoWindow({
-        content: data.name,
-        offset: new AMap.Pixel(0, -10) // 左上角
-      })
-      root.$map.setFitView([ Polygon ])
+    })
+    // 鼠标移入
+    const infoWindow = new AMap.InfoWindow({
+      content: '<div>' + '名称：' + data.name + '</div>' + '<div>' + '水平面积：' + area + 'm²' + '</div>' + '水平周长：' + around + 'm',
+      offset: new AMap.Pixel(0, -10) // 左上角
+    })
+    root.$map.setFitView([Polygon])
+    Polygon.on('mouseover', function (e) {
       infoWindow.open(root.$map, [coordinates[0][0], coordinates[0][1]])
     })
+    // 鼠标移出
+    Polygon.on('mouseout', function (e) {
+      infoWindow.close()
+    })
+    // console.log(store.state.Layers)
+    store.state.Layers.forEach(item => {
+      item.elements.forEach(item2 => {
+        if (item2.id == data.id) {
+          item2.area = area
+          item2.around = around
+        }
+      })
+    })
     AddOverlayGroup(Polygon)
   }
 

src/hooks/use-mouse-tool.ts

@@ -43,7 +43,7 @@ export function useMouseTool () {
       fillColor: '#1791fc',
       fillOpacity: 0.4,
       draggable: true,
-      title: type + state.PolygonNum++
+      title: type + state.PolygonNum++,
     })
     root?.$mouseTool.on('draw', getDrawCallback)
   }

src/pages/page-web/projects/layer.vue

@@ -37,6 +37,26 @@
             @change="changeLayer"
           />
         </div>
+        <div class="name element-item" v-if="layerState.currentType === geoType.Polygon">
+          <span class="title">水平面积:</span>
+          <span class="title">{{layerState.laterArea}} m²</span>
+        </div>
+        <div class="name element-item" v-if="layerState.currentType === geoType.Polygon">
+          <span class="title">水平周长:</span>
+          <span class="title">{{layerState.laterRound}} m</span>
+        </div>
+        <div class="name element-item" v-if="layerState.currentType === geoType.Polygon">
+          <span class="title">高度差:</span>
+          <span class="title">0</span>
+        </div>
+        <div class="name element-item" v-if="layerState.currentType === geoType.LineString">
+          <span class="title">水平距离:</span>
+          <span class="title">{{layerState.laterRound}} m</span>
+        </div>
+        <div class="name element-item" v-if="layerState.currentType === geoType.LineString">
+          <span class="title">直线距离:</span>
+          <span class="title">{{layerState.laterRound}} m</span>
+        </div>
         <div
           class="longitude element-item"
           v-if="layerState.currentType === geoType.Point"
@@ -117,6 +137,9 @@ const geoType = GeoType
 const layerState = reactive({
   layerName: '',
   layerId: '',
+  laterArea: '',
+  laterRound: '',
+  laterRound2: 276.7,
   longitude: 0,
   latitude: 0,
   currentType: '', // “LineString”,"Polygon","Point"
@@ -202,7 +225,7 @@ function updateMapElement (
       .coordinates[0] as GeojsonCoordinate[]
     useGMapCoverHook.initPolygon(name, coordinates, color, {
       id: id,
-      name: name
+      name: name,
     })
   }
 }
@@ -249,6 +272,10 @@ function setBaseInfo () {
     layerState.layerName = layer.name
     layerState.layerId = layer.id
     layerState.color = layer.resource?.content.properties.color
+    // 水平面积
+    layerState.laterArea = layer.area
+    // 水平周长
+    layerState.laterRound = layer.around
     switch (geoType) {
       case GeoType.Point:
         layerState.longitude = layer.resource?.content.geometry.coordinates[0]
@@ -257,6 +284,7 @@ function setBaseInfo () {
       case GeoType.LineString:
         break
       case GeoType.Polygon:
+
         break
     }
   }
@@ -300,6 +328,7 @@ async function getElementGroups (type?: string) {
     isDistributed: true
   })
   mapLayers.value = result.data
+  console.log('lizhao2', result)
   mapLayers.value = updateWgs84togcj02()
   if (type && type === 'init') {
     store.dispatch('setLayerInfo', mapLayers.value)