우편 번호 테두리 내에 표시 할 우편 번호를 얻으려고합니다.

이 작업에서 여러 순간이 올바르게 진행되고 예상대로 맵이 표시되며 우편 번호 경계가 예상대로 표시되지만 그림을 그릴 수 없습니다. 각 우편 번호 범위 내에서 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의 현재 출시 된 버전은 데이터에 어떤 종류의 기능도 지원하지 않습니다. 표시하려는 레이블이 포함되도록 데이터를 오프라인으로 처리해야합니다.

는 (I는 향후 버전은 기능의이 종류를 지원할 수 있다고 생각하지만, 나는 확실하지 않다.)은 "표현"기능이 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 레이어), 당신의 생각을 여기에 감사드립니다. –

우편 번호 테두리 내에 표시 할 우편 번호를 얻으려고합니다.

답변

관련 문제