mapBox使用笔记

项目需要，以mapBox为基础开发地图相关大屏展示，记录开发与学习。
基础的地图渲染熟悉一些以后还是比较容易的，就是刚开始不熟一脸懵，先附上文档地址
英文地址：https://www.mapbox.com/maps/
中文文档：http://www.mapbox.cn/ 中文文档里里还是会有很多英文 只是简单的介绍为中文了
简单样例：
效果展示

 

// js部分
import mapboxGL from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

data() {
  return {
    mapStyle: {
      version: 8,
      glyphs: 'url', // 天地图或mapbox  .pdf文件
      sources: {
        'raster-base-tiles': {
          type: 'raster',
          tiles: ['url'], // 此为城市底图
          tileSize: 256,
          zoomOffset: -1
        },
        'raster-tiles': {
          type: 'raster',
          tiles: [
            'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的秘钥'
          ],
          tileSize: 256,
          zoomOffset: -1
        },
        'raster-label-tiles': {
          type: 'raster',
          tiles: ['url'], // 此为城市标注
          tileSize: 256,
          zoomOffset: -1
        }
      },
      layers: [{
          id: 'tdt-base-tiles',
          type: 'raster',
          source: 'raster-base-tiles',
          minzoom: 0,
          maxzoom: 22
        },
        {
          id: 'tdt-img-tiles',
          type: 'raster',
          source: 'raster-tiles',
          minzoom: 0,
          maxzoom: 22
        },
        {
          id: 'tdt-label-tiles',
          type: 'raster',
          source: 'raster-label-tiles',
          minzoom: 0,
          maxzoom: 22
        }
      ]
    }
  }
}

methods: {
  initMap() {
    var hoveredStateId = null
    let self = this
    // 初始化地图
    mapboxGL.accessToken =
      '你的秘钥'
    self.map = new mapboxGL.Map({
      style: self.mapStyle,
      center: {
        lng: 107.6,
        lat: 34.655
      },
      zoom: 5.8,
      pitch: 15,
      minZoom: 5,
      maxZoom: 17,
      container: self.mapID
      // pitchWithRotate: false // 将不会在"拖拽进行地图旋转"的同时控制地图的倾斜。
    })
    // 加载指北针图表
    // self.map.addControl(new mapboxGL.NavigationControl());
    // 加载地图比例尺
    self.map.addControl(
      new mapboxGL.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
      }),
      'bottom-left'
    )
    self.map.on('click', function (e) {})
    self.map.on('load', function () {
      self.map.addSource('states', {
        type: 'geojson',
        data: self.baseUrl + '/static/json/610000_full.geojson'
      })
      // 覆盖的高亮显示
      self.map.addLayer({
        id: 'state-fills',
        type: 'fill',
        source: 'states',
        layout: {},
        paint: {
          'fill-color': 'rgba(135, 250, 254, 0.3)',
          'fill-opacity': [
            'case',
            ['boolean', ['feature-state', 'hover'], false],
            1,
            0.5
          ]
        }
      })
       // 覆盖的高亮描边
      self.map.addLayer({
        id: 'state-lines',
        type: 'line',
        source: 'states',
        layout: {},
        paint: {
          'line-color': 'rgba(135, 250, 254, 1)',
          'line-width': 2
        }
      })
    })
    // 地图初始化完成后，调用父组件的回调方法
    self.$emit('onMapLoaded', self.map)
  }
}

简单的示例就完成了。其中addSource里的data属性值geojson为阿里云获取
阿里云geojson获取地址DataV.GeoAtlas地理小工具系列
另echarts geojson获取地址 
echarts-china-cities-js/geojson/shape-only at master · echarts-maps/echarts-china-cities-js · GitHub

从echarts资源列表里也可以查到

https://github.com/ecomfe/awesome-echarts

点击地图高亮展示也是类似的 *** 作
1. 捕获地图点击事件
2. 通过地图坐标获取相应市或区县 geoJson文件
3. 调用地图addSource方法加载图层，paint属性内配置相应线或面的颜色。
 

mapbox属性内配置项文档在style分类里地址为
http://www.mapbox.cn/mapbox-gl-js/style-spec/

后续更新地图上标记地点