dayjournal | Leaflet #017 – 外部ファイルのKMLでマーカー表示

KMLとは、アプリケーション・プログラムにおける三次元地理空間情報の表示を管理するために開発された、XMLベースのマークアップ言語です。GeoJSONと同様に複数のGISデータを扱う時に便利です。

KMLのデータを用意するための方法をいくつか紹介します。

①QGISで作成する。 QGISで作成したデータを「名前をつけて保存」でKML形式で保存します。

②既存データを利用・変換する。国土数値情報などの既存データを変換して利用する。データ利用の際は利用条件を確認してください。

KMLをLeafletに読み込むためには「leaflet-omnivore」プラグインをダウンロードします。


<script src="./plugin/leaflet-omnivore-master/leaflet-omnivore.min.js"></script>

LeafletでKMLでマーカー表示するためには下記のように記述します。

index.html


<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>

<script src="./Library/leaflet-0.7.3/leaflet.js"></script>
<link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet"/>

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;amp;region=JP"></script>
<script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>
<script src="./plugin/leaflet-omnivore-master/leaflet-omnivore.min.js"></script>

<link href="./css/stylesheet.css" rel="stylesheet"/>

</head>
<body>

<div id="map"></div>

<script src="./js/script.js"></script>

</body>
</html>

stylesheet.css


html, body {
height: 100%;
padding: 0;
margin: 0;
}

#map {
z-index: 0;
height: 100%;
}

sample.kml


<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>sample</name>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#sample">
<SimpleData name="id">1</SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>139.75363077918024,35.698488070717588</coordinates></Point>
</Placemark>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#sample">
<SimpleData name="id">2</SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>139.80567084573369,35.697518760190611</coordinates></Point>
</Placemark>
<Placemark>
<ExtendedData><SchemaData schemaUrl="#sample">
<SimpleData name="id">3</SimpleData>
</SchemaData></ExtendedData>
<Point><coordinates>139.75840509721266,35.674057853016421</coordinates></Point>
</Placemark>
</Folder>
<Schema name="sample" id="sample">
<SimpleField name="id" type="int"></SimpleField>
</Schema>
</Document></kml>

script.js


var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');

var map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: false,
layers: [t_pale]
});

var ParkIcon = L.icon({
iconUrl: './img/Park.png',
iconRetinaUrl: './img/Park.png',
iconSize: [50, 50],
iconAnchor: [25, 20],
popupAnchor: [0, -30]
});

var Map_KML_Property = L.geoJson(null, {
pointToLayer: function (feature, layer) {
return L.marker(layer, { icon: ParkIcon });
}}).addTo(map);

var Map_KML = omnivore.kml('./files/sample.kml', null, Map_KML_Property);

var Map_BaseLayer = {
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ": t_ort,
"OpenStreetMap 標準": o_std,
"GoogleMap 標準": g_roadmap,
"GoogleMap オルソ": g_satellite,
"GoogleMap ハイブリッド": g_hybrid
};

L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map);

L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map);

index.htmlを実行すると下記のようにブラウザで表示されます。 ※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。（承認番号　平27情複、第224号）」

表示させるファイルを変更したい場合： var Map_KML = omnivore.kml～のリンク先を変更します。


var Map_KML = omnivore.kml('./files/data.kml', null, Map_KML_Property);

マーカーアイコンを変更したい場合： var ParkIcon = L.icon～でアイコンの画像の変更をします。 var Map_KML_Property = L.geoJson～のアイコン名を変更します。 ※KMLのプロパティはL.geoJsonで割り当てることができます。


var PointIcon = L.icon({
iconUrl: './img/Point.png',
iconRetinaUrl: './img/Point.png',
iconSize: [50, 50],
iconAnchor: [25, 20],
popupAnchor: [0, -30]
});

var Map_KML_Property = L.geoJson(null, {
pointToLayer: function (feature, layer) {
return L.marker(layer, { icon: PointIcon });
}}).addTo(map);

参考文献
Leaflet
leaflet-omnivore

dayjournal memo

Leaflet #017 – 外部ファイルのKMLでマーカー表示

Yasunori Kirimoto 2015/6/19