【类 型】：feat 飞机跟随地图控件

【原  因】：点击跟随飞机  拖拽地图取消跟随
【过  程】：
【影  响】：

src/components/MapBox.vue

@@ -6,6 +6,7 @@
 
 <script>
 import mapboxgl from 'mapbox-gl'
+import { FollowControl, CustomFullscreenControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
 
 export default {
@@ -170,26 +171,25 @@ export default {
       this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
       // 地图比例
       // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
-      // 全屏
+      // 全屏 并再之后 刷新地图
       this.map.addControl(new CustomFullscreenControl(this.handleResize), 'top-right')
-      // 跟随飞机
-      // this.map.addControl(
-      //   new mapboxgl.GeolocateControl({
-      //     positionOptions: {
-      //       enableHighAccuracy: true
-      //     },
-      //     trackUserLocation: true,
-      //     showUserHeading: true
-      //   }), 'top-right'
-      // )
-      const customControl = new CustomControl({
-        label: '点',
+
+      //
+      // this.map.addControl(new MapboxStyleSwitcherControl())
+      // 飞机跟随
+      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
-          this.goto({ lng: 20, lat: 30 })// 跳转到飞机位置
+        },
+        onDrag: (isDragging) => {
+          // 拖拽过程中实时更新 isflow 状态
+          if (isDragging) {
+            this.isflow = false // 在拖拽时将 isflow 设置为 false
+          }
         }
-      })
-      this.map.addControl(customControl, 'top-right')
+      }), 'top-right')
     },
     /**
      * @description: 清除地图上的航线
@@ -575,43 +575,6 @@ export default {
     }
   },
   watch: {
-    isflow (val) {
-      console.log(val)
-    }
-  }
-}
-class CustomControl {
-  constructor ({ label, onClick }) {
-    this._label = label
-    this._onClick = onClick
-  }
-
-  onAdd (map) {
-    this._map = map
-    this._container = document.createElement('div')
-    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
-    this._button = document.createElement('button')
-    this._button.textContent = this._label
-    this._button.onclick = this._onClick
-    this._container.appendChild(this._button)
-    return this._container
-  }
-
-  onRemove () {
-    this._container.parentNode.removeChild(this._container)
-    this._map = undefined
-  }
-}
-
-class CustomFullscreenControl extends mapboxgl.FullscreenControl {
-  constructor (handleResize) {
-    super()
-    this.handleResize = handleResize
-  }
-
-  _onClickFullscreen () {
-    super._onClickFullscreen() // 调用原始的全屏切换行为
-    this.handleResize() // 调用自定义的 handleResize 方法
   }
 }
 
@@ -628,4 +591,5 @@ class CustomFullscreenControl extends mapboxgl.FullscreenControl {
   background-size: cover;
   cursor: pointer;
 }
+
 </style>

src/components/PlaneStatus.vue

@@ -129,8 +129,8 @@ export default {
 
 .mainBox {
   position: absolute;
-  top: 12px;
-  left: 12px;
+  top: 40px;
+  left: 10px;
   z-index: 90;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
   border-radius: 4px;

src/styles/index.scss

@@ -120,6 +120,10 @@ label {
   display: none !important;
 }
 
+.mapboxgl-ctrl-top-right {
+  top: 30px !important;
+}
+
 
 //public
 .borderLN {
@@ -148,6 +152,22 @@ label {
   border: 1px solid #DCDFE6;
 }
 
+.brandFontColor {
+  color: $brand-color !important;
+}
+
+.successFontColor {
+  color: $success-color !important;
+}
+
+.warningFontColor {
+  color: $warning-color !important;
+}
+
+.dangerFontColor {
+  color: $danger-color !important;
+}
+
 .mainFontColor {
   color: #303133 !important;
 }

src/styles/myIcon.scss

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

src/utils/mapboxgl_plugs/index.js

@@ -0,0 +1,91 @@
+import mapboxgl from 'mapbox-gl'
+
+// 飞机跟随控件
+export class FollowControl {
+  constructor ({ defaultIconClass, activeIconClass, onClick, onDrag }) {
+    this._defaultIconClass = defaultIconClass // 默认图标 CSS 类名
+    this._activeIconClass = activeIconClass // 激活时的图标 CSS 类名
+    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'
+
+    this._button = document.createElement('button')
+    this._button.className = this._defaultIconClass // 初始化时使用默认图标
+    this._button.onclick = this._handleClick.bind(this) // 绑定点击事件处理函数
+
+    this._container.appendChild(this._button)
+
+    // 监听拖拽事件
+    this._map.on('movestart', this._startDrag.bind(this))
+    this._map.on('moveend', this._stopDrag.bind(this))
+
+    return this._container
+  }
+
+  _handleClick () {
+    // 只有在不拖拽的情况下才切换状态
+    if (!this._isDragging) {
+      this._isActive = !this._isActive
+      this._button.className = this._isActive
+        ? this._activeIconClass
+        : 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) // 拖拽结束
+      }
+    }
+  }
+
+  onRemove () {
+    this._map.off('movestart', this._startDrag.bind(this))
+    this._map.off('moveend', this._stopDrag.bind(this))
+    this._container.parentNode.removeChild(this._container)
+    this._map = undefined
+  }
+}
+
+// 全屏控制控件 ps:官方全屏子类 添加一个回调
+export class CustomFullscreenControl extends mapboxgl.FullscreenControl {
+  constructor (handleResize) {
+    super()
+    this.handleResize = handleResize
+  }
+
+  _onClickFullscreen () {
+    super._onClickFullscreen() // 调用原始的全屏切换行为
+    this.handleResize() // 调用自定义的 handleResize 方法
+  }
+}