我試圖讓郵政編碼顯示在郵政編碼邊界內

在這項工作中，有幾個時刻正確地發生，地圖按預期顯示，郵政編碼邊界如預期顯示，但我無法如何獲得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有一個方法來正確地做到這一點，但我一直沒有能夠在文檔或例子中找到它。

在此先感謝您的幫助。

來源

2017-10-19 Jeff Orford

目前發佈的Mapbox-GL-JS版本不支持任何類型的數據功能。您將不得不離線處理數據，以便它包含要顯示的標籤。

（我認爲即將到來的版本可能支持這種功能，但我不能確定。）

編輯的「表達」功能now released。不幸的是，我不認爲它可以幫助你。有一個concat函數，但沒辦法拆分我可以看到的字符串。

來源

2017-10-22 08:23:02

謝謝你的回答@ steve-bennett。離線處理數據的事情是，我沒有數據，它是來自企業邊界源的mapbox的「points_postal_2」源層的一部分，我試圖'var layer = getLayer（'points_postal_2'）'，但是當我這樣做時，'layer'變量是不確定的： - /。我使用'queryRenderedFeatures（）'函數訪問數據，但沒有看到如何將每個郵政編碼與'zipCodeLabels'圖層中的郵政編碼相關聯。任何想法都歡迎，因爲我沒有在文檔中找到答案。 –

你也許可以做一些類似於'querySourceFeatures'的東西，抓取數據並在瀏覽器中對其進行處理，然後根據它添加一個新的源。雖然表現可能會很糟糕。 –

再次感謝@steve，這就是我的想法（可能是geoJson層），我很欣賞你的想法。 –

我試圖讓郵政編碼顯示在郵政編碼邊界內

回答

相關問題