Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기
소개
웹 애플리케이션에서 지도 데이터를 다루는 API의 대표격은 GoogleMapsAPI인가라고 생각합니다만, 여러가지 제약이 있거나 하기 때문에, 다른 방법으로 지도를 사용하는 방법이 없을까 검색하면 Leaflet라고 하는 JavaScript 라이브러리와 국토 지리원의 데이터 사용할 수 있기 때문에 시도한 결과를 요약합니다.
Leaflet
매우 가벼운 라이브러리로, 바삭바삭 움직이는데 필요한 최소한의 기능이 갖추어져 있습니다.
ぇ tp // // ぇ ぇ tjs. 이 m
국토지리원
GoogleMapsAPI와 유사한 사용법을 제공하는 데이터가 공개되었습니다.
보통의 지도로부터 복수년의 항공 사진, 재해시의 사진 등 흥미로운 것이 가득 있으므로, 이것을 사용하지 않는 것은 아깝다.
htp : /// ps. g. . jp / 로 ゔ ぉ p 면 t / 일단. HTML
빠른 시작을 읽어보세요
Leaflet의 웹 사이트에 빠른 시작이 있으므로 살펴 보겠습니다.
ぇ tp // // ぇ ぇ tjs. 코 m / 에 mp ぇ s / 쿠이 ck-s rt /
...영어였습니다(땀)
그렇지만, 소스 코드를 정리해 보면 무엇인가 알지도 모르기 때문에, 소스 코드 같은 부분을 정리해 보겠습니다.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="mapid"></div>
#mapid { height: 180px; }
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mmap);
var marker = L.marker([51.5, -0.09]).addTo(mmap);
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mmap);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mmap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mmap);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
... 그래, 모르겠어.
지도 이미지 아래에 「See this example stand-alone.」라고 링크가 붙어 있기 때문에, 클릭해 본다.
ぇ tp // // ぇ ぇ tjs. 이 m/에ぁ mpぇs/쿠이 ck-s rt/에에 mpぇ. HTML
표시된 페이지의 소스 코드를 표시하면 다음과 같이 되어 있었다.
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
일단이 소스를 복사하여 바탕 화면에 HTML 파일로 저장하면 ...
할 수 있었다!
...하지만 지금은 원래의 주제 인 국토 지리원의 데이터를 사용하지 않기 때문에 아직 아직부터.
지도 데이터를 변경해 보기
25행째 부근의 코드가 조금 신경이 쓰인다.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
「https://~」로 시작되는 부분과 같은 표기가 국토지리원의 GSI 페이지에 있으므로, 마음대로 재작성해 본다(^-^)
maxZoom는 지리원 도와 정보에 급상승 수준이 써 있기 때문에, 어쩌면 관계 있을지도 모른다.
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
다시 쓰면 다시 읽습니다.
... 아무것도 표시되지 않습니다.
줌 레벨을 점점 낮추어 보면 뭔가 표시되었다.
지도를 이동시키면 일본이 나왔다.
확실히, 중심 좌표가 잘못되어 있기 때문에 틀림없다.
중심 좌표를 변경해 봅니다.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
되어 있는 부분을 작년 국보가 된 마쓰에성의 좌표(35.47507, 133.05075)로 재작성해 본다.
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
...어라, 아직 안돼(땀)
지도의 묘화 이후에 쓰고 있는 것이 방해하고 있을지도 모른다.
「L.marker~mmap.on(~)」까지를 「/* ~ */」로 둘러싸 무효로 해 다시 한번 다시 읽어들입니다.
왔어!
모든 소스 코드
할 수 있었던 사촌까지 필요한 소스 코드에만 정리하면 매우 심플(^-^)
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
</script>
</body>
</html>
좋아, 지금부터 뭐하자! !
Reference
이 문제에 관하여(Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/81cf41c392a36dbacc15
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
매우 가벼운 라이브러리로, 바삭바삭 움직이는데 필요한 최소한의 기능이 갖추어져 있습니다.
ぇ tp // // ぇ ぇ tjs. 이 m
국토지리원
GoogleMapsAPI와 유사한 사용법을 제공하는 데이터가 공개되었습니다.
보통의 지도로부터 복수년의 항공 사진, 재해시의 사진 등 흥미로운 것이 가득 있으므로, 이것을 사용하지 않는 것은 아깝다.
htp : /// ps. g. . jp / 로 ゔ ぉ p 면 t / 일단. HTML
빠른 시작을 읽어보세요
Leaflet의 웹 사이트에 빠른 시작이 있으므로 살펴 보겠습니다.
ぇ tp // // ぇ ぇ tjs. 코 m / 에 mp ぇ s / 쿠이 ck-s rt /
...영어였습니다(땀)
그렇지만, 소스 코드를 정리해 보면 무엇인가 알지도 모르기 때문에, 소스 코드 같은 부분을 정리해 보겠습니다.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="mapid"></div>
#mapid { height: 180px; }
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mmap);
var marker = L.marker([51.5, -0.09]).addTo(mmap);
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mmap);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mmap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mmap);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
... 그래, 모르겠어.
지도 이미지 아래에 「See this example stand-alone.」라고 링크가 붙어 있기 때문에, 클릭해 본다.
ぇ tp // // ぇ ぇ tjs. 이 m/에ぁ mpぇs/쿠이 ck-s rt/에에 mpぇ. HTML
표시된 페이지의 소스 코드를 표시하면 다음과 같이 되어 있었다.
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
일단이 소스를 복사하여 바탕 화면에 HTML 파일로 저장하면 ...
할 수 있었다!
...하지만 지금은 원래의 주제 인 국토 지리원의 데이터를 사용하지 않기 때문에 아직 아직부터.
지도 데이터를 변경해 보기
25행째 부근의 코드가 조금 신경이 쓰인다.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
「https://~」로 시작되는 부분과 같은 표기가 국토지리원의 GSI 페이지에 있으므로, 마음대로 재작성해 본다(^-^)
maxZoom는 지리원 도와 정보에 급상승 수준이 써 있기 때문에, 어쩌면 관계 있을지도 모른다.
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
다시 쓰면 다시 읽습니다.
... 아무것도 표시되지 않습니다.
줌 레벨을 점점 낮추어 보면 뭔가 표시되었다.
지도를 이동시키면 일본이 나왔다.
확실히, 중심 좌표가 잘못되어 있기 때문에 틀림없다.
중심 좌표를 변경해 봅니다.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
되어 있는 부분을 작년 국보가 된 마쓰에성의 좌표(35.47507, 133.05075)로 재작성해 본다.
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
...어라, 아직 안돼(땀)
지도의 묘화 이후에 쓰고 있는 것이 방해하고 있을지도 모른다.
「L.marker~mmap.on(~)」까지를 「/* ~ */」로 둘러싸 무효로 해 다시 한번 다시 읽어들입니다.
왔어!
모든 소스 코드
할 수 있었던 사촌까지 필요한 소스 코드에만 정리하면 매우 심플(^-^)
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
</script>
</body>
</html>
좋아, 지금부터 뭐하자! !
Reference
이 문제에 관하여(Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/81cf41c392a36dbacc15
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Leaflet의 웹 사이트에 빠른 시작이 있으므로 살펴 보겠습니다.
ぇ tp // // ぇ ぇ tjs. 코 m / 에 mp ぇ s / 쿠이 ck-s rt /
...영어였습니다(땀)
그렇지만, 소스 코드를 정리해 보면 무엇인가 알지도 모르기 때문에, 소스 코드 같은 부분을 정리해 보겠습니다.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="mapid"></div>
#mapid { height: 180px; }
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mmap);
var marker = L.marker([51.5, -0.09]).addTo(mmap);
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mmap);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mmap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mmap);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
... 그래, 모르겠어.
지도 이미지 아래에 「See this example stand-alone.」라고 링크가 붙어 있기 때문에, 클릭해 본다.
ぇ tp // // ぇ ぇ tjs. 이 m/에ぁ mpぇs/쿠이 ck-s rt/에에 mpぇ. HTML
표시된 페이지의 소스 코드를 표시하면 다음과 같이 되어 있었다.
example.html
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
일단이 소스를 복사하여 바탕 화면에 HTML 파일로 저장하면 ...
할 수 있었다!
...하지만 지금은 원래의 주제 인 국토 지리원의 데이터를 사용하지 않기 때문에 아직 아직부터.
지도 데이터를 변경해 보기
25행째 부근의 코드가 조금 신경이 쓰인다.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
「https://~」로 시작되는 부분과 같은 표기가 국토지리원의 GSI 페이지에 있으므로, 마음대로 재작성해 본다(^-^)
maxZoom는 지리원 도와 정보에 급상승 수준이 써 있기 때문에, 어쩌면 관계 있을지도 모른다.
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
다시 쓰면 다시 읽습니다.
... 아무것도 표시되지 않습니다.
줌 레벨을 점점 낮추어 보면 뭔가 표시되었다.
지도를 이동시키면 일본이 나왔다.
확실히, 중심 좌표가 잘못되어 있기 때문에 틀림없다.
중심 좌표를 변경해 봅니다.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
되어 있는 부분을 작년 국보가 된 마쓰에성의 좌표(35.47507, 133.05075)로 재작성해 본다.
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
...어라, 아직 안돼(땀)
지도의 묘화 이후에 쓰고 있는 것이 방해하고 있을지도 모른다.
「L.marker~mmap.on(~)」까지를 「/* ~ */」로 둘러싸 무효로 해 다시 한번 다시 읽어들입니다.
왔어!
모든 소스 코드
할 수 있었던 사촌까지 필요한 소스 코드에만 정리하면 매우 심플(^-^)
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
</script>
</body>
</html>
좋아, 지금부터 뭐하자! !
Reference
이 문제에 관하여(Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/81cf41c392a36dbacc15
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
되어 있는 부분을 작년 국보가 된 마쓰에성의 좌표(35.47507, 133.05075)로 재작성해 본다.
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
...어라, 아직 안돼(땀)
지도의 묘화 이후에 쓰고 있는 것이 방해하고 있을지도 모른다.
「L.marker~mmap.on(~)」까지를 「/* ~ */」로 둘러싸 무효로 해 다시 한번 다시 읽어들입니다.
왔어!
모든 소스 코드
할 수 있었던 사촌까지 필요한 소스 코드에만 정리하면 매우 심플(^-^)
example.html<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
</script>
</body>
</html>
좋아, 지금부터 뭐하자! !
Reference
이 문제에 관하여(Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/81cf41c392a36dbacc15
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([35.47507, 133.05075], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 18
}).addTo(mymap);
</script>
</body>
</html>
Reference
이 문제에 관하여(Leaflet 및 국토 지리원의 GSI 타일 데이터를 사용하여지도 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mix_dvd/items/81cf41c392a36dbacc15텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
