郵便番号の罫線内に表示する郵便番号を取得しようとしています

この作業でいくつかの瞬間が正しく起こり、地図が期待通りに表示され、郵便番号の境界が予想どおりに表示されていますが、 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"なので、そのid値でsubstring（4）を呼びたいと思いますが、地図上の各郵便番号に対して簡単な方法はありません。

私はMapBoxがこれを正しく行う方法を持っていると思いますが、ドキュメントや例でそれを見つけることができませんでした。

ご協力いただきありがとうございます。

出典

2017-10-19 Jeff Orford

Mapbox-GL-JSの現在リリースされているバージョンでは、データに対するあらゆる種類の機能はサポートされていません。表示するラベルが含まれるように、データをオフラインで処理する必要があります。

（私は、今後のバージョンでは、このような機能をサポートするかもしれないと思うが、私は確かではないよ。）

EDIT「表現」機能が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層）、私はあなたの考えをここに感謝します。 –

郵便番号の罫線内に表示する郵便番号を取得しようとしています

答えて

関連する問題