mapbox添加symbol图层显示文字详情

互联网 12 月前 0 7

本文介绍: mapbox 添加 symbol 文字图层

功能 场景：

之前在问答中提问图层中的文字是如何实现的，没有合适的答案，现将问题记录一下。

例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)

实现 代码

提示：这里添加紫色的fill图层与黑色的边框line图层就不赘述，具体可查看上一篇文章

arr.forEach((element, index) =&gt; {
        this.map.addLayer({
          id: `${element.id}Symbol`,
          type: 'symbol',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  geometry: element.center,
                  properties: {
                    title: element.name
                  }
                }
              ]
            }
          },

          layout: {
            'text-field': '{title}',
            'text-font': ['Noto Sans Regular'],
            'text-size': 12
          },
          paint: {
            'text-halo-color': '#fff',
            'text-halo-width': 2
          }
        });
      });