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

功能场景：

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

实现代码

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

arr.forEach((element, index) => {
        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
          }
        });
      });

代码解释：

layout：

• arr为包含区域坐标的数组
• text-field为所要取的变量的名字，需要再properties中定义
• text-font为显示的字体，注意这个需要看glyphs: fonts/{fontstack}/{range}.pbf中有什么字体，否则不会显示文字的！

paint：

• text-halo–color为文字周围光圈的颜色
• text-halo–width为光圈的宽度

代码007普通

打赏 收藏 海报 链接