从前端框架到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,
  });
};

如有收获，点个赞吧！

持续更新webgis开发相关技术/面试/就业内容

关注我学习webgis开发不迷路👇👇👇