Skip to content

Instantly share code, notes, and snippets.

@tnaka78

tnaka78/GSIVectorTileSimpleExample.html

Created September 6, 2015 14:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tnaka78/1491554b926d9d774e26 to your computer and use it in GitHub Desktop.
Save tnaka78/1491554b926d9d774e26 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers 3を使って地理院ベクトルタイル（道路中心線・鉄道中心線・河川中心線）を表示させるコード
Raw
GSIVectorTileSimpleExample.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment