From 0c5a666b12feb56beaa06e9fdd65534044ead899 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Tue, 25 Jun 2024 19:43:35 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=09=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E4=B8=BB=09=E9=A2=98=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=20=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=20=E3=80=90=E6=8F=8F=09=E8=BF=B0=E3=80=91=EF=BC=9A=20?=
 =?UTF-8?q?=09[=E5=8E=9F=E5=9B=A0]=EF=BC=9A=E6=B7=BB=E5=8A=A0=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=89=E6=96=B9=20=E9=AB=98=E5=BE=B7=20=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=20=09[=E8=BF=87=E7=A8=8B]=EF=BC=9A=20=09[?=
 =?UTF-8?q?=E5=BD=B1=E5=93=8D]=EF=BC=9A=20=E3=80=90=E7=BB=93=09=E6=9D=9F?=
 =?UTF-8?q?=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/components/MapBox.vue | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 92609c7..bc17850 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -17,7 +17,8 @@ export default {
       lngLats: [], // 航线 所有航点
       wayLngLats: [], // 航线 不包括起点航点
       takeoffLngLats: [], // 航线 第一个航点 起点 最后一个航点
-      GoogleRasterStyle: {
+      // 地图样式
+      GoogleRasterStyle: { // mapbox官方样式 卫星地图
         name: 'Mapbox Streets',
         sprite: this.$store.state.settings.host + '/Public/map/sprite',
         glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@@ -31,8 +32,36 @@ export default {
         },
         layers: [{ id: 'GoogleRasterLayer', type: 'raster', source: 'google' }]
       },
-      MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12',
-      MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12'
+      MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', // mapbox官方样式 矢量街道
+      MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12', // mapbox官方样式 卫星街道
+      GaodeVectorStyle: { // 第三方 高德矢量
+        name: 'Gaode Vector',
+        sprite: this.$store.state.settings.host + '/Public/map/sprite',
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        version: 8,
+        sources: {
+          gaode: {
+            type: 'raster',
+            tileSize: 256, // 瓦片大小 256 512像素
+            tiles: ['http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}']
+          }
+        },
+        layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }]
+      },
+      GaodeRasterStyle: { // 第三方 高德卫星
+        name: 'Gaode Raster',
+        sprite: this.$store.state.settings.host + '/Public/map/sprite',
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        version: 8,
+        sources: {
+          gaode: {
+            type: 'raster',
+            tileSize: 256, // 瓦片大小 256 512像素
+            tiles: ['https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}']
+          }
+        },
+        layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }]
+      }
     }
   },
   computed: {
@@ -73,7 +102,7 @@ export default {
         //     'line-width': 1 // 设置等高线宽度
         //   }
         // })
-        // 3纬度
+        // 3D地图
         // this.map.addSource('mapbox-dem', {
         //   type: 'raster-dem',
         //   url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
@@ -117,7 +146,7 @@ export default {
       // 实例化map
       this.map = new mapboxgl.Map({
         container: 'map',
-        style: this.GoogleRasterStyle,
+        style: this.GaodeRasterStyle,
         center: this.defaultLnglat,
         zoom: this.defaultZoom,
         pitch: 0,