【类 型】：fix 飞机跟随 bug
【原 因】：飞机会地图上跳动 相当于模拟 拖拽地图的动作 会导致取跟随 按钮的跟随 【过 程】：1改为点击地图触发取消跟随 2还改了点击跟随按钮 直接跳转到飞机位置 不用等飞机更新位置被动跳转 【影 响】：
This commit is contained in:
tk
parent
bf35c16108
commit
9667b718b5
@ -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')
|
||||
|
||||
@ -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阿里巴巴
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user