【类 型】：fix 飞机跟随 bug

【原  因】：飞机会地图上跳动 相当于模拟 拖拽地图的动作 会导致取跟随 按钮的跟随
【过  程】：1改为点击地图触发取消跟随  2还改了点击跟随按钮 直接跳转到飞机位置 不用等飞机更新位置被动跳转
【影  响】：

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', // 默认图标（拖拽时显示）
+        defaultIconClass: 'iconfont icon-weidingwei f-s-20', // 默认图标
-        activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标（点击后显示）
+        activeIconClass: 'iconfont icon-dingwei f-s-20 brandFontColor', // 激活时图标
-        onClick: () => {
+        onClick: (isActive) => {
-          this.isflow = !this.isflow
+          this.isflow = isActive // 根据控件的状态更新 isflow
-        },
+          if (this.isflow) {
-        onDrag: (isDragging) => {
+            this.goto(this.planes[0].getLngLat()) // 点击按钮首先直接 跳转到当前飞机对象最后的经纬度
-          // 拖拽过程中实时更新 isflow 状态
-          if (isDragging) {
-            this.isflow = false // 在拖拽时将 isflow 设置为 false
           }
         }
       }), 'top-right')

src/styles/myIcon.scss

@@ -1 +1 @@
-@import 'https://at.alicdn.com/t/c/font_3703467_x6t410w942e.css'; //iconfont阿里巴巴
+@import 'https://at.alicdn.com/t/c/font_3703467_of0zmsrmpvg.css'; //iconfont阿里巴巴

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 }) {
+  constructor ({ defaultIconClass, activeIconClass, onClick }) {
-    this._defaultIconClass = defaultIconClass // 默认图标 CSS 类名
+    this._defaultIconClass = defaultIconClass
-    this._activeIconClass = activeIconClass // 激活时的图标 CSS 类名
+    this._activeIconClass = activeIconClass
-    this._onClick = onClick // 按钮点击事件的回调函数
+    this._onClick = onClick
-    this._onDrag = onDrag // 拖拽事件的回调函数
     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)
 
-    // 监听拖拽事件
+    // 监听地图 mousedown 事件
-    this._map.on('movestart', this._startDrag.bind(this))
+    this._map.on('mousedown', this._handleMapMouseDown.bind(this))
-    this._map.on('moveend', this._stopDrag.bind(this))
 
     return this._container
   }
 
   _handleClick () {
-    // 只有在不拖拽的情况下才切换状态
+    this._isActive = !this._isActive
-    if (!this._isDragging) {
+    this._button.className = this._isActive
-      this._isActive = !this._isActive
+      ? this._activeIconClass
-      this._button.className = this._isActive
+      : this._defaultIconClass
-        ? 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()
+        this._onClick(false) // 停止跟随
-      }
-    }
-  }
-
-  _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) // 拖拽结束
       }
     }
   }
 
   onRemove () {
-    this._map.off('movestart', this._startDrag.bind(this))
+    this._map.off('mousedown', this._handleMapMouseDown.bind(this))
-    this._map.off('moveend', this._stopDrag.bind(this))
     this._container.parentNode.removeChild(this._container)
     this._map = undefined
   }