mapboxgl 加载常用图层汇总

初始化地图对象：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />

  this.map = new mapboxgl.Map({
      //地图容器div的id
      container: "mapDiv",
      style: style,// 地图style
      minZoom: 0,
	  maxZoom:17,
      center: [114,32],// 地图中心点
      // zoom: 0, // 地图当前缩放级数
    });

1.加载常用图层

1.1 wmts服务

function addRasterLayer({ url, id, minzoom = 0, maxzoom = 22, visible = true }) {
      if (this.map.getLayer(id)) return;
      this.map.addLayer({
        id: id,
        type: "raster",
        source: {
          type: "raster",
          tiles: [url],
          tileSize: 256,
          zoomOffset: 1,
        },
        layout: {
          visibility: visible ? "visible" : "none",
        },
        minzoom, // 限制加载最小级别的服务，当小于该级别时只显示该级别的地图服务
        maxzoom,// 限制加载最大级别的服务，当大于该级别只显示该级别的地图服务
      });
    }

1.2 矢量服务

首先需要加载数据源，然后加载图层通过source、source-layer指定数据源与图层。

1.2.1 加载矢量切片数据源

   this.map.addSource("source-id", {
        type: "vector",
        tiles: [
          "https://testurl/{z}/{x}/{y}.mvt?code=&tablename=&cjrid=&dwmc=&yhlx=0&sfdw=&shzt=&queryCode=&hczt=&gids=&querytype=2&pid=&tag=2",
        ]
      });

1.2.2 加载geojson数据源

   let json="http://url//xxx.json"; // json可以是geojson对象或者返回goejson的服务
   this.map.addSource("source-id", {
          type: "geojson",
          data: json,  
    });

1.2.3 加载点

    // 加载点layer
   this.map.addLayer({
        id: "drawpointlayer",
        type: "circle",
        layout: {
          visibility: "visible",
        },
        source: "source-id",
        "source-layer": "mvt",
        paint: {
          "circle-radius": 10,
          "circle-color": "#ff0000"
        },
         filter: ["all",["==","$type", "Point"],["==","dwmc","莒县龙山镇花崖小学"],["has","dwmc"]],
        // minzoom:4,
        // maxzoom:20
      });  

1.2.4 加载线

 // 加载线layer
      this.map.addLayer({
        id: "drawRoadlayer",
        type: "line",
        source: "source-id",
        "source-layer": "mvt",
        layout: {
          visibility: "visible",
        },
        paint: {
          "line-width": 2,
          "line-color": "#DAC9F0",
          "line-opacity": 1,
        },
        filter: ["==", "$type", "LineString"],
      });

1.2.5 加载面

 // 加载面layer
      this.map.addLayer({
        id: "drawLakelayer",
        layout: {
          visibility: "visible",
        },
        type: "fill",
        source: "source-id",
        "source-layer": "mvt",
        paint: {
          "fill-color": "#ABC6EF",
          "fill-outline-color": "#3bb2d0",
          "fill-opacity": 0.6,
        },
        filter: ["==", "$type", "Polygon"],
      });

1.2.6 添加注记图层（富文本标签）

支持富文本标签（多个注记标签）的渲染方式，效果如图：

  this.map.addLayer({
        'id': 'thematic_shiPolygonlayer-ano',
        'source': 'source-id',
        'type': 'symbol',
        'minzoom': 1,
        'maxzoom': 20,
        'layout': {
          'text-size': 10,
          'symbol-placement': 'point',
          //'text-field': '{qzcount}', // 显示注记字段 
           "text-field": [
            'format',
            ['get', 'dwmc'],
            { 'font-scale': 1.5 },
            '\n',
            {},
            ['get', 'id'],
            {
              'font-scale': 1.0,
              'text-font': [
                'literal',
                ['DIN Offc Pro Italic', 'Arial Unicode MS Regular']
              ],
              'text-color': 'red',
            }
          ]
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'], // 默认使用mapbox官网字体库
          'text-offset': [0, 0.6],
          'text-anchor': 'top'
        },  
        "paint": {
                "text-color": "#202",
                "text-halo-color": "#fff",   // 晕
                "text-halo-width": 2  
          }
      })

