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

问题描述：

在这项工作中，有几个时刻正确地发生，地图按预期显示，邮政编码边界如预期显示，但我无法如何获得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 
    } 
} 
    },...]

所以在这种情况下，将邮政编码边界内显示的值是“USP280226”，我会像出现是“80226”，所以我想调用子字符串（4）对该id值，但我没有看到一个简单的方法来做到这一点，每个显示在地图上的邮政编码。

我会想象MapBox有一个方法来正确地做到这一点，但我一直没有能够在文档或例子中找到它。

在此先感谢您的帮助。

答

目前发布的Mapbox-GL-JS版本不支持任何类型的数据功能。您将不得不离线处理数据，以便它包含要显示的标签。

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

编辑的“表达”功能now released。不幸的是，我不认为它可以帮助你。有一个concat函数，但没办法拆分我可以看到的字符串。

谢谢你的回答@ steve-bennett。离线处理数据的事情是，我没有数据，它是来自企业边界源的mapbox的“points_postal_2”源层的一部分，我试图'var layer = getLayer（'points_postal_2'）'，但是当我这样做时，'layer'变量是不确定的： - /。我使用'queryRenderedFeatures（）'函数访问数据，但没有看到如何将每个邮政编码与'zipCodeLabels'图层中的邮政编码相关联。任何想法都欢迎，因为我没有在文档中找到答案。 –

你也许可以做一些类似于'querySourceFeatures'的东西，抓取数据并在浏览器中对其进行处理，然后根据它添加一个新的源。虽然表现可能会很糟糕。 –

再次感谢@steve，这就是我的想法（可能是geoJson层），我很欣赏你的想法。 –

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

相关推荐