mapBox使用笔记

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

<!--dom部分-->
<div :id="mapID" class="s-map" />

// 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)
  },
    // 定位到指定经纬度
    addPointFn(cityObj) {
      cityObj.num = cityObj.num === undefined ? '' : cityObj.num
      const self = this
      // 时间戳
      const timestamp = new Date().valueOf()
      let currEventColor = ''
      if (this.currColors && this.currColors.length > 0) {
        this.currColors.forEach(element => {
          if (element.id === feature.properties.featurecode.replace('.', '')) {
            currEventColor = element.color + '91'
          }
        })
      }

      const x = cityObj.pos[0]
      const y = cityObj.pos[1]
      // 添加动态图标
      const size = 200
      const pulsingDot = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),
        onAdd: function () {
          const canvas = document.createElement('canvas')
          canvas.width = this.width
          canvas.height = this.height
          this.context = canvas.getContext('2d')
        },
        render: function () {
          const duration = 1000
          const t = (performance.now() % duration) / duration
          const radius = (size / 2) * 0.3
          const outerRadius = (size / 2) * 0.7 * t + radius
          const context = this.context
          context.clearRect(0, 0, this.width, this.height)
          context.beginPath()
          context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)
          context.fillStyle = 'rgba(51, 102, 204,' + (1 - t) + ')'
          context.fill()
          context.beginPath()
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)
          // context.fillStyle = 'rgba(255, 100, 100, 1)'
          context.fillStyle = currEventColor
          context.strokeStyle = 'white'
          context.lineWidth = 2 + 4 * (1 - t)
          context.fill()
          context.font = '28px Arial'
          context.textAlign = 'center'
          context.textBaseline = 'middle'
          context.fillStyle = '#e6b600'
          context.stroke()

          context.fillText(cityObj.num, this.width / 2, this.height / 2)
          this.data = context.getImageData(0, 0, this.width, this.height).data
          self.map.triggerRepaint() // 闪动效果
          return true
        }
      }
      this.mapImageIdList.push('a-' + cityObj.code + timestamp + 'positionimg') // 保存下已有的id 便于之后删除
      this.mapLayerIdList.push('a-' + cityObj.code + timestamp + 'positionpoints')
      self.map.addImage('a-' + cityObj.code + timestamp + 'positionimg', pulsingDot, {
        pixelRatio: 2
      })
      self.map.addLayer({
        id: 'a-' + cityObj.code + timestamp + 'positionpoints',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [{
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [x, y]
              }
            }]
          }
        },
        layout: {
          'icon-image': 'a-' + cityObj.code + timestamp + 'positionimg',
          'icon-ignore-placement': true
        }
      })
      self.map.on('mouseenter', 'a-' + cityObj.code + timestamp + 'positionpoints', function () {
        self.map.getCanvas().style.cursor = 'pointer'
      })
      self.map.on('mouseleave', 'a-' + cityObj.code + timestamp + 'positionpoints', function () {
        self.map.getCanvas().style.cursor = ''
      })

      // 记录上一个点位的点位层名
      // this.eventPointTimestamp.push('a-' + timestamp)
      // console.log(this.eventPointTimestamp)
    },
    addPop(obj) { // 地图图层上插入自定义内容
      const self = this
        let str = ''
        const content = `<div class="map-pop-style">${str}</div>`
        self.popup = new mapboxGL.Popup({ closeButton: true }).setLngLat(obj.pos).setHTML(content).addTo(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/

后续更新地图上标记地点