14-8 OenLayers3 で地図を表示
webmapproj プロジェクトに HTML ファイル（14-7_ol3-1.html） を追加します。
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> </body> </html>
「14-7_ol3-1.html」（Single image WMS with Proj4js projection example を参考）
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>Single image WMS with Proj4js projection 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> <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script> <script src="http://epsg.io/2451.js"></script>
</head> <body> <div class="container-fluid">
<div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div>
</div>
var projection = new ol.proj.Projection({
code: 'EPSG:2451',
extent: [-85044.6807, -406697.3730, 96656.4509, -8388.7498]
});
var extent = [-64127, -36884, -41407, -18259];
var layers = [
new ol.layer.Tile({
extent: extent,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
attributions: [new ol.Attribution({
html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
'kikakuchousei40182.html" target="_blank">' +
'国土地理院 基盤地図情報</a>'
})],
params: {'LAYERS': 'akiruno_kukaku', 'TILED': true, 'VERSION': '1.1.1'},
serverType: 'geoserver',
})
})
];
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
}),
}).extend([
new ol.control.ScaleLine()
]),
layers: layers,
target: 'map',
view: new ol.View({
projection: projection,
center: [-52767, -27571],
extent: extent,
zoom: 5
})
});
</script> </body> </html>
5 「プロジェクトを実行」ボタン
0 件のコメント:
コメントを投稿