从前端框架到GIS开发系列课程（26）在mapbox中实现地球自转效果，并添加点击事件增强地图交互性
地球自转效果实现
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,});
};