视角控制
视角控制就是控制地图的相机，主要包含：
- 中心点center
- 缩放层级zoom
- 倾斜角度pitch
- 旋转角度bearing
maptalks针对这些属性都提供了对应的get和set方法,也提供了最通用的方法setView, center,zoom,pitch,bearing等改变底层也是调用了该方法
js
map.setView({
center: [116.3998677, 39.90823064],
zoom: 16.43104055693826,
pitch: 34.050000000000054,
bearing: -25.500000000000114,
});视角怎样动画？
地图里提供了
- animateTo
- flyTo
- fitExtent
- setZoom
等方法来动画地图视角
WARNING
注意当连续调用这些动画方法时，之前的动画会被停止，所以当你需要不断的调用这些方法时，要么关闭动画，要么在 动画结束时再开启下一个动画
js
//关闭动画
map.fitExtent(polygon.getExtent(), 0, { animation: false });
map.setZoom(15);
//动画结束后再调用另一个动画
map.fitExtent(polygon.getExtent(), 0, { animation: true }, (frame) => {
if (frame.state.playState === "finished") {
map.setZoom(15);
}
});js
map.animateTo(
view2,
{
duration: 3000,
},
(frame) => {},
);怎样多个动画串起来(chain)
地图的每个动画帧结束时都有个状态标志,所以只要等当前的动画播放结束,再开始下一个即可直到最后一个
js
map.animateTo(
view2,
{
duration: 3000,
},
(frame) => {
if (frame.state.playState === "finished") {
}
},
);如果你觉得maptalks里提供的动画功能不够强大，也可以是使用一些专业的动画库,在动画的过程中不断设置地图的视角即可
js
// 这里使用第三方的 anime
map.setView(view);
const origin = { ...view2 };
const targets = {
...view,
};
anime(
Object.assign(
{},
{
targets: targets,
duration: 5000,
easing: "linear",
complete: (anim) => {},
update: () => {
const { zoom, pitch, bearing } = targets;
map.setView({ zoom, pitch, bearing });
},
},
origin,
),
);