Mapbox GL

<div ref="basicMapbox" class="mapboxDiv" @click="showVideo"></div>

new mapboxgl.Map()

mapboxgl.accessToken = accessTokenMap;
self.map = new mapboxgl.Map({
  container: this.$refs.basicMapbox,
  style: sysStyle,
  center: sysAreaCenter, // 设置地图中心(高新)
  zoom: 14, // 设置地图比例,
  pitch: 60
});

map.loadImage()

map.on("load", function () {
  let lineSrc = require("../line.png");
  map.loadImage(lineSrc, function (error, image) {
    if (error) throw error;
    map.addImage("lineBG", image);
  })
  // 加载地图图标
  if (self.pointIconArr && self.pointIconArr.length) {
    self.pointIconArr.forEach(el => {
      let iconSrc = require("../pointIcon/" + el.typeId + ".png");
      map.loadImage(iconSrc, function (error, image) {
        if (error) throw error;
        map.addImage(el.typeId, image);
      })
      let iconSrclight = require("../pointIcon/" + el.typeId + "light.png");
      map.loadImage(iconSrclight, function (error, image) {
        if (error) throw error;
        map.addImage(el.typeId + "light", image);
      })
    })
  }
});

Popup()

// 弹窗组件
this.gridPopup = new mapboxgl.Popup({
  closeButton: true,
  closeOnClick: true,
  anchor: "left",
  offset: 50,
  maxWidth: "400px",
  className: "pointGridPopup"
})

GeoJSONSource数据源

map.addSource('some id', {
    type: 'geojson',
    data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "id": "id0",
           "geometry": {
           	// Point LineString Polygon MultiPoint MultiLineString MultiPolygon
               "type": "LineString", 
               "coordinates": [
                   [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
               ]
           },
           "properties": {
               "prop0": "value0",
               "prop1": "value1"
           }
       },
       ......
       ]
       }
});

map.addLayer()

• Type: 可选值 background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade.

1. fill ：平面填充
2. line：线
3. symbol：图标或文本标签
4. circle：圆
5. heatmap：热力图
6. fill-extrusion：3D图（三维）多边形
7. hillshade：栅格贴图纹理，如卫星图像
8. background：地图的背景色或图案

• source：GeoJSON格式的数据
• layout：图层的布局
• paint：此层的默认绘制属性

举例

if (map.getSource("peoplePointsSource" + LayerID) === undefined) {
 map.addSource("peoplePointsSource" + LayerID, {
    "type": "geojson",
    "data": this.pointToGeoJSON(data)
  });
} else {
  map.getSource("peoplePointsSource" + LayerID).setData(this.pointToGeoJSON(data));
}

if (map.getLayer("peoplePointsID" + LayerID) === undefined) {
  map.addLayer({
    "id": "peoplePointsID" + LayerID,
    "type": "symbol",
    "source": "peoplePointsSource" + LayerID,
    "layout": {
      "icon-image": ["get", "typeId"],
      "icon-size": 1,
      "icon-allow-overlap": true
    },
    "filter": ["!=", "Id", ""]
  });
  map.addLayer({
    "id": "peoplePointslightID" + LayerID,
    "type": "symbol",
    "source": "peoplePointsSource" + LayerID,
    "layout": {
      "icon-image": ["concat", ["get", "typeId"], "light"],
      "icon-size": 1,
      "icon-allow-overlap": true

    },
    "filter": ["in", "Id", ""]
  });

  map.on("mouseenter", "peoplePointsID" + LayerID, function (e) {
    let pointData = e.features[0].properties;
    map.getCanvas().style.cursor = "pointer";
    map.setFilter("peoplePointslightID" + LayerID, ['in', 'Id', pointData.Id]);
  });
  map.on("mouseleave", "peoplePointsID" + LayerID, function () {
    map.getCanvas().style.cursor = "";
    if (defaultLight) {
    } else {
      map.setFilter("peoplePointslightID" + LayerID, ['in', 'Id', '']);
    }
  });
  map.on("click", "peoplePointsID" + LayerID, function (e) {
  .....
  self.gridPopup.setLngLat(JSON.parse(pointData.lnglat))
                    .setHTML(self.popupTpl(data))
                    .addTo(map);
  })