maptalks结合gsap添加具有高度的marker,并添加上下移动动画

由于当前版本的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