Maplat UI를 사용하면서 Maplat Core의 API 작업을 수행하는 방법
동기가 없어지고 있다고 하는 것보다는, 끝이 보여 왔기 때문에 불타는 증후군 기미인 것과, Maplat의 앞의 개발에 착수하고 싶어서 끄덕이고 있다고 하는 곳입니다.
하지만 그래도 1시간 이내에 기사를 올리면 어떻게든 1일 늦게 끝나기 때문에 어떻게든 23일째 해 갑시다.
오늘은 UI 첨부의 Maplat를 사용하면서, API를 사용한 제어도 해 봅시다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => Maplat Advent Calendar Day 23
아니, 정직별로 어렵지 않네요.
Maplat UI를 사용할 때,
MaplatUI의 객체 생성.
var app = new MaplatUi(option);
app.waitReady.then(function() {
});
이러한 느낌으로 Maplat UI의 객체를 생성합니다만, 실은 이 Maplat UI 객체
app 에 대해, app.core 에 Maplat Core 객체가 들어가 있는 것입니다.그래서 이
app.core 에 Advent Calendar의 전반에서 설명한 API를 실행해 주면(자) , 보통으로 API 제어할 수 있습니다.그래서 아래와 같은 느낌으로 HTML에 버튼을 추가하고
app.js 안에서 app.core.changeMap 로 맵을 전환하면 외부에서 맵이 전환됩니다.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maplat Advent Calendar Day 23</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%;
}
app.js
import "@maplat/ui/dist/maplat.css";
import { MaplatUi } from "@maplat/ui";
var option = {
appid: "maplat_ac_day23"
};
var app = new MaplatUi(option);
app.waitReady.then(function() {
document.getElementById("gsi").addEventListener("click", function(e) {
app.core.changeMap("gsi");
});
document.getElementById("osm").addEventListener("click", function(e) {
app.core.changeMap("osm");
});
document.getElementById("ojo").addEventListener("click", function(e) {
app.core.changeMap("tatebayashi_ojozu");
});
document.getElementById("aki").addEventListener("click", function(e) {
app.core.changeMap("tatebayashi_castle_akimoto");
});
});
동작은 다음과 같은 느낌이네요.
아무렇지도 않게, 버튼 측에서 제어해도 제대로 UI 측의 지도의 선택 상황도 갱신되고 있는 것을 알 수 있다고 생각합니다.
내일은 Maplat UI에서 POI를 추가하는 방법을 설명하고 싶습니다.
Reference
이 문제에 관하여(Maplat UI를 사용하면서 Maplat Core의 API 작업을 수행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kochizufan/items/e1e07107703fe8234581텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
