地球自转效果实现
1. 使用ease to动画库实现地球自转效果
需求：点击地球，实现自转：
// 地球实现自转 easeTo()
function spinGlobe() {
const center = map.getCenter();
center.lng += 1;
map.easeTo({
center,
duration: 2000,
});
}
spinGlobe();
此时的效果：
我们发现，地球转一下就停了，是什么原因呢？
因为我们只执行了一次spinglobe，这时经度变化只变化一点。
如果要持续自转应该怎么做呢？
2. 通过改变地球的经度线来实现自转效果。
引入moveend事件：
map.on("moveend", () => {
spinGlobe();
});
看下效果：
这时大家可能发现，自转一顿一顿的，不连贯，那么我们可以通过调整动画曲线参数使自转效果更加平滑和连贯。
easing: (e) => e,
看下最后的效果：
3.地图拖动功能
我们可以通过地球拖动功能进一步优化。
例如，假设有这样一个场景，我想看某一个区域的一些具体的内容，通过鼠标拖动地球，你会发现拖动后它还在转。我要往它往左边拖，但是它要往右边转。
这个问题应该怎么解决？
我们需要在这里设置让拖拽的时候自转停止，引入dragstart事件。
map.on("dragstart", () => {
console.log("dragstart");
isSpinning = false;
});
如何再让它继续转起来？
这里继续绑定一个双击事件：
map.on("dblclick", () => {
isSpinning = true;
spinGlobe();
});
点击事件
接下来在mapbox中绑定地图点击事件，并获取及修改图层样式。
通过set paint property方法，可以修改图层的绘制属性，如填充颜色。
此外，还介绍如何通过设置pitch和bearing实现地图的三维效果，包括仰角、俯角及旋转。
通过按钮绑定事件，可以动态调整这些参数，增强地图的交互性和视觉效果。
添加事件按钮：
<html lang="en">
<head>
</head>
<body>
<div id="map"></div>
<select id="select">
<option value="standard">standard</option>
<option value="streets-v12">streets-v12</option>
<option value="dark-v11">dark-v11</option>
<option value="navigation-day-v1">navigation-day-v1</option>
</select>
<div class="btns">
<button>pitch</button>
<button>bearing</button>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
给按钮添加属性：
map.on("click", function () {
const layer = map.getStyle().layers[0];
// map.setPaintProperty("my-tiles", "fill-color", "#faaee");
// const style = map.getPaintProperty("my-tiles", "fill-color");
// console.log(layer);
});
const btns = document.querySelectorAll(".btns-button");
const btn1 = btns[0];
const btn2 = btns[1];
btn1.onclick = function () {
let pitch = map.getPitch();
pitch += 5;
map.setPitch(pitch);
};
btn2.onclick = function () {
let bearing = map.getBearing();
bearing += 5;
map.setBearing(bearing);
};
点击按钮可实现仰角和旋转切换
fly to飞行动画
// 点击后视图动画效果飞行到北京
btn3.onclick = function () {
map.flyTo({
// 北京经纬度
center: [116.46, 39.92],
zoom: 10,
pitch: 30,
// speed 0-1 值越大 速度越快
speed: 0.5
});
};
ease to过渡动画
添加按钮：
<html lang="en">
<head>
</head>
<body>
<div id="map"></div>
<select id="select">
<option value="standard">standard</option>
<option value="streets-v12">streets-v12</option>
<option value="dark-v11">dark-v11</option>
<option value="navigation-day-v1">navigation-day-v1</option>
</select>
<div class="btns">
<button>pitch</button>
<button>bearing</button>
<button>飞行到北京</button>
<button>直接到北京</button>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
给按钮添加属性：
btn4.onclick = function () {
map.easeTo({
center: [116.46, 39.92],
zoom: 10,
duration: 2000,
});
};