Mapbox 相关知识点

发表于 更新于 分类于 本文字数： 128 阅读时长 ≈ 1 分钟

1. 表达式设置属性默认值

1
2
3
paint: {
  "text-color": ["coalesce", ["get", "text-color"], "#348238"],
}

如果存在 text-color 的值则使用 text-color，否则取 #348238

2. easyTo 平滑移动页面

1
2
3
4
5
6
mapSDK.map.easeTo({
  padding: {
    right: 1000, // 右边留 1000px 距离
  },
  duration: 1000, // 持续时间
});

3. flyTo 监听结束状态

方式 1: 通过 easing 回调

1
2
3
4
5
6
7
mapSDK.map.flyTo({
  center: xxx,
  easing: t => {
    if (t === 1) console.log('到达终点, 动画结束')
    return t
  }
})

方式 2: 通过自定义事件数据

1
2
3
4
5
6
7
8
9
10
11
mapSDK.map.on('moveend', (e) => {
  if (e.moveend === 'flyend') {
	console.log('moveend')
  }
})

mapSDK.on('click', (e: any) => {
	mapSDK.map.flyTo({
	  center: e.coordinates,
	}, { moveend: 'flyend' });
}