// 지도를 생성합니다.var map =newrouto.maps.Map("map");// GeoJSON 을 요청합니다.fetch('./routo-data.json').then(function(response){return response.json();}).then(function(geojson){// 불러온 GeoJSON에서 공간 객체 목록을 지도에 추가합니다.
map.data.addGeoJson(geojson);}).catch(function(error){// 에러를 출력합니다.
console.log(error);alert('geojson 파일을 가져와서 표시하는데 오류가 발생하였습니다.');});
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>공간객체 불러오기</title><style>html,
body{margin: 0;padding: 0;width: 100%;height: 100%;}.map{width: 100%;height: 400px;position: relative;}</style><style>.output-box{width: 97%;height: 45%;border: 1px solid #000;margin: 10px;padding: 10px;overflow-y: auto;font-size: 12px;line-height: 18px;}</style></head><body><h2>공간객체 불러오기</h2><hr/><p>
지도에 GeoJSON 형태의 문자열을 불러와서 공간객체를 생성하는 예제입니다. GeoJSON 은 공간 객체의 목록을 표시하기 위한 JSON 형태의 문자열입니다.
</p><divid="map"class="map"></div><divid="output"class="output-box">
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[127.0586339,37.507009000000025]},"properties":null},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[127.03863390000001,37.505009000000015],[127.03863390000001,37.487008999999986],[127.0486339,37.487008999999986],[127.0486339,37.507009000000025]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[127.0586339,37.507009000000025],[127.0586339,37.487008999999986],[127.0886339,37.487008999999986],[127.0886339,37.507009000000025],[127.0586339,37.507009000000025]],[[127.06863389999998,37.49700899999999],[127.06863389999998,37.49200899999998],[127.07863390000001,37.49200899999998],[127.07863390000001,37.49700899999999],[127.06863389999998,37.49700899999999]]]},"properties":null}]}
</div></body><scriptsrc="https://api.routo.com/v2/maps/map?key=12290cd4-7094-43e8-a936-8819196d0332"></script><script>// 지도를 생성합니다.var map =newrouto.maps.Map("map");// GeoJSON 을 요청합니다.fetch('./routo-data.json').then(function(response){return response.json();}).then(function(geojson){// 불러온 GeoJSON에서 공간 객체 목록을 지도에 추가합니다.
map.data.addGeoJson(geojson);}).catch(function(error){// 에러를 출력합니다.
console.log(error);alert('geojson 파일을 가져와서 표시하는데 오류가 발생하였습니다.');});</script></html>