update

src/page/index/components/PageMap/PageMap.vue

@@ -5,6 +5,7 @@ import { GaodeMap, LineLayer, PointLayer, Scene } from '@antv/l7';
 import { handleGetServerpartList, handleGetServerPartListJava } from '../../service';
 // @ts-ignore
 import yunNanData from '../../../../options/anhuiLine.js'
+import YNHighWayLine from '../../../../options/YNHighWayLine.js'
 
 // 地图实例
 const scene = ref<any>();
@@ -75,9 +76,28 @@ onMounted(async () => {
     // 画出省份边界图
     handleGetAnHuiBoundary()
 
+    // 画出高速公路的线段
+    handleGetExpressway()
+
     hoverPoint.value = handlePointHover();
 })
 
+// 画出高速公路的线段
+const handleGetExpressway = async () => {
+    const higeWayLin = new LineLayer();
+    higeWayLin.name = "higeWayLin";
+    // 边界线数据
+    let list: any = YNHighWayLine
+    higeWayLin.source(list).size(1).style({
+        opacity: 1,
+        sourceColor: "#ebaf60",
+        targetColor: "#ebaf60",
+        linearDir: "horizontal",
+    });
+    scene.value.addLayer(higeWayLin);
+}
+
+
 // 拿到服务区数据
 const handleGetServiceList = async () => {
     const req: any = {
@@ -201,7 +221,7 @@ const handleAllServiceMarkedPoint = async () => {
     scene.value.addLayer(pointLayer);
 }
 
-// 标出安徽省的边界
+// 标出云南省的边界
 const handleGetAnHuiBoundary = () => {
     const blurLine = new LineLayer();
     blurLine.name = "blurLine";
@@ -375,6 +395,9 @@ const emit = defineEmits<{
 
 <template>
     <div class="PageMapBox" style="position: relative;">
-        <div class="mapContent" id="map"></div>
+        <div class="mapContent" id="map">
+
+
+        </div>
     </div>
 </template>

src/page/index/index.vue

@@ -467,6 +467,43 @@ const handleStopPrint = () => {
 
 }
 
+const handleGetHighWayData = async () => {
+    const origin = "101.52942,21.467193"; // 出发点
+    const destination = "101.284056,21.706735"; // 目的地
+    const strategy = "20"; // 驾车策略
+    const extensions = "all"; // 返回完整信息
+    const key = "6e96a801bcea5290d3dcbf100358a6b3"; // 替换成你的key
+
+    const url = `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&strategy=${strategy}&extensions=${extensions}&output=json&key=${key}`;
+
+    try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
+        const data = await res.json();
+
+        // 获取所有轨迹点并转为二维数组
+        const paths = data.route?.paths?.[0]?.steps || [];
+        const coords: number[][] = [];
+
+        paths.forEach(step => {
+            if (step.polyline) {
+                const points = step.polyline.split(";").map(p => {
+                    const [lng, lat] = p.split(",").map(Number);
+                    return [lng, lat];
+                });
+                coords.push(...points);
+            }
+        });
+
+        console.log("二维数组坐标：", coords);
+        return coords;
+    } catch (err) {
+        console.error("请求出错：", err);
+        return [];
+    }
+};
+
+
 </script>
 
 <template>
@@ -529,6 +566,8 @@ const handleStopPrint = () => {
                     style="position: relative;z-index: 9;" />
 
                 <div v-show="selectPageTab === 1 && !showDialogBox">
+
+
                     <!-- 地图 -->
                     <PageMap @handleGetCurrentService="handleGetCurrentService" :noticeMessageObj="noticeMessageObj"
                         :selectPointServicePart="noticeAllServicePartId" :mapClickComeForm="mapClickComeForm"
@@ -537,6 +576,7 @@ const handleStopPrint = () => {
 
                     <div class="AreaLegend">
                         <div class="AreaLegendContent">
+                            <!-- <span style="font-size: 60px;color: #fff;" @click="handleGetHighWayData">拿数据</span> -->
                             <!-- 图例组件 -->
                             <AreaLegend :mapLegend="mapLegend" />
                         </div>