Mapbox -- 模拟飞行效果 Slowly fly to a

DEMO 链接 https://mercurywang.github.io/demos/mapbox_2.html

在上一篇的基础上做了改进，可以按照城市或者地点名称查询位置坐标。Mapbox 使用的是 fuzzy query, 查询中文，得到的结果会非常的 fuzzy，所以使用英文/拼音查询比较好。

1.gif

1. 需要引入的文件：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<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"
/>
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 加载地图

地图的图层是可以改的，这里列出了 Mapbox 的所有自带图层样式，可以加一个随机取样式的方法，如：

function randomStyle() {
  let index = Math.floor(Math.random() * styles.length);
  return styles[index];
}

mapboxgl.accessToken = "yourToken";
const start = [0, 0];
const styles = [
  "mapbox://styles/mapbox/streets-v10",
  "mapbox://styles/mapbox/outdoors-v10",
  "mapbox://styles/mapbox/light-v9",
  "mapbox://styles/mapbox/dark-v9",
  "mapbox://styles/mapbox/satellite-v9",
  "mapbox://styles/mapbox/satellite-streets-v10",
  "mapbox://styles/mapbox/navigation-preview-day-v2",
  "mapbox://styles/mapbox/navigation-preview-night-v2",
  "mapbox://styles/mapbox/navigation-guidance-day-v2",
  "mapbox://styles/mapbox/navigation-guidance-night-v2"
];
let map = new mapboxgl.Map({
  container: "map",
  style: styles[9],
  center: start,
  zoom: 1.4
});

3. 城市列表

<div v-for="(city, index) in cities">
  <button type="button" :class="[city.color]" @click="flying(index)">
    {{ city.name }}
  </button>
</div>

cities 的数据格式：

cities: [
  {
    name: "Berlin",
    center: [13.35, 52.53],
    color: "btn btn-light"
  },
  {
    name: "Beijing",
    center: [116.3918245, 39.905485999999996],
    color: "btn btn-success"
  }
];

样式 color 是动态添加的，从以下列表中取随机样式：

// 获取按钮的随机样式
function randomColor() {
  const btns = [
    "btn btn-primary",
    "btn btn-secondary",
    "btn btn-success",
    "btn btn-danger",
    "btn btn-warning",
    "btn btn-info",
    "btn btn-light",
    "btn btn-dark",
    "btn btn-outline-primary",
    "btn btn-outline-secondary",
    "btn btn-outline-success",
    "btn btn-outline-danger",
    "btn btn-outline-warning",
    "btn btn-outline-info",
    "btn btn-outline-light",
    "btn btn-outline-dark"
  ];

  let index = Math.floor(Math.random() * btns.length);
  console.log(btns[index]);
  return btns[index];
}

4. 查询并添加城市

function add() {
  let _this = this;
  let cityInput = _this.cityInput;

  const url =
    "https://api.mapbox.com/geocoding/v5/mapbox.places/ " +
    encodeURIComponent(cityInput) +
    ".json?access_token=yourAccessToken";

  let params = {
    url: url,
    success: function(body) {
      if (body.features.length) {
        console.log("body", body.features);
        let color = randomColor();
        let cityName = "";
        if (body.features[0].place_name.indexOf(",") > 0) {
          cityName = body.features[0].place_name.substr(
            0,
            body.features[0].place_name.indexOf(",")
          );
        } else {
          cityName = body.features[0].place_name;
        }
        let cityInfo = {
          name: cityName,
          center: [body.features[0].center[0], body.features[0].center[1]],
          color: color
        };
        console.log("cityInfo.name", cityInfo.name);
        _this.cities.push(cityInfo);
      } else {
        alert("No data found");
      }
    }
  };
  fetch(params);
  this.cityInput = "";
}

function fetch(params) {
  $.ajax({
    url: params.url,
    type: "get",
    crossDomain: true,
    error: function(data) {
      alert("Unable to Connect to Location Services");
    },
    success: params.success
  });
}

城市列表：

citis.png

5. 飞行方法

function fly(end) {
  map.flyTo({
    center: end,
    zoom: 12.8,
    bearing: 0,
    speed: 1, // make the flying slow
    curve: 2, // change the speed at which it zooms out
    easing: function(t) {
      return t;
    }
  });
}