定点分析 路线改为天地图api

src/hooks/AMap/useAMap.ts

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid';
 import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
 import carImg from '@/assets/images/car.png';
-import { getImageUrl, iconList } from '@/views/globalMap/data/mapData';
+import { iconList } from '@/views/globalMap/data/mapData';
 
 export function useAMap(options) {
   let AMap, map, scale, cluster;

src/types/auto-imports.d.ts

@@ -78,7 +78,6 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
-  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -190,7 +189,6 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -207,7 +205,6 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -255,7 +252,6 @@ declare global {
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
-  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -87,7 +87,7 @@
           >
             <div class="text-box1">
               <div :class="'tag tag' + index">{{ getTag(index) }}</div>
-<!--              <div class="text1">{{ item.strategy }}</div>-->
+              <div class="text1">{{ item.strategy }}</div>
             </div>
             <div class="route-info">
               <div class="text-box2">
@@ -100,7 +100,7 @@
               <div class="line"></div>
               <div class="text-box2">
                 <i class="icon2" />
-                <div class="gradient-text2">{{ item.distance / 1000 }}</div>
+                <div class="gradient-text2">{{ item.distance }}</div>
                 <div class="text2">公里</div>
               </div>
             </div>
@@ -138,6 +138,7 @@ const getMap = inject('getMap');
 const getMapUtils = inject('getMapUtils');
 const mapStore = useMapStore();
 const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
+const tkKey = 'a8df87f1695d224d2679aa805c1268d9';
 let inputRef = ref();
 let showAddress = ref(true);
 let routeData = ref([]);
@@ -187,18 +188,22 @@ const toSelect = () => {
   map.on('click', handleClickMap);
   mapStore.setIsMapSelect(true);
   showAddress.value = false;
+  dataList.value = [];
   routeData.value = [];
   clearMarker();
   clearLine();
 };
 const handleClickMap = (e) => {
+  let path;
   if (mapStore.isAMap) {
     map.off('click', handleClickMap);
+    path = [e.lnglat.getLng(), e.lnglat.getLat()];
   } else {
     map.un('click', handleClickMap);
+    path = e.coordinate;
   }
   mapStore.setIsMapSelect(false);
-  getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
+  getAddress(path);
 };
 const confirmSelect = () => {
   selectEvent(
@@ -248,50 +253,71 @@ const createMarks = (item, unFitView) => {
       width: 19,
       height: 31
     });
-    const feature = new Feature({
+    selectMarker = new Feature({
       geometry: new Point([item.longitude, item.latitude])
     });
-    feature.setStyle(
+    selectMarker.setStyle(
       new Style({
         image: icon
       })
     );
     const vectorLayer = mapUtils.getVectorLayer();
-    vectorLayer.getSource().addFeature(feature);
+    vectorLayer.getSource().addFeature(selectMarker);
     if (!unFitView) {
       map.getView().setCenter([item.longitude, item.latitude]);
     }
   }
 };
 let selectIndex = ref(-1);
+let startPath = ref([]);
+let endPath = ref([]);
 const handleRoutes = async (item) => {
   selectIndex.value = -1;
-  const lnglat = gcoord.transform([item.longitude, item.latitude], gcoord.WGS84, gcoord.GCJ02);
-  const lnglat2 = gcoord.transform([selectData.value.longitude, selectData.value.latitude], gcoord.WGS84, gcoord.GCJ02);
+  const lnglat = [Number(item.longitude), Number(item.latitude)];
+  const lnglat2 = [Number(selectData.value.longitude), Number(selectData.value.latitude)];
   const start = [lnglat[0].toFixed(6), lnglat[1].toFixed(6)];
   const end = [lnglat2[0].toFixed(6), lnglat2[1].toFixed(6)];
+  startPath.value = [Number(item.longitude), Number(item.latitude)];
+  endPath.value = [selectData.value.longitude, selectData.value.latitude];
   showAddress.value = true;
   routesAddress.value = item.address;
-  const url = `https://restapi.amap.com/v5/direction/driving?origin=${start.toString()}&destination=${end.toString()}&key=${amapKey}`;
-  const response = await fetch(url + '&strategy=32&show_fields=polyline,cost');
-
-  if (!!response.ok) {
-    const data = await response.json();
-    if (data.route && data.route.paths) {
-      data.route.paths.forEach((item) => {
-        item.duration = formatDate(item.cost?.duration);
+  const ststrategy = ['最快路线', '最短路线', '避开高速'];
+  routeData.value = [];
+  for (let i = 0; i < 3; i++) {
+    const url = `http://api.tianditu.gov.cn/drive?postStr={"orig":"${start}","dest":"${end}","style":"${i}"}&type=search&tk=${tkKey}`;
+    const response = await fetch(url);
+    if (response.status == 200) {
+      const parser = new DOMParser();
+      const xmlString = await response.text();
+      const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
+      const routelatlon = xmlDoc.getElementsByTagName('routelatlon')[0].textContent;
+      const distance = xmlDoc.getElementsByTagName('distance')[0].textContent;
+      const duration = xmlDoc.getElementsByTagName('duration')[0].textContent;
+      const parameters = xmlDoc.getElementsByTagName('parameters')[0].textContent;
+      console.log(parameters);
+      const coordinates = routelatlon
+        .split(';') // 按分号分割为单个坐标点
+        .filter(Boolean) // 过滤空字符串（如末尾分号）
+        .map((pair) => {
+          const [lng, lat] = pair.split(',').map(Number); // 按逗号分割为经纬度
+          return [lng, lat]; // 返回二维数组格式
+        });
+      routeData.value.push({
+        duration: formatDate(Number(duration)),
+        distance: Number(distance).toFixed(3),
+        coordinates: coordinates,
+        strategy: ststrategy[i]
       });
-      routeData.value = data.route.paths;
       // 默认展示第一条
-      drawRoute(routeData.value[0], 0);
-    } else {
-      routeData.value = [];
+      if (i === 0) {
+        drawRoute(routeData.value[0], 0);
+      }
     }
   }
 };
 const drawRoute = (route, index) => {
   selectIndex.value = index;
-  const path = parseRouteToPath(route);
+  const path = route.coordinates;
   clearLine();
   if (mapStore.isAMap) {
     const icon1 = new AMap.Icon({
@@ -372,25 +398,6 @@ const drawRoute = (route, index) => {
     source.addFeature(endMarker);
   }
 };
-
-// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
-// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
-const parseRouteToPath = (route) => {
-  var path = [];
-
-  for (var i = 0, l = route.steps.length; i < l; i++) {
-    var step = route.steps[i];
-
-    // 按分号分割字符串，得到一个包含经纬度对的数组
-    const coordinatesPairs = step.polyline.split(';');
-    // 将每个经纬度对进一步分割成经度和纬度，并转换为一个对象
-    path = coordinatesPairs.map((pair) => {
-      const [longitude, latitude] = pair.split(',');
-      return gcoord.transform([longitude, latitude], gcoord.GCJ02, gcoord.WGS84);
-    });
-  }
-  return path;
-};
 function formatDate(seconds: number) {
   // 将秒数转换为BigNumber
   const secondsBn = new BigNumber(seconds);
@@ -551,6 +558,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clearMarker();
+  clearLine();
 });
 </script>
 

src/views/globalMap/index.vue

@@ -232,6 +232,7 @@ const toAddress = (item) => {
 let showDrawTools = ref(false);
 // 点击菜单
 const clickMenu = (item, dataList) => {
+  debugger
   if (item.path === '1') {
     // 空间分析
     if (item.component === 'spatial') {
@@ -293,7 +294,7 @@ const handleHideCommunicationSupport = () => {
 const findChecked = (dataList, name) => {
   let index = 0;
   dataList.forEach((item) => {
-    if (item.name !== name && !item.isVideo && item.path === '2' && !!item.checked) {
+    if (!['易涝隐患点', '省政务无人机', '铁塔运行监测', '通讯保障', '救援队伍', '重点车辆'].includes(item.name) && item.name !== name && !item.isVideo && item.path === '2' && !!item.checked) {
       index++;
     }
     if (item.children && item.children.length > 0) {