基于地图的可视化模型方案（一）：加载地图

🕒 发布时间:

基于地图的可视化模型方案，使用 Mapbox 在页面上加载地图

vue-cli

在框架，模块化，越来越流行的时代，项目采用的是vue-cli脚手架，可在vueCliTemplate中clone后开发

地图

目前市面上可选择的地图特别多：高德地图丶百度地图丶 mapbox... 基于目前可视化框架的考虑，大多数都选择 mapbox 作为底图

安装

    npm install mapbox --save

引用

 import mapboxgl from 'mapbox-gl/dist/mapbox-gl'

css

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

JavaScript

  mounted() {
    this.initMap();
  },

  methods: {
      initMap() {
          mapboxgl.accessToken = 'Token';
          this.map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/evollers/cjzhx2vaf35ix1cp9d7inydoc',
          center: [116.585115, 40.07452],
          zoom: 12.44,
          pitch: 52.99,
          bearing: -74.40,
          });
        }
      }

词汇释义

accessToken：在mapbox注册后悔生成一个密匙token，通过token使用地图服务
container：绑定 dom 的 ID 值
style：mapbox 工作台自己创建的样式地图代码
center：中心点
zoom：层级
pitch：地图俯仰角度
bearing：角度

实现

map