Question

在这项工作中正确发生了几个时刻，地图按预期显示，邮政编码边界按预期显示，但我无法确定如何将5位邮政编码作为标签在每个邮政编码边界内。任何帮助（如果可能的话，带有示例代码）都将非常赞赏！

这里有一些代码：

<html>
    <div id='mapdiv'></div>
    ...
    mapboxgl.accessToken='<token>';
var mapobj = new mapboxgl.Map({
    container: 'mapdiv',
    style: 'mapbox://styles/mapbox/streets-v9',
    minZoom: 3,
    maxZoom: 20,
    zoom: 10,
    center: [-105.1613858,39.6791558]
});

<script src="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet" />
...
mapobj.on('load', function() {

    // Add ZipCode source to map
    mapobj.addSource('zipSource', {
        type: 'vector',
        url: 'mapbox://mapbox.enterprise-boundaries-p2-v1'
    });
    mapobj.showTileBoundaries = true;

    // Add hot ZipCode layer to map
    mapobj.addLayer({
        id: 'hotZipLayer',
        type: 'fill',
        source: 'zipSource',
        'source-layer': 'boundaries_postal_2',
        paint: {
            'fill-outline-color': 'rgba(0,0,0,1)',
            'fill-color': 'rgba(0,0,0,0.01)'
        }
    });

    // Add Zip numbers symbol layer to map
    mapobj.addLayer({
        id: 'zipCodeLabels',
        type: 'symbol',
        source: 'zipSource',
        'source-layer': 'points_postal_2',
        layout: {
            'text-field': '{id}',
            'text-justify': 'center',
            'text-size' : 10
        },
        paint: {
            'text-color': 'black',
            'text-halo-color': 'white',
            'text-halo-width': 25
        }
    });
});

一个示例数据条目：

[
{
"geometry":
{
  "type":"Point","coordinates":[-105.0908374786377,39.707747919880916]
},
"type":"Feature",
"properties":
{
  "id":"USP280226"
},
"id":2,
"layer":
{
  "id":"zipCodeLabels",
  "type":"symbol",
  "source":"zipSource",
  "source-layer":"points_postal_2",
  "layout":
  {
    "text-field":"{id}",
    "text-justify":"center",
    "text-size":10
  },
  "paint":
  {
    "text-color":"black",
    "text-halo-color":"white",
    "text-halo-width":25
  }
}
  },...]

因此，在这种情况下，在邮政编码边界内显示的值是＆＃34; USP280226＆＃34;，我将喜欢出现的是＆＃34; 80226＆＃34; ，所以我想在id值上调用substring（4），但是我没有看到地图上每个显示的邮政编码的简单方法。

我认为MapBox有办法正确地做到这一点，但我还没有能够在文档或示例中找到它。

提前感谢您的帮助。

Answer 1

当前发布的Mapbox-GL-JS版本不支持任何类型的数据功能。您必须离线处理数据，使其包含您要显示的标签。

（我认为即将推出的版本可能支持这种功能，但我不确定。）

编辑“表达式”功能为now released。不幸的是，我觉得它不会对你有所帮助。有一个concat函数，但无法分割我能看到的字符串。

我试图让邮政编码显示在邮政编码边框内

1 个答案: