mapbox 线标注

mapbox 线标注

实现功能：mapbox绘制线条并给线条添加标注信息，如：道路名称类似效果；
需要配置mapbox的glyphs字体样式，此处可以使用mapbox在线地址，但是需要accessToken；也可以使用本地离线字体包，格式得是mapbox支持的PBF；
glyphs 获取以有向距离场编码的 PBF 字形文件的 URL 模板。URL 必须包含 {fontstack} 和 {range} 占位符。当有图层使用了 text-field 布局属性时，此属性必须设置。

使用图层的symbol类型实现，用到的主要layout属性有：

• text-field
  用于文本标签的值。属于布局属性，如果提供了纯字符串，它将被视为使用默认/继承格式选项格式化的字符串。
• symbol-placement
  决定标签相对于几何体的位置。属于布局属性。可选值”point””line””line-center”默认值为”point”
  “point”: 标签放置在几何图形所在的点上。
  “line”:标签沿几何图形的直线放置。只能用于线和多边形几何图形。
  “line-center”:标签放置在几何图形线的中心。只能用于线型和多边形几何体。
• text-rotation-alignment
  结合symbol-placement，确定形成文本的各个图示符的旋转行为。属于布局属性。可选值为”map”,”viewport”,”auto”。需要text-field.
  “map” 将symbol placement设定为point时，文本将东西向对齐。当symbol placement设置为“line”或“line-center”时，将文本x轴与直线对齐。
  “viewport” 生成其x轴与视口的x轴对齐的文本，而不考虑symbol-placement的值。
  “auto”:当“symbol-placement”设置为“点”时，效果等同于viewport。当“symbol-placement”设置为“line”或“line-center”时，效果等同于“map”。
• text-offset (非必须)
  文本与其锚点的偏移距离。正值表示向右和向下，负值表示向左和向上。属于布局属性。接收参数为一个数组。默认值为[0,0]需要text-field。设置text-radial-offset时失效。
• text-anchor（非必须）
  决定文本锚定的位置。属于布局属性。可选值有"center", “left”, “right”, “top”, “bottom”, “top-left”, “top-right”, “bottom-left”, “bottom-right”.默认值为“center”需要text-field。
• 其他一些文字修饰类属性可以根据需要进行添加；

  // 线条标注
      map.addLayer({
        id: 'pipeSyambol',
        type: "symbol",
        source: `line-source`,
        'layout': {
          'text-field':[ 'format', 'DN',{'font-scale': 1.2},['get', 'GJ'],{}],
          "symbol-placement": "line-center",
          "text-rotation-alignment": 'map',
          'text-offset': [0, 1.25],
          'text-anchor': 'top',
          "text-padding": 20
        },
        'paint': {
          'text-color': '#9b9d9f'
        }
      });

具体实现代码

<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

  map = null;
      mapboxgl.accessToken ="xxxxx";
      map = new mapboxgl.Map({
        container: "map",
        style: {
            "version": 8,
            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles":  ["http://t0.tianditu.com/vec_w/wmts?tk=e2dd49efda0d7370f1d303c257d8a645" + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22,
                "layout": {},
            }]
        },
        center: [102.834254, 29.804286],
        zoom: 15,
        pitch: 60,
        bearing: 0,
      });

	// 地图加载完成后
	 map.on("load", () => {
	        // 当地图加载完成后，渲染管线 
	        // GEOJSON geojson格式的线数据
	        let data = GEOJSON
	        if (data && data.length > 0) {
	        	//绘制管线
	            this.drawSegment(data, 'line')
	        }
	      });
      //   绘制管线
      // geoJsonData geojson格式的线数据
      // layerName 图层名称
     function drawSegment(geoJsonData, layerName) {
      const { color, thickness } = layerConfig
      if (map && map.getSource(`${layerName}-source`)) {
        map.removeSource(`${layerName}-source`)
      }
      if (map && map.getLayer(layerName)) {
        map.removeLayer(layerName)
      }

      map.addSource(`${layerName}-source`, {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: geoJsonData,
        },
      });

      map.addLayer({
        id: layerName,
        type: "line",
        source: `${layerName}-source`,
        layout: {
          'line-cap': "round",
          'line-join': "round",
        },
        paint: {
          'line-width': 4,
          'line-color': '#16d141',
        }
      });
       // 线条标注
      map.addLayer({
        id: 'pipeSyambol',
        type: "symbol",
        source: `${layerName}-source`,
        'layout': {
          'text-field':[ 'format', 'DN',{'font-scale': 1.2},['get', 'GJ'],{}],
          "symbol-placement": "line-center", 
          "text-rotation-alignment": 'map',
          'text-offset': [0, 1.25],
          'text-anchor': 'top',
          "text-padding": 20
        },
        'paint': {
          'text-color': '#9b9d9f'
        }
      });
    }