使用Esri-Leaflet矢量瓦片图层时阿拉伯文本显示异常求助

针对你遇到的阿拉伯文本显示错乱问题，可从以下几个关键方向排查修复：

1. 更换为支持阿拉伯语字形的字体 #

Arial Regular对阿拉伯语的连写、特殊字形渲染支持有限，建议替换为专门适配阿拉伯语的字体，比如Noto Sans Arabic（Esri矢量瓦片服务通常默认包含该字体）、Amiri Regular或Scheherazade New。

注意：字体名称必须和矢量瓦片服务提供的可用字体完全匹配，你可以通过访问服务的字体资源端点（如{你的服务地址}/vectorTileServer/resources/fonts）查看所有支持的字体列表。

2. 配置RTL文本布局属性 #

阿拉伯语是从右到左（RTL）书写的，仅设置字体不足以解决排版问题，需要在样式中补充RTL相关布局配置：
在你的style回调函数中，遍历图层时添加以下属性：

style.layers.forEach((layer) => {
  if (layer.layout && layer.layout['text-font']) {
    // 把支持阿拉伯语的字体放在最前面优先使用
    layer.layout['text-font'] = ['Noto Sans Arabic Regular', ...layer.layout['text-font']];
    // 开启RTL文本方向
    layer.layout['text-direction'] = 'rtl';
    // 设置文本右对齐
    layer.layout['text-justify'] = 'right';
  }
});

3. 避免完全覆盖原有字体列表 #

不要直接替换整个text-font数组，而是将支持阿拉伯语的字体插入到数组头部，这样如果服务端没有该字体，会自动 fallback 到原有字体，避免图层加载失败。

4. 验证瓦片文本数据的正确性 #

通过浏览器开发者工具的网络面板，查看矢量瓦片请求的响应内容，确认瓦片内的阿拉伯文本是正确的UTF-8编码，没有乱码。也可以在style回调中打印layer.layout['text-field']对应的数据源字段，检查文本内容是否正常。

修改后的完整代码示例：

getWeatherMap() {
    if(this.map){
      this.map.remove();
    }
    const saudiArabiaCenter = [45.0792, 23.8859];
    this.map = L.map(`map`, {
      center: L.latLng(saudiArabiaCenter[1], saudiArabiaCenter[0]),
      zoom: 6,
      minZoom: 3,
      extent: [4034389.34, 1606584.16, 6328654.48, 3423574.81]
    });

    const baseMapEsriLayer = new esriVector.VectorTileLayer("example/vectorTileServer", {
      apikey: "xyz",
      pane: 'basemap',
      style: (style) => {
        style.layers.forEach((layer) => {
          if (layer.layout && layer.layout['text-font']) {
            // 优先使用支持阿拉伯语的字体
            layer.layout['text-font'] = ['Noto Sans Arabic Regular', ...layer.layout['text-font']];
            // 配置RTL文本布局
            layer.layout['text-direction'] = 'rtl';
            layer.layout['text-justify'] = 'right';
          }
        });
        return style;
      }
    });

    // 记得将图层添加到地图
    baseMapEsriLayer.addTo(this.map);
  }

内容的提问来源于stack exchange，提问作者Owais Nadeem