webmapproj プロジェクトに HTML ファイル（16-3_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> <div><a href="./15-3_ol3-1.html">15-3_ol3-1.html</a></div> <div><a href="./16-3_ol3-1.html">16-3_ol3-1.html</a></div> </body> </html>
「16-3_ol3-1.html」
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>あきる野市地図</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>
<script>
var projection = new ol.proj.Projection({
code: 'EPSG:2451',
extent: [-85044.6807, -406697.3730, 96656.4509, -8388.7498]
});
var extent = [-63041, -34468, -45430, -24309];
var layers = [
new ol.layer.Tile({
extent: extent,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
attributions: [new ol.Attribution({
html: '国土数値情報'
})],
params: {
'LAYERS': 'tokyo_kuiki',
'SRS': 'EPSG:4326',
'TILED': true,
'VERSION': '1.1.1'
},
serverType: 'geoserver',
})
}),
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-2',
'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: [-54235, -29388],
extent: extent,
zoom: 5,
})
});
</script> </body> </html>
0 件のコメント:
コメントを投稿