Leaflet.VectorGrid에서 이진 벡터 타일 표시
소개
Leaflet 에서 바이너리 벡터 타일 (pbf 라든지 mvt) 를 표시하는 플러그인으로서는 Leaflet.MapboxVectorTile 가 자주 사용되고 있습니다만, 유감스럽게도 현행의 version1.x 의 Leaflet 에서는 동작하지 않습니다. Issues에 따르면
Leaflet.VectorGrid supports Leaflet 1.x
라고 하는 것이므로, 여기에서는 최신의 Leaflet 와 Leaflet.VectorGrid 를 사용해 바이너리 벡터 타일을 표시해 봅시다.
해봤어
이런 코드가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello L.VectorGrid.Protobuf</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var map = L.map("map", {
maxZoom: 19,
zoom: 15,
center: [42.7450, 141.9123]
});
L.tileLayer('https://maps.gsi.go.jp/xyz/20180906hokkaido_atsuma_0906do/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
minZoom: 10,
maxNativeZoom: 18
}).addTo(map);
L.vectorGrid.protobuf("https://wata909.github.io/atsuma_mvt/sediment/{z}/{x}/{y}.pbf", {
attribution: "<a href='https://github.com/koukita/2018_09_06_atumatyou' target='_blank'>この地図は地理院地図 平成30年北海道胆振東部地震 厚真川地区 正射画像をトレースした地図です</a>",
maxNativeZoom: 14,
minNativeZoom: 14,
maxZoom: 18,
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
"厚真町堆積土トレース": {
color: "red",
weight: 2
}
}
}).addTo(map);
</script>
</body>
</html>
이런 식으로 표시됩니다.
워킹 데모는 이쪽으로부터 부디.
이런 코드가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello L.VectorGrid.Protobuf</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script>
var map = L.map("map", {
maxZoom: 19,
zoom: 15,
center: [42.7450, 141.9123]
});
L.tileLayer('https://maps.gsi.go.jp/xyz/20180906hokkaido_atsuma_0906do/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
minZoom: 10,
maxNativeZoom: 18
}).addTo(map);
L.vectorGrid.protobuf("https://wata909.github.io/atsuma_mvt/sediment/{z}/{x}/{y}.pbf", {
attribution: "<a href='https://github.com/koukita/2018_09_06_atumatyou' target='_blank'>この地図は地理院地図 平成30年北海道胆振東部地震 厚真川地区 正射画像をトレースした地図です</a>",
maxNativeZoom: 14,
minNativeZoom: 14,
maxZoom: 18,
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
"厚真町堆積土トレース": {
color: "red",
weight: 2
}
}
}).addTo(map);
</script>
</body>
</html>
이런 식으로 표시됩니다.
워킹 데모는 이쪽으로부터 부디.
노트
rendererFactory 및 vectorTileLayerStyles rendererFactory 는 결과를 Canvas 또는 SVG에 그릴지 여부를 결정합니다. 디폴트는 SVG이지만, 미리 그리기 요소가 많은 것을 알고 있다면 Canvas로 해 두면 좋을지도. vectorTileLayerStyles 는 스타일을 결정하는 객체입니다. レイヤー名 를 키로, {color:"red",fillColor:"orange"} 같은 스타일 객체나 스타일 객체를 반환하는 함수를 설정한다. 자세한 것은 여기 . 어려움
바이너리 벡터 타일의 URL만을 가르쳐 주었을 경우, 안에서 어떤 レイヤー名 가 사용되고 있는지를 모르면(자), vectorTilelayerStyles (을)를 기술할 수 없이 채운다.
우선 학습을 겸해 이런 node.js의 스크립트로 사용되고 있는 레이어명의 리스트를 덤프 해 회피했지만, 벡터 타일에 조우할 때마다 이런 작업 하고 있을까 하는 문제도.
inspect.jsconst VectorTile = require('@mapbox/vector-tile').VectorTile;
const Protobuf = require('pbf');
const fs = require('fs');
var data = fs.readFileSync(process.argv[2]);
var layers = new VectorTile(new Protobuf(data)).layers
console.log(Object.keys(layers));
계속한다.
Reference
이 문제에 관하여(Leaflet.VectorGrid에서 이진 벡터 타일 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/frogcat/items/36e9e7525537c748f952
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const VectorTile = require('@mapbox/vector-tile').VectorTile;
const Protobuf = require('pbf');
const fs = require('fs');
var data = fs.readFileSync(process.argv[2]);
var layers = new VectorTile(new Protobuf(data)).layers
console.log(Object.keys(layers));
Reference
이 문제에 관하여(Leaflet.VectorGrid에서 이진 벡터 타일 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/frogcat/items/36e9e7525537c748f952텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
