Mapbox -- 飞行效果_根据城市名称查询坐标

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

DEMO 链接 http://mercwang.gitee.io/ziyu

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

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
  });
}

城市列表：

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;
    }
  });
}

基本上方法都是不用改的，只做了一些调整。

1. 安装

yarn add mapbox-gl

2. 引入

// script
import mapboxgl from 'mapbox-gl'
// style
@import url('https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css');

3. 调整

// template
 <div style="height:80vh;width:100%;text-align:left;">
    <div
      ref="basicMapbox"
      style="height:80vh;width:80vw; position: absolute"
    ></div>
//... other doms
</div>

// script
this.map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,  // 这里在原生中写的是 dom id，这里改成 this.$refs.basicMapbox
        style: style,
        center: start,
        zoom: 1.8
      })

另外调接口的方法也做了调整，使用的 axios：

 this.$axios.get(url).then(res => {
        const {
          data: { features }
        } = res
        if (features.length) {
          let color = this.randomColor()
          let cityName = ''
          if (features[0].place_name.indexOf(',') > 0) {
            cityName = features[0].place_name.substr(
              0,
              features[0].place_name.indexOf(',')
            )
          } else {
            cityName = features[0].place_name
          }
          let cityInfo = {
            name: cityName,
            center: [features[0].center[0], features[0].center[1]],
            color: color
          }
          _this.cities.push(cityInfo)
        } else {
          alert('No data found')
        }
      })