maplibregl style glyphs 自定义配置

一、公网可用配置：

const map = new maplibregl.Map({
  style: {
    glyphs: "https://iserver.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf", // 超图(偶尔不稳定)
  }
})

二、自定义配置

生成好可用的 fonts.pbf 下载地址：https://github.com/korywka/fonts.pbf/tree/master

1、nginx配置

示例：把下载好的 Open Sans Regular 放到 nginx/html/fonts/Open Sans Regular，相应配置如下：

server {
  listen 80;

  location /fonts/ {
    alias html/fonts/;
    add_header Access-Control-Allow-Origin *;
    add_header Cache-Control "public, max-age=31536000, immutable";
    default_type application/octet-stream;
  }
}

启动nginx（window系统）

start nginx

测试配置是否生效

nginx -t 

重启服务

nginx -s reload

代码引用：

const map = new maplibregl.Map({
  style: {
    glyphs: "http://localhost/fonts/{fontstack}/{range}.pbf",
  }
})

所有使用到文本的都需要指定具体字体：

map.addLayer({
  id: "demo-layer",
  type: "symbol",
  source: "demo-source",
  layout: {
    "icon-image": "{icon}",
    "icon-overlap": "always",
    "icon-rotate": ["get", "direct"],
    "icon-size": ["get", "size"],
    "icon-allow-overlap": true,
    "text-font": ["Open Sans Regular"],
    "text-field": ["get", "label"],
    "text-size": 14,
    "text-offset": [1.1, 0],
    "text-anchor": "left",
    "text-allow-overlap": true,
  },
  paint: {
    "text-color": "#fff",
  },
});

2、项目中引用（推荐）

示例：把下载好的 Open Sans Regular 放到 public/Open Sans Regular，相应引用如下：

const map = new maplibregl.Map({
  style: {
    glyphs: "/fonts/{fontstack}/{range}.pbf",
  }
})