1.3 地图交互

1.3.1点击查看属性

   this.map.on('click', (e) => {
          // var positionMess = {}
          var div = document.createElement('div')
          var clickBounds = [
            [e.point.x - 1, e.point.y - 1],
            [e.point.x + 1, e.point.y + 1]
          ]
          var features = this.map.queryRenderedFeatures(clickBounds) // 前台查询-通过点击的地图屏幕坐标(左上角[0,0])查询显示的地图要素
          let clickLayer = []
          for (let featureItem of features) {
            var sourceLayer = featureItem.layer['source-layer'] // 矢量切片地图服务名
            var properties = featureItem.properties // 属性值的对象
            clickLayer.push({sourceLayer, properties})
          }
          // clickLayer中id一样的数据可能是同一要素数据，只是被切片分开了，需要去重下。
          new window.compassengine.Popup()
            .setLngLat(e.lngLat)
            .setHTML(`${JSON.stringify(clickLayer)}`)
            .addTo(this.map)
        })

2.专题图层

2.1 常用专题图

2.1 热力图

  this.map.addSource("source-id", {
          type: "vector",
          tiles: [
            "http://ip:9005/qgzhdc/dataManage/api/v1/queryListCommonMvt/{z}/{x}/{y}.mvt?code=0",
          ],
        });
      }
  this.map.addLayer({
        id: "trees-heat",
        type: "heatmap",
        source: "source-id",
        "source-layer": "mvt",
        maxzoom: 15,
        paint: {
          "heatmap-radius": [
            "interpolate",
            ["linear"],
            ["zoom"],
            // zoom is 5 (or less) -> circle radius will be 1px
            5,
            10,
            // zoom is 10 (or greater) -> circle radius will be 5px
            8,
            20,
          ],
          "heatmap-weight": 1,
          "heatmap-intensity": 1,
          "heatmap-color": [
            "interpolate",
            ["linear"],
            ["heatmap-density"],
            0,
            "rgba(33,102,172,0)",
            0.1,
            "#4169e1",
            0.3,
            "#00ffff",
            0.5,
            "#00ff00",
            0.7,
            "#ffff00",
            1,
            "#ff0000",
          ],
          "heatmap-opacity": 1,
        },
      });

2.2 唯一值渲染图

let expression= ['match', ['get', 'adcode'],110111, '#FFFFE0',110112,'#FFEBCD','rgba(255,255,255,1)'];
// 属性字段 adcode  默认值  rgba(255,255,255,1)
//                 值为110111 的渲染为  #FFFFE0
//                 值为110112  的渲染为 #FFEBCD
//                 
this.map.addSource('thematic_source_oneShiPolygon', { type: 'geojson', data:"geojsonurl" });
this.map.addLayer(
          {
            'id': 'thematic_fenjiOneShilayer',
            'type': 'fill',
            'source': 'thematic_source_oneShiPolygon',
            'paint': {
              'fill-color': expression
            }
          }
        );

2.3 重分类渲染图

let  expression = ['step', ['get', 'gid'], '#FF0000', 40, '#00FF00', 70, 'rgba(255,255,255,1)'] // 属性字段 
// 属性渲染字段 gid    
// 当 gid < 40，渲染成 #FF0000
// 当 gid<=40<70 #00FF00
this.map.addSource('thematic_source_oneShiPolygon', { type: 'geojson', data:"geojsonurl" });
this.map.addLayer(
          {
            'id': 'thematic_fenjiOneShilayer',
            'type': 'fill',
            'source': 'thematic_source_oneShiPolygon',
            'paint': {
              'fill-color': expression
            }
          }
);

显示瓦片网格（调试使用）：
map.showTileBoundaries=true;

待完善。