国土地理院のホームページの、「地理空間情報ライブラリ」内の「地理院地図」 をクリックします。
15-2 地理院タイルを用いた開発
地理院地図左上の「情報」 -> 「地理院地図について」 -> 「技術情報」をクリックします。
地理院タイルを用いた開発
（http://maps.gsi.go.jp/development/index.html）
の右側に「利用規約」がありますので読んでください。
ページの左側に目次があります。
「地理院タイル仕様」には、基本的な仕様が記載されています。
「地理院タイル一覧」には、提供されているタイルの情報が記載されています。
「地理院タイルを用いたサイト構築サンプル集」には、JavaScript ライブラリのサンプルがます。
15-3 OpenLayers3 であきる野市周辺の「写真」（画像）を表示
「地理院タイル一覧」
http://maps.gsi.go.jp/development/ichiran.html
の「写真」の「タイルID」が「ort-1」のタイルを利用して、あきる野市周辺の画像を表示します。
地理院タイルを用いたサイト構築サンプル集
（http://maps.gsi.go.jp/development/sample.html）
の「OpenLayers3」を参考にします。
2 「新規ファイル」ボタンをクリック。
「index.html」
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<body> <div>TODO write content</div> <div><a href="./13-3_ol3-1.html">13-3_ol3-1.html</a></div> <div><a href="./14-7_ol3-1.html">14-7_ol3-1.html</a></div> <div><a href="./15-3_ol3-1.html">15-3_ol3-1.html</a></div> </body> </html>
「15-3_ol3-1.html」（XYZ example を参考）
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>XYZ Example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
</head> <body> <div class="container-fluid">
<div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div>
</div>
<script>
var attribution = new ol.Attribution({
html: '<a href="http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' +
'target="_blank">国土地理院</a>'
});
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'
})
})
],
view: new ol.View({
// center: [-52767, -27571],
center: [15501225, 4266286],
zoom: 13
})
});
</script> </body> </html>
5 「プロジェクトを実行」ボタン
をクリックすると、Chromium に表示されます。
0 件のコメント:
コメントを投稿