- 8月 05 週五 201109:20
使用 OpenLayers
- 8月 05 週五 201109:19
OpenLayers Connect WMS
如何使用 OpenLayers 介接 WMS
程式碼如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 此區段須依照環境設置路徑 -->
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<!-- 此區段須依照環境設置路徑 -->
<script type="text/javascript">
// 經度
var lon = 5;
// 緯度
var lat = 40;
// 縮放等級
var zoom = 5;
var map, layer;
function init(){
// 指定 Div
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
// WMS URL
"http://vmap0.tiles.osgeo.org/wms/vmap0",
// Layers
{layers: 'basic'} );
// 增加 Layer
map.addLayer(layer);
// 設置中央點
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
// 設置控制項
map.addControl( new OpenLayers.Control.LayerSwitcher() );
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
完成後便可成功呼叫 WMS
- 8月 05 週五 201109:17
OpenLayers 設定 Extent
如何使用 OpenLayers 設定 Extent
程式碼如下
...
// 定義 Extent 範圍須自行定義
var extent = new OpenLayers.Bounds(119.281,21.8901,122.001,25.3033);
...
function init(){
// 將 Extent 設定為 options
var options = {
restrictedExtent: extent
}
...
// 指定 OpenLayers Div 時將 options 帶入
map = new OpenLayers.Map( 'map', options );
...
// Zoom 至自定義的 Extent
map.zoomToExtent(extent);
}
如此便可在載入時 Zoom in 至自定義的 Extent
1
Technology (30)