Google Maps에 철도선을 그리자.
이런 식으로 Google Maps에 철도선을 그리고 싶었습니까?
(도쿄의 게이오선을 그린 상태)
물론 좌표 데이터만 있으면 polyline으로 그릴 수 있습니다만, 그 데이터를 어디에서 입수할지가 문제입니다.
1. 역의 위도 경도를 연결하는 방법
역 스파아토 웹 서비스의 유상판 를 사용하면, 노선명으로 지정한 노선상의 전역 정보(위도 경도 포함)를 취득하거나, 경로 탐색해 그 경로로 통과하는 전역의 정보를 취득할 수 있습니다. 역을 연결하는 꺾은선으로 좋다면, 단순히 이 위도 경도를 polyline으로 연결하면 됩니다.
2. 국토 수치 정보를 사용하는 방법
국토교통성이 공개하고 있는 국토 수치 정보 중에는 철도 데이터라고 하는 것이 있습니다.
국토 수치 정보의 라이센스는 데이터 마다 정해져 있어, 물건에 따라서는 상용 이용 불가이거나 하는 것입니다만, 본 기사의 방법으로 철도 데이터를 묘화하는 것은
(3) 상용 불가의 「국토 정보」라도, 도화하거나, GIS에 의해 공간 연산한 결과(데이터베이스가 아닌 것)에 대해서는, 원전 및 가공자명을 명시하는 것에 의해, 신청 없이 재배포 가능 입니다. 단, 이용의 성과물이 GIS 형식이나 엑셀 형식 등의 데이터베이스인 경우에는 데이터베이스의 저작권 침해의 우려가 있으므로 국토정보 다운로드 서비스 사무국에 문의해 주십시오.
htp : / / nlftp. mぃt. . jp / ksj / 오테 r / 주전자. HTML
에 해당하므로 상용 이용 가능하다고 나는 해석하고 있습니다.
그런데, 여기 URL 로부터 N02-17_GML.zip (2017년)를 다운로드하면, 아래와 같이 여러가지 형식의 파일이 들어가 있습니다.
KS-META-N02-17.xml
N02-17.xml
N02-17_RailroadSection.dbf
N02-17_RailroadSection.geojson
N02-17_RailroadSection.prj
N02-17_RailroadSection.shp
N02-17_RailroadSection.shx
N02-17_Station.dbf
N02-17_Station.geojson
N02-17_Station.prj
N02-17_Station.shp
N02-17_Station.shx
이 안의 N02-17_Station.geojson를 웹 서버에 배치하고, 같은 디렉토리에 아래와 같은 index.html를 작성해 배치합니다. ( アクセスキーを入れてね 부분을 다시 작성하십시오)
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>地図</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=アクセスキーを入れてね"></script>
<script>
var map;
$(function() {
var center = new google.maps.LatLng(35.6813095277778, 139.76723425);
var gmap_options = {
zoom: 11,
center: center,
};
map = new google.maps.Map(document.getElementById("gmap"), gmap_options);
map.data.loadGeoJson("./N02-17_RailroadSection.geojson");
// スタイルの設定
map.data.setStyle(function(feature) {
return ({
strokeColor: "#0000ff",
strokeWeight: 2,
clickable: true,
zIndex: 1
});
});
});
</script>
<style>
html, body { height: 100%; }
div#gmap { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="gmap"></div>
</body>
</html>
브라우저에서 액세스해 보면 몇 초 후에 전국의 노선이 모두 표시될 것입니다. 어때?
(웹 서버에 배치하지 않고 file:// 체계에서 열면 오류가 발생한다고 생각합니다.
국토 수치 정보가 geojson 형식으로 배포해 주고 있어, Google Maps에 geojson를 draw 하는 메소드가 있었기 때문에 일발이었지요. 그리고는 geojson 파일에서 그리고 싶은 부분을 빼내는 등, 필요에 따라 가공하면 좋을까 생각합니다.
이상입니다.
Reference
이 문제에 관하여(Google Maps에 철도선을 그리자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/aosho235/items/dc1154c7a22721ae9877
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
국토교통성이 공개하고 있는 국토 수치 정보 중에는 철도 데이터라고 하는 것이 있습니다.
국토 수치 정보의 라이센스는 데이터 마다 정해져 있어, 물건에 따라서는 상용 이용 불가이거나 하는 것입니다만, 본 기사의 방법으로 철도 데이터를 묘화하는 것은
(3) 상용 불가의 「국토 정보」라도, 도화하거나, GIS에 의해 공간 연산한 결과(데이터베이스가 아닌 것)에 대해서는, 원전 및 가공자명을 명시하는 것에 의해, 신청 없이 재배포 가능 입니다. 단, 이용의 성과물이 GIS 형식이나 엑셀 형식 등의 데이터베이스인 경우에는 데이터베이스의 저작권 침해의 우려가 있으므로 국토정보 다운로드 서비스 사무국에 문의해 주십시오.
htp : / / nlftp. mぃt. . jp / ksj / 오테 r / 주전자. HTML
에 해당하므로 상용 이용 가능하다고 나는 해석하고 있습니다.
그런데, 여기 URL 로부터
N02-17_GML.zip (2017년)를 다운로드하면, 아래와 같이 여러가지 형식의 파일이 들어가 있습니다.KS-META-N02-17.xml
N02-17.xml
N02-17_RailroadSection.dbf
N02-17_RailroadSection.geojson
N02-17_RailroadSection.prj
N02-17_RailroadSection.shp
N02-17_RailroadSection.shx
N02-17_Station.dbf
N02-17_Station.geojson
N02-17_Station.prj
N02-17_Station.shp
N02-17_Station.shx
이 안의
N02-17_Station.geojson를 웹 서버에 배치하고, 같은 디렉토리에 아래와 같은 index.html를 작성해 배치합니다. ( アクセスキーを入れてね 부분을 다시 작성하십시오)index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>地図</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=アクセスキーを入れてね"></script>
<script>
var map;
$(function() {
var center = new google.maps.LatLng(35.6813095277778, 139.76723425);
var gmap_options = {
zoom: 11,
center: center,
};
map = new google.maps.Map(document.getElementById("gmap"), gmap_options);
map.data.loadGeoJson("./N02-17_RailroadSection.geojson");
// スタイルの設定
map.data.setStyle(function(feature) {
return ({
strokeColor: "#0000ff",
strokeWeight: 2,
clickable: true,
zIndex: 1
});
});
});
</script>
<style>
html, body { height: 100%; }
div#gmap { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="gmap"></div>
</body>
</html>
브라우저에서 액세스해 보면 몇 초 후에 전국의 노선이 모두 표시될 것입니다. 어때?
(웹 서버에 배치하지 않고
file:// 체계에서 열면 오류가 발생한다고 생각합니다.국토 수치 정보가 geojson 형식으로 배포해 주고 있어, Google Maps에 geojson를 draw 하는 메소드가 있었기 때문에 일발이었지요. 그리고는 geojson 파일에서 그리고 싶은 부분을 빼내는 등, 필요에 따라 가공하면 좋을까 생각합니다.
이상입니다.
Reference
이 문제에 관하여(Google Maps에 철도선을 그리자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/aosho235/items/dc1154c7a22721ae9877텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
