Mapbox 入门 -- 模拟飞行效果 Slowly fly t

DEMO :https://mercurywang.github.io/demos/mapbox.html

1. 注册

SignIn.png

这个是登录界面，需要点击下面的 Sign up 注册。

登录之后会生成一个 access token

token.png

写这篇文章的时候才发现原来一个自然月 30 天，超过 50000 次调用要收费的 😲。谁让你有世界地图呢，省着点用吧。

pricing.png

2.新建 HTML 文件

添加如下引用：

<script src="https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css" rel="stylesheet"/>

一个地图的容器：

<div id="map"></div>

样式：

#map {
   width: 100%;
   height: 100%;
   position: relative;
}

添加 js 代码：

mapboxgl.accessToken = "your token";

//这里是个坐标[经度, 纬度]
      const start = [12.4, 55.7];
      let map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: start,
        zoom: 1
      });

这样打开就能看见满屏的世界地图了

map.png

然后把上面参数中的 zoom 改为 9，添加了城市按钮样式后：

<style>
.cities {
        width: 100px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 1000;
        height: 30px;
      }
      .btn {
        margin-bottom: 5px;
        width: 120px;
      }
      .btn-light {
        background: rebeccapurple;
        color: #fff;
      }
</style>
<div class="cities">
      <button type="button" class="btn btn-primary" onclick="copenhagen()">
        Copenhagen
      </button>
      <button type="button" class="btn btn-danger" onclick="malmo()">
        Malmo
      </button>
      <button type="button" class="btn btn-success" onclick="berlin()">
        Berlin
      </button>
      <button type="button" class="btn btn-secondary" onclick="shenyang()">
        Shenyang
      </button>
      <button type="button" class="btn btn-warning" onclick="beijing()">
        Beijing
      </button>
      <button type="button" class="btn btn-info" onclick="hongkong()">
        Hongkong
      </button>
      <button type="button" class="btn btn-light" onclick="future()">
        Australia
      </button>
    </div>

效果图

2.png

添加一个 fly function:

function fly(end, zoom) {
        map.flyTo({
          // These options control the ending camera position: centered at
          // the target, at zoom level 9, and north up.
          center: end,
          zoom: zoom,
          bearing: 0,

          // These options control the flight curve, making it move
          // slowly and zoom out almost completely before starting
          // to pan.
          speed: 0.8, // make the flying slow
          curve: 1, // change the speed at which it zooms out

          // This can be any easing function: it takes a number between
          // 0 and 1 and returns another number between 0 and 1.
          easing: function(t) {
            return t;
          }
        });
      }

点击按钮时调用 fly(), 这里目前写死的，以后补充一个根据地址查询经纬度的方法。

function copenhagen() {
        fly(start, 9);
      }

      function malmo() {
        fly([13.2, 55.6], 10.5);
      }

      function berlin() {
        fly([13.35, 52.53], 11.5);
      }
      function shenyang() {
        fly([123.5, 41.5], 9);
      }
      function beijing() {
        fly([116.5, 40], 9);
      }
      function hongkong() {
        fly([114.2, 22.3], 10);
      }
      function future() {
        fly([133.2, -23.3], 4);
      }