KML形式の地物情報をLeafletに取り込みます。
KMLファイルの準備
簡単なKMLファイルを準備する。
KMLファイルの詳細についてはこちら
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>東京都マップ</name>
<description/>
<Folder>
<name>東京都マップ</name>
<Placemark>
<name>新宿駅</name>
<description>35.689564,139.700410</description>
<Point>
<coordinates>
139.700410,35.689564,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>新宿御苑</name>
<description>35.685273,139.709422</description>
<Point>
<coordinates>
139.709422,35.685273,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>明治神宮</name>
<description>35.677564,139.699337</description>
<Point>
<coordinates>
139.699337,35.677564,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>新国立劇場</name>
<description>35.682588,139.685904</description>
<Point>
<coordinates>
139.685904,35.682588,0
</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
使用するプラグイン
今回はMITライセンスのLeaflet KML layer pluginを利用します。
Leaflet の公式サイト https://leafletjs.com から入手します。
「Plugins」をクリックします。
「Overlay data formats」をクリックします。
「leaflet-kml」をクリックします。
「Code▼」のプルダウンメニューから「Download ZIP」をクリックします。
- ライセンスはMIT
使い方
まず、HTMLファイルを作成し、L.KML.jsファイルを読み込みます。
<script src="./L.KML.js"></script>
サンプルのdata.kmlデータを取得して、DOMParserのparseFromString()メソッドを利用することで、XML文字列からDocumentオブジェクトを作成します。L.KML関数の引数として、Documentオブジェクトを渡します。
fetch('./data.kml')
.then(res => res.text())
.then(kmltext => {
const _parser = new DOMParser();
const _kml = _parser.parseFromString(kmltext, 'text/xml');
const _track = new L.KML(_kml);
_map.addLayer(_track);
});
全体コード
<html lang="ja">
<head>
<title>Leafletのマーカー（KML）の表示</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="./L.KML.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
//表示位置を設定
var _map = L.map('map');
//初期表示時に中心座標とズームレベルを設定
_map.setView([35.6895, 139.69172], 10);
//初期表示時の表示地図を設定
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
}).addTo(_map);
//マーカー（KML）の表示
fetch('./data.kml')
.then(res => res.text())
.then(kmltext => {
const _parser = new DOMParser();
const _kml = _parser.parseFromString(kmltext, 'text/xml');
const _track = new L.KML(_kml);
_map.addLayer(_track);
});
</script>
</body>
</html>
コメント