拐点生成错误弹窗显示拐点数据图层

src/components/customComponent/CdUpload.vue

@@ -54,6 +54,10 @@
       </div>
     </template>
   </BasicForm>
+
+  <a-modal v-model:visible="gdFlag" :footer="null" title="拐点生成图" width="70%">
+    <Mapgd :data="MapgdInfo" v-if="gdFlag"/>
+  </a-modal>
 </template> 
 
 <script lang="ts" setup>
@@ -71,6 +75,7 @@
   import { filterObj } from '/@/utils/common/compUtils';
   import { useMethods } from '/@/hooks/system/useMethods';
   import Mapbj from '@/components/customComponent/mapbj.vue';
+  import Mapgd from '@/components/customComponent/mapgd.vue';
   const { handleExportXls } = useMethods();
   const { createMessage } = useMessage();
   const fileListbjgd = ref<any>([]);
@@ -78,8 +83,10 @@
   const headers = reactive({
     'X-Access-Token': getToken(),
   });
+  const gdFlag = ref(false);
   const mapShow = ref(false);
-  const MapbjInfo = ref({});
+  const MapbjInfo = ref<any>({});
+  const MapgdInfo = ref<any>([]);
   // Emits声明
   const emit = defineEmits(['upsuccess']);
   
@@ -105,7 +112,16 @@
         });
       } else {
         fileList.value = [];
-        createMessage.error(`${info.file.response.message || info.file.response.result.message}`);
+        if (info.file.response.message && info.file.response.message.indexOf('拐点生成gis数据错误')>-1) {
+          let res = transformation('CGCS2000_3_Degree_GK_Zone_38', [info.file.response.result]);
+          let zxdw = {"type":"Point","coordinates":[Number(props.dkxx.wrdkzxjd),Number(props.dkxx.wrdkzxwd)]}
+          gdFlag.value = true;
+          createMessage.error(`${info.file.response.message || info.file.response.result.message}`);
+          MapgdInfo.value.push(zxdw)
+          MapgdInfo.value.push(JSON.parse(JSON.parse(res)[0]))
+        } else {
+          createMessage.error(`${info.file.response.message || info.file.response.result.message}`);
+        }
       }
     } else if (info.file.status === 'error') {
       fileList.value = [];
@@ -129,10 +145,14 @@
           });
         });
       } else {
-        console.log(info.file.response)
         fileListbjgd.value = [];
         if (info.file.response.message && info.file.response.message.indexOf('拐点生成gis数据错误')>-1) {
-          
+          let res = transformation('CGCS2000_3_Degree_GK_Zone_38', [info.file.response.result]);
+          let zxdw = {"type":"Point","coordinates":[Number(props.dkxx.wrdkzxjd),Number(props.dkxx.wrdkzxwd)]}
+          gdFlag.value = true;
+          createMessage.error(`${info.file.response.message || info.file.response.result.message}`);
+          MapgdInfo.value.push(zxdw)
+          MapgdInfo.value.push(JSON.parse(JSON.parse(res)[0]))
         } else {
           createMessage.error(`${info.file.response.message || info.file.response.result.message}`);
         }

src/components/customComponent/mapgd.vue

+<template>
+  <div class="map h-240 w-full">
+    <div id="gdMap" class="w-full h-full"></div>
+  </div>
+</template>
+<script setup>
+  import { ref, onMounted, nextTick, watch } from 'vue';
+  import 'leaflet/dist/leaflet.css';
+  import * as L from 'leaflet';
+  //   import 'leaflet.fullscreen/Control.FullScreen';
+  //   import 'leaflet.fullscreen/Control.FullScreen.css';
+  import 'leaflet-measure-path/leaflet-measure-path.css';
+  import 'leaflet-measure-path/leaflet-measure-path.js';
+  import 'leaflet.markercluster/dist/MarkerCluster.css';
+  import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+  import 'leaflet.markercluster';
+  import { useRouter } from 'vue-router';
+  import { getScjdShp } from '/@/api/common/api';
+  // 引入jsts
+  import WKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
+  import RelateOp from 'jsts/org/locationtech/jts/operation/relate/RelateOp';
+  import BufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp';
+  import WKTWriter from 'jsts/org/locationtech/jts/io/WKTWriter';
+  import positionIcon from '@/assets/images/position.png'
+
+  import proj4 from 'proj4';
+
+  let router = useRouter(); // 注册路由
+  const params = ref(router.currentRoute.value.query);
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {},
+    },
+  });
+  onMounted(async () => {
+    await nextTick();
+    initMap();
+  });
+
+  const mapgd = ref('');
+  const content = ref(null);
+  const show = ref(false);
+  const geojsonLayer = ref([]);
+  const layerGroups = ref();
+  const markerClusterLayer = ref();
+  const open = ref(true);
+
+  async function initMap() {
+    // 23.125178, 113.280637
+    await nextTick();
+    if (mapgd.value) {
+      return
+    }
+    mapgd.value = L.map('gdMap', {
+      center: [23.125178, 113.280637],
+      zoom: 12,
+      zoomControl: true,
+      attributionControl: false,
+      crs: L.CRS.EPSG4326, // 默认3857
+      fullscreenControl: true,
+      maxZoom: 17,
+    });
+    console.log(mapgd.value, 'mapgd.value ');
+    //定义一个比例尺控件
+    let scale = L.control.scale();
+    scale.addTo(mapgd.value);
+
+    // 这个 比例尺的
+    scale.getContainer().childNodes[0].style.cssText =
+      'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;';
+
+    scale.getContainer().childNodes[1].hidden = true;
+
+    // // 经纬度投影
+    const IMG_C =
+      'https://t1.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
+    const CIA_C =
+      'https://t1.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
+    // 天地图注记
+    const zj =
+      'https://t1.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886';
+
+    var myLayer1 = L.tileLayer(IMG_C, {
+      zoomOffset: 1, // 经纬度投影打开
+      maxZoom: 17,
+      tileSize: 256,
+    }).addTo(mapgd.value);
+
+    var myLayer2 = L.tileLayer(CIA_C, {
+      zoomOffset: 1, // 经纬度投影打开
+      maxZoom: 17,
+      tileSize: 256,
+    }).addTo(mapgd.value);
+  }
+
+  async function position(data) {
+    console.log(data,'拐点数据')
+    if (geojsonLayer.value) {
+      geojsonLayer.value.forEach((item) => {
+        mapgd.value.removeLayer(item);
+      });
+    }
+    let geojsonLayers = [];
+
+    data?.forEach((jsons) => {
+      let geojsons = L.geoJSON(jsons, {
+        // style: { color: '#00C9D8', weight: 5, fillOpacity: 0 },
+        pointToLayer: function (geoJsonPoint, latlng) {
+          return L.marker(latlng, {
+            icon: new L.Icon({
+              iconUrl: positionIcon,
+              iconSize: [40, 40],
+            }),
+          });
+        }, 
+      }).addTo(mapgd.value);
+
+      geojsonLayers.push(geojsons);
+    });
+    // 重新设置视图中心点
+    if (data.length > 0) {
+      const jwd = data[0].coordinates;
+     mapgd.value.flyTo([jwd[1],jwd[0]], 17);
+    }
+  }
+
+  function clearMarker() {
+    if (layerGroups.value) {
+      layerGroups.value.clearLayers();
+    }
+  }
+  
+  watch(
+    () => props.data,
+    async (val) => {
+      await nextTick();
+      setTimeout(()=>{
+        position(val);
+      },500)
+      
+    },
+    { deep: true, immediate: true }
+  );
+
+</script>
+<style lang="less" scoped></style>