OpenLayers をダウンロードして、NetBeans の webmapproj にプロジェクトに追加します。
1 OpenLayers 3 のホームページ（http://openlayers.org/）の「LATEST」の文中の「v3.7.0」をクリックします。
2 開いたページ「Downloads for the v3.7.0 release（http://openlayers.org/download/）」の「v3.7.0.zip」ボタンをクリックしてダウンロードします。
3 ファイルを展開します。
user@deb8-vmw:~$ cd ダウンロード
user@deb8-vmw:~/ダウンロード$ ls
---
v3.7.0.zip
---
user@deb8-vmw:~/ダウンロード$ unzip v3.7.0.zip
user@deb8-vmw:~/ダウンロード$ cp -r v3.7.0 ../public_html/webmapproj/public_html/js/libs/
5 GeoServer の tokyo_kuiki レイヤを表示してみます。
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> </body> </html>13-3_ol3-1.html（EPSG:4326 example を参考）
<!DOCTYPE html> <html> <head> <title>Tiled WMS 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="js/libs/v3.7.0/css/ol.css" type="text/css"> <script src="js/libs/v3.7.0/build/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 layers = [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
}),
}).extend([
new ol.control.ScaleLine({
units: 'degrees'
})
]),
layers: layers,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [139.5, 35.7],
zoom: 9
})
});
</script> </body> </html>
5 「プロジェクトを実行」ボタン
jquery.min（1.11.2）
bootstrap.min.css（3.3.5）
bootstrap.min.js（3.3.5）
をダウンロードして追加しておくとオフラインで作業ができます。
0 件のコメント:
コメントを投稿