Maplat Core에서 API에서 지도 표시 간 전환
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 5
우선, 지도를 전환하는 버튼을 추가하기 위해
html 와 css 에 조금 손을 넣자.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maplat Advent Calendar Day5</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="mainview">
<div id="map_div"></div>
</div>
<div class="button">
<button id="gsi">GSI</button>
<button id="osm">OSM</button>
<button id="ojo">御城図</button>
<button id="aki">秋元</button>
</div>
</body>
<script src="app.js"></script>
</html>
app.css
.mainview {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}
.button {
position: absolute;
top: 95%;
bottom: 0%;
left: 5%;
right: 5%;
}
흠, "나는
css 서투르다"라는 것이 한결같이 전해진다 css 네요.그렇게 하는 것은 지도 영역 바로 아래에 버튼 4개 늘어놓은 것입니다.
이어서 모처럼 지도를 전환하기 때문에 지도의 수도 조금 늘려 2개에서 4개로 해봅시다.
apps/maplat_ac_day5.json
{
"home_position": [139.5321, 36.249302],
"default_zoom": 17,
"start_from": "tatebayashi_ojozu",
"sources": [
{
"mapID": "tatebayashi_ojozu",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
},
{
"mapID": "tatebayashi_castle_akimoto",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_castle_akimoto.json"
},
"osm",
"gsi"
]
}
보시다시피
tatebayashi_castle_akimoto와 gsi의 두 가지지도 설정이 sources에 추가되었습니다.tatebayashi_castle_akimoto 는 푸라토 다테바야시 에서 역시 정의되고 있는 아키모토가 지배 시대의 다테바야시성의 그림입니다.오늘 역시 지도 자체의 설정 파일에 대한 자세한 설명은 나중에 돌립니다.
gsi 는 osm 유사한 설정이 사전 설정된 기본 지도로 지리원 지도를 나타냅니다.이 네 개의 지도 사이에서 디스플레이를 전환해 봅시다.
Javascript 로직은 이런 느낌이 됩니다.app.js
import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";
var option = {
appid: "maplat_ac_day5"
};
var app = new MaplatApp(option);
app.waitReady.then(function() {
document.getElementById("gsi").addEventListener("click", function(e) {
app.changeMap("gsi");
});
document.getElementById("osm").addEventListener("click", function(e) {
app.changeMap("osm");
});
document.getElementById("ojo").addEventListener("click", function(e) {
app.changeMap("tatebayashi_ojozu");
});
document.getElementById("aki").addEventListener("click", function(e) {
app.changeMap("tatebayashi_castle_akimoto");
});
});
app.waitReady 에서 Maplat 앱이 작동 준비가 될 때까지 기다린 후 각 버튼에 click 이벤트 핸들러가 주어지고 해당 콜백에서 app.changeMap({mapid}); 의 API가 호출됩니다.이렇게하면 다음과 같이 API를 통한지도 전환이 가능합니다.
잠깐, 앱처럼 되어 왔어요!
내일은 드디어 마커에서도 표시시키고 싶습니다.
Reference
이 문제에 관하여(Maplat Core에서 API에서 지도 표시 간 전환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kochizufan/items/b6e6b6a88ad27aa14371텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
