由于当前版本的maptalks(rc17)尚不支持对marker高度的动态修改,所以结合map源码魔改出了这个方案
还有一种方案是使用maptalks.three来生成文字悬浮效果,但是那种方法出来的效果不是很清晰
1.引入模块
import { Map, VectorLayer, Marker, Geometry, MultiPolygon } from 'maptalks'
import gsap from 'gsap'
2.初始化图层并添加点
const pointWithAltitudeLayer = new VectorLayer('vectorWithAltitude',null,{
enableAltitude: true,
altitudeProperty: 'altitude'
})
pointWithAltitudeLayer.addTo(map)
const popupIcon = require('../../../assets/images/markers/tips.png')
const highPoint = new Marker([x, y], {
id: 'highPoint_' + 1,
properties: {
type: 'flyPoint',
name: 'flyPoint_' + 1,
altitude : 200 // 设置高度200
},
symbol: {
'markerFile': popupIcon, // 这里是图片的路径,具体可参考maptalks API文档来自定义,可添加图片以及文字
'markerWidth': 150, // marker的宽度和高度需要根据图片来调试
'markerHeight': 50,
'markerDx': 0,
'markerDy': 0,
'markerOpacity': 1
}
})
highPoint.addTo(pointWithAltitudeLayer)
3.为marker添加动画
// 添加悬浮动画
addAnimation(map,highPoint)
const addAnimation = (map, marker) => {
const properties = marker.getProperties()
//调用gsap来改变marker的altitude
gsap.to(marker.properties, {
altitude: 120, // 上下移动
duration: 2, // 2s
repeat: -1, // 无限重复
yoyo: true, // 添加往返执行
onUpdate: ()=> { // altitude更新时调用,,
// marker.setProperties(properties) //无效
//通过动画改变altitude属性,无法实时更新marker的高度,只有在移动,缩放,拖拽地图时才能看到效果,所以这里每次更新时,手动调用map的私有方法
},
})
}
desktop 2023-01-16 11-04-23