From 9667b718b584878649cf24b5fca3ab792ca7c486 Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Thu, 25 Jul 2024 19:59:01 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afix=20=E9=A3=9E=E6=9C=BA=E8=B7=9F=E9=9A=8F=20bug=20?=
 =?UTF-8?q?=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91=EF=BC=9A=E9=A3=9E?=
 =?UTF-8?q?=E6=9C=BA=E4=BC=9A=E5=9C=B0=E5=9B=BE=E4=B8=8A=E8=B7=B3=E5=8A=A8?=
 =?UTF-8?q?=20=E7=9B=B8=E5=BD=93=E4=BA=8E=E6=A8=A1=E6=8B=9F=20=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E5=9C=B0=E5=9B=BE=E7=9A=84=E5=8A=A8=E4=BD=9C=20?=
 =?UTF-8?q?=E4=BC=9A=E5=AF=BC=E8=87=B4=E5=8F=96=E8=B7=9F=E9=9A=8F=20?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=9A=84=E8=B7=9F=E9=9A=8F=20=E3=80=90?=
 =?UTF-8?q?=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A1=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=9C=B0=E5=9B=BE=E8=A7=A6=E5=8F=91=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E8=B7=9F=E9=9A=8F=20=202=E8=BF=98=E6=94=B9=E4=BA=86?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=B7=9F=E9=9A=8F=E6=8C=89=E9=92=AE=20?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E8=B7=B3=E8=BD=AC=E5=88=B0=E9=A3=9E=E6=9C=BA?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=20=E4=B8=8D=E7=94=A8=E7=AD=89=E9=A3=9E?=
 =?UTF-8?q?=E6=9C=BA=E6=9B=B4=E6=96=B0=E4=BD=8D=E7=BD=AE=E8=A2=AB=E5=8A=A8?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MapBox.vue         |  30 +++++---
 src/styles/myIcon.scss            |   2 +-
 src/utils/mapboxgl_plugs/index.js | 123 +++++++++++++++++++-----------
 3 files changed, 98 insertions(+), 57 deletions(-)

diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 7dd4bdc..b6673e8 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -6,7 +6,7 @@
 
 <script>
 import mapboxgl from 'mapbox-gl'
-import { FollowControl, CustomFullscreenControl } from '@/utils/mapboxgl_plugs'
+import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
 
 export default {
@@ -174,19 +174,25 @@ export default {
       // 全屏 并再之后 刷新地图
       this.map.addControl(new CustomFullscreenControl(this.handleResize), 'top-right')
 
-      //
-      // this.map.addControl(new MapboxStyleSwitcherControl())
+      // 地图样式选择
+      // 默认样式（可以根据需要修改或添加更多样式）
+      MapboxStyleSwitcherControl.DEFAULT_STYLES = [
+        { title: '谷歌卫星', uri: 'mapbox://styles/mapbox/streets-v11' },
+        { title: '高德卫星', uri: 'mapbox://styles/mapbox/satellite-v9' }
+        // 你可以添加更多样式
+      ]
+      // 地图样式选择控件
+      const styleSwitcherControl = new MapboxStyleSwitcherControl([], 'iconfont icon-duozhang f-s-20')
+      this.map.addControl(styleSwitcherControl, 'top-right')
+
       // 飞机跟随
       this.map.addControl(new FollowControl({
-        defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标（拖拽时显示）
-        activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标（点击后显示）
-        onClick: () => {
-          this.isflow = !this.isflow
-        },
-        onDrag: (isDragging) => {
-          // 拖拽过程中实时更新 isflow 状态
-          if (isDragging) {
-            this.isflow = false // 在拖拽时将 isflow 设置为 false
+        defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标
+        activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标
+        onClick: (isActive) => {
+          this.isflow = isActive // 根据控件的状态更新 isflow
+          if (this.isflow) {
+            this.goto(this.planes[0].getLngLat()) // 点击按钮首先直接 跳转到当前飞机对象最后的经纬度
           }
         }
       }), 'top-right')
diff --git a/src/styles/myIcon.scss b/src/styles/myIcon.scss
index 98914f8..4a4718a 100644
--- a/src/styles/myIcon.scss
+++ b/src/styles/myIcon.scss
@@ -1 +1 @@
-@import 'https://at.alicdn.com/t/c/font_3703467_x6t410w942e.css'; //iconfont阿里巴巴
\ No newline at end of file
+@import 'https://at.alicdn.com/t/c/font_3703467_of0zmsrmpvg.css'; //iconfont阿里巴巴
\ No newline at end of file
diff --git a/src/utils/mapboxgl_plugs/index.js b/src/utils/mapboxgl_plugs/index.js
index 5fb92ba..228e441 100644
--- a/src/utils/mapboxgl_plugs/index.js
+++ b/src/utils/mapboxgl_plugs/index.js
@@ -1,19 +1,72 @@
 import mapboxgl from 'mapbox-gl'
 
+export class MapboxStyleSwitcherControl {
+  constructor (styles = [], defaultIconClass = '') {
+    this.styles = styles.length ? styles : MapboxStyleSwitcherControl.DEFAULT_STYLES
+    this.defaultIconClass = defaultIconClass // 用于设置自定义图标的类名
+    this.controlContainer = null
+    this.map = null
+    this.styleButton = null
+    this.styleDropdown = null
+  }
+
+  onAdd (map) {
+    this.map = map
+
+    this.controlContainer = document.createElement('div')
+    this.controlContainer.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+
+    this.styleButton = document.createElement('button')
+    this.styleButton.className = this.defaultIconClass || 'style-switcher-button' // 如果提供了自定义类名，则使用它
+    this.styleButton.onclick = this._toggleDropdown.bind(this)
+
+    this.styleDropdown = document.createElement('div')
+    this.styleDropdown.className = 'style-dropdown'
+    this.styleDropdown.style.display = 'none'
+    this.styles.forEach(style => {
+      const styleOption = document.createElement('div')
+      styleOption.className = 'style-option'
+      styleOption.innerHTML = style.title
+      styleOption.onclick = () => this._changeStyle(style.uri)
+      this.styleDropdown.appendChild(styleOption)
+    })
+
+    this.controlContainer.appendChild(this.styleButton)
+    this.controlContainer.appendChild(this.styleDropdown)
+
+    return this.controlContainer
+  }
+
+  onRemove () {
+    this.controlContainer.parentNode.removeChild(this.controlContainer)
+    this.map = null
+  }
+
+  _toggleDropdown () {
+    if (this.styleDropdown.style.display === 'none') {
+      this.styleDropdown.style.display = 'block'
+    } else {
+      this.styleDropdown.style.display = 'none'
+    }
+  }
+
+  _changeStyle (styleURI) {
+    this.map.setStyle(styleURI)
+    this.styleDropdown.style.display = 'none'
+  }
+}
+
 // 飞机跟随控件
 export class FollowControl {
-  constructor ({ defaultIconClass, activeIconClass, onClick, onDrag }) {
-    this._defaultIconClass = defaultIconClass // 默认图标 CSS 类名
-    this._activeIconClass = activeIconClass // 激活时的图标 CSS 类名
-    this._onClick = onClick // 按钮点击事件的回调函数
-    this._onDrag = onDrag // 拖拽事件的回调函数
+  constructor ({ defaultIconClass, activeIconClass, onClick }) {
+    this._defaultIconClass = defaultIconClass
+    this._activeIconClass = activeIconClass
+    this._onClick = onClick
     this._isActive = false // 控件是否激活的状态
-    this._isDragging = false // 标记是否正在拖拽
   }
 
   onAdd (map) {
     this._map = map
-
     this._container = document.createElement('div')
     this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
 
@@ -23,55 +76,37 @@ export class FollowControl {
 
     this._container.appendChild(this._button)
 
-    // 监听拖拽事件
-    this._map.on('movestart', this._startDrag.bind(this))
-    this._map.on('moveend', this._stopDrag.bind(this))
+    // 监听地图 mousedown 事件
+    this._map.on('mousedown', this._handleMapMouseDown.bind(this))
 
     return this._container
   }
 
   _handleClick () {
-    // 只有在不拖拽的情况下才切换状态
-    if (!this._isDragging) {
-      this._isActive = !this._isActive
-      this._button.className = this._isActive
-        ? this._activeIconClass
-        : this._defaultIconClass
+    this._isActive = !this._isActive
+    this._button.className = this._isActive
+      ? this._activeIconClass
+      : this._defaultIconClass
+
+    // 执行传入的点击回调函数
+    if (this._onClick) {
+      this._onClick(this._isActive) // 传递控件的当前激活状态
+    }
+  }
+
+  _handleMapMouseDown () {
+    if (this._isActive) {
+      this._isActive = false
+      this._button.className = this._defaultIconClass
 
-      // 执行传入的点击回调函数
       if (this._onClick) {
-        this._onClick()
-      }
-    }
-  }
-
-  _startDrag () {
-    this._isDragging = true
-    // 拖拽时强制将状态设置为 false
-    this._isActive = false
-    this._button.className = this._defaultIconClass // 显示默认图标
-    if (this._onDrag) {
-      this._onDrag(true) // 拖拽开始
-    }
-  }
-
-  _stopDrag () {
-    if (this._isDragging) {
-      this._isDragging = false
-      // 拖拽结束后，如果之前是 active 状态，则恢复为 active 状态
-      this._button.className = this._isActive
-        ? this._activeIconClass
-        : this._defaultIconClass
-
-      if (this._onDrag) {
-        this._onDrag(false) // 拖拽结束
+        this._onClick(false) // 停止跟随
       }
     }
   }
 
   onRemove () {
-    this._map.off('movestart', this._startDrag.bind(this))
-    this._map.off('moveend', this._stopDrag.bind(this))
+    this._map.off('mousedown', this._handleMapMouseDown.bind(this))
     this._container.parentNode.removeChild(this._container)
     this._map = undefined
   }