경도와 위도 배열을 사용하여지도 상자에 플롯하기

Mapbox API를 웹 응용 프로그램에 구현하려하지만 걸림돌에 도달했습니다. 내 목표는 내 배열에서 경도와 위도를 잡고 좌표에 삽입하는 것입니다. 내가 루프를 통해 루프를 사용하여 시도했지만 작동하지 않는 것. 누구든지 솔루션을 가지고 있다면 크게 감사하겠습니다! 내가 더 mapbox 경험이 없어했지만, this documentation page에 내놓고, 나는 다음과 함께했다경도와 위도 배열을 사용하여지도 상자에 플롯하기

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title>Draw GeoJSON points</title> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' /> 
    <style> 
     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 

<div id='map'></div> 
<script> 

var longLat = [ 
[53.515333, -6.190796], 
[53.342686, -6.403656], 
[51.678091, -9.624023], 
[52.768293, -1.560059] 
]; 

mapboxgl.accessToken = 'undefined'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/light-v9', 
    center: [-96, 37.8], 
    zoom: 3 
}); 

map.on('load', function() { 

    map.addLayer({ 
     "id": "points", 
     "type": "symbol", 
     "source": { 
      "type": "geojson", 
      "data": { 
       "type": "FeatureCollection", 
       "features": [{ 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [-77.03238901390978, 38.913188059745586] 
        }, 
        "properties": { 
         "title": "Mapbox DC", 
         "icon": "monument" 
        } 
       }, { 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [-122.414, 37.776] 
        }, 
        "properties": { 
         "title": "Mapbox SF", 
         "icon": "harbor" 
        } 
       }] 
      } 
     }, 
     "layout": { 
      "icon-image": "{icon}-15", 
      "text-field": "{title}", 
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
      "text-offset": [0, 0.6], 
      "text-anchor": "top" 
     } 
    }); 
}); 
</script> 

</body> 
</html>

출처

2017-12-04 GrandeurH

내가 토큰 내 접근을했다 참고;

당신은 그와 같은 루프 내에서 기능 모음 (배열)를 작성해야합니다 : 당신은 속성 (아이콘 및 제목)을 건너 뛸 수있는 경우

var featureCollection = []; // Initialize empty collection 

// Your longLat collection 
var longLat = [ 
    [53.515333, -6.190796], 
    [53.342686, -6.403656], 
    [51.678091, -9.624023], 
    [52.768293, -1.560059] 
]; 

// for every item object within longLat 
for(var itemIndex in longLat) { 
    // push new feature to the collection 
    featureCollection.push({ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": longLat[itemIndex] 
    }, 
    "properties": { 
     "title": "Mapbox DC", 
     "icon": "monument" 
    } 
    }); 
}

을 시도해보십시오. 지금 그들은 하드 코딩되어 있습니다.

그런 다음지도 자체에이 방법을 전달합니다

map.on('load', function() { 
    map.addLayer({ 
    "id": "points", 
    "type": "symbol", 
    "source": { 
    "type": "geojson", 
     "data": { 
     "type": "FeatureCollection", 
     "features": featureCollection 
     } 
    }, 
    "layout": { 
     "icon-image": "{icon}-15", 
     "text-field": "{title}", 
     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
     "text-offset": [0, 0.6], 
     "text-anchor": "top" 
    } 
    }); 
});

나는 모든 일이 무슨 뜻인지 모르겠어요,하지만 그건 그냥에서 촬영 한 것 (예를 들어 모든 아이콘 layout을 같은) 언급 한 예문이므로 아무 것도 깨뜨릴 수 없습니다.

출처

2017-12-04 18:19:08 entio

대단히 감사합니다. 코드를 구현해 주셔서 대단히 감사 드리며, 어떻게 진행되는지 알려 드리겠습니다. – GrandeurH

안녕하세요. @GrandeurH. 그냥 여기에 코드를 썼다는 것을 명심하십시오, 그래서 그것은 전혀 테스트되지 않습니다. 오타 경고. 코드를보고 가능한 오류를 수정하십시오. – entio

안녕하세요,하지만 난 "입력 데이터가 잘못된 GEOJSON"어떤 이유로 오류가 발생하는 코드를 구현했는데? – GrandeurH

경도와 위도 배열을 사용하여지도 상자에 플롯하기

답변

관련 문제