|
<!doctype html> |
|
<html lang="ja"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css"> |
|
<style> |
|
.map { |
|
width: 100%; |
|
max-width: 600px; |
|
height: 400px; |
|
} |
|
.map, .control { |
|
float: left; |
|
} |
|
li { |
|
display: block; |
|
} |
|
</style> |
|
<script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/javascript"></script> |
|
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> |
|
<title>地理院地図ベクトルタイル表示サンプル</title> |
|
</head> |
|
<body> |
|
<h2>地理院地図ベクトルタイル表示サンプル</h2> |
|
<div id="map" class="map"></div> |
|
<div id="control" class="control"> |
|
<ul> |
|
<li> |
|
<input id="road_layer_visible" type="checkbox" onclick="changeRoadLayerVisible()" checked/> |
|
<label for="road_layer_visible" class="visible">道路中心線</label> |
|
</li> |
|
<li> |
|
<input id="rail_layer_visible" type="checkbox" onclick="changeRailLayerVisible()" checked/> |
|
<label for="rail_layer_visible" class="visible">鉄道中心線</label> |
|
</li> |
|
<li> |
|
<input id="river_layer_visible" type="checkbox" onclick="changeRiverLayerVisible()" checked/> |
|
<label for="river_layer_visible" class="visible">河川中心線</label> |
|
</li> |
|
</ul> |
|
</div> |
|
<script type="text/javascript"> |
|
var baseLayer = new ol.layer.Tile({ |
|
source: new ol.source.XYZ({ |
|
attributions: [ |
|
new ol.Attribution({ |
|
html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" |
|
}) |
|
], |
|
projection: "EPSG:3857", |
|
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png" |
|
}) |
|
}); |
|
var gsiAttribution = new ol.Attribution({ |
|
html: "<a href=\"https://github.com/gsi-cyberjapan/vector-tile-experiment\">国土地理院ベクトルタイル提供実験</a>" |
|
}); |
|
var roadLayer = new ol.layer.Vector({ |
|
source: new ol.source.TileVector({ |
|
attributions: [gsiAttribution], |
|
format: new ol.format.GeoJSON(), |
|
projection: 'EPSG:3857', |
|
tileGrid: new ol.tilegrid.createXYZ(), |
|
url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_rdcl/{z}/{x}/{y}.geojson' |
|
}), |
|
style: new ol.style.Style({ |
|
stroke: new ol.style.Stroke({ |
|
color: 'green', |
|
width: 5, |
|
lineCap: "butt" |
|
}) |
|
}) |
|
}); |
|
var railLayer = new ol.layer.Vector({ |
|
source: new ol.source.TileVector({ |
|
attributions: [gsiAttribution], |
|
format: new ol.format.GeoJSON(), |
|
projection: 'EPSG:3857', |
|
tileGrid: new ol.tilegrid.createXYZ(), |
|
url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_railcl/{z}/{x}/{y}.geojson' |
|
}), |
|
style: new ol.style.Style({ |
|
stroke: new ol.style.Stroke({ |
|
color: 'yellow', |
|
width: 5, |
|
lineCap: "butt" |
|
}) |
|
}) |
|
}); |
|
var riverLayer = new ol.layer.Vector({ |
|
source: new ol.source.TileVector({ |
|
attributions: [gsiAttribution], |
|
format: new ol.format.GeoJSON(), |
|
projection: 'EPSG:3857', |
|
tileGrid: new ol.tilegrid.createXYZ(), |
|
url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_rvrcl/{z}/{x}/{y}.geojson' |
|
}), |
|
style: new ol.style.Style({ |
|
stroke: new ol.style.Stroke({ |
|
color: 'blue', |
|
width: 5, |
|
lineCap: "butt" |
|
}) |
|
}) |
|
}); |
|
var map = new ol.Map({ |
|
target: 'map', |
|
controls: [ |
|
new ol.control.Attribution({ |
|
collapsible: false |
|
}) |
|
], |
|
layers: [ |
|
baseLayer, |
|
roadLayer, |
|
railLayer, |
|
riverLayer |
|
], |
|
view: new ol.View({ |
|
center: ol.proj.transform([139.669, 35.59], 'EPSG:4326', 'EPSG:3857'), |
|
zoom: 16, |
|
maxZoom: 16, |
|
minZoom: 16 |
|
}) |
|
}); |
|
function changeRoadLayerVisible() { |
|
roadLayer.setVisible($("#road_layer_visible").prop("checked")); |
|
} |
|
function changeRailLayerVisible() { |
|
railLayer.setVisible($("#rail_layer_visible").prop("checked")); |
|
} |
|
function changeRiverLayerVisible() { |
|
riverLayer.setVisible($("#river_layer_visible").prop("checked")); |
|
} |
|
</script> |
|
</body> |
|
</html> |
