API 맵에 Macbox GL JS 맵 연동
9930 단어 mapbox-gl-jsYOLPJavaScriptmapbox
개요
소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Twin maps</title>
<script src="https://map.yahooapis.jp/js/V1/jsapi?appid=___YOUR_APPLICATION_ID___"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { position:absolute; margin:0; padding:0; width:100%; height:100%; }
#ymap { position:absolute; top:0; left:0; width:50%; height:100%; }
#bmap { position:absolute; top:0; left:50%; width:50%; height:100%; }
</style>
</head>
<body>
<div id='ymap'></div>
<div id='bmap'></div>
<script>
// YOLP 地図を表示
var ymap = new Y.Map('ymap', {
configure: {
doubleClickZoom: true,
scrollWheelZoom: true,
continuousZoom: true
}
});
ymap.drawMap(new Y.LatLng(35.1707925, 136.882763), 16, Y.LayerSetId.NORMAL);
// YOLP 地図の移動後の処理
ymap.bind('moveend', function(){
// YOLP 地図の中心緯度経度に Mapbox 地図を移動
let c = ymap.getCenter();
bmap.panTo(new mapboxgl.LngLat(c.lng(), c.lat()));
});
// YOLP 地図の縮尺変更後の処理
ymap.bind('zoomend', function(){
// YOLP 地図のズームレベルに Mapbox 地図を合わせる
let z = ymap.getZoom();
bmap.setZoom(z - 2); // ズームレベル数値が2段階ほどちがう
});
// Mapbox のアクセストークンをセット
mapboxgl.accessToken = '___YOUR_MAPBOX_ACCESS_TOKEN___';
// Mapbox 地図を表示
var bmap = new mapboxgl.Map({
container: 'bmap', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [136.882763, 35.1707925],
zoom: 14,
});
</script>
</body>
</html>
캡처
참고 자료
Reference
이 문제에 관하여(API 맵에 Macbox GL JS 맵 연동), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/niwasawa/items/7e88278489cd0780e843텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
