首页 前端知识 mapbox添加symbol图层显示文字详情

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

2024-04-15 09:04:32 前端知识 前端哥 399 121 我要收藏

功能场景:

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

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


实现代码

提示:这里添加紫色的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为光圈的宽度
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4944.html
标签
评论
发布的文章

jQuery QueryBuilder 教程

2024-10-29 23:10:44

水球图 及各种参数设置

2024-10-29 23:10:13

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!