<style type="text/css">
#map {
width: 640px;
height: 475px;
border: 1px solid black;
}
.olControlPanel div {
display:block;
position: absolute;
top: 0px;
left: 190px;
width: 60px;
height: 23px;
margin: 5px;
}
.olControlPanel .olControlMouseDefaultsItemActive {
background-image: url("/openlayers/img/Pan.gif");
}
.olControlPanel .olControlMouseDefaultsItemInactive {
background-image: url("/openlayers/img/PanSelected.gif");
}
.olControlPanel .olControlZoomBoxItemInactive {
width: 60px;
height: 23px;
position: absolute;
top: 0px;
left: 250px;
background-image: url("/openlayers/img/ZoomInSelected.gif");
}
.olControlPanel .olControlZoomBoxItemActive {
width: 60px;
height: 23px;
position: absolute;
top: 0px;
left: 250px;
background-image: url("/openlayers/img/ZoomIn.gif");
}
.olControlPanel .olControlSelectFeatureItemInactive {
width: 60px;
height: 23px;
position: absolute;
top: 0px;
left: 310px;
background-image: url("/openlayers/img/InfoSelected.gif");
}
.olControlPanel .olControlSelectFeatureItemActive {
width: 60px;
height: 23px;
position: absolute;
top: 0px;
left: 310px;
background-image: url("/openlayers/img/Info.gif");
}
</style>
JS代碼，核心部分。
<script src="/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
<!--
//定義全局變量
var map, layer, selectControl, selectedFeature;
//關閉彈出窗口的函數
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
//構造彈出窗口的函數
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.Anchored("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(250,75),
"<div style='font-size:.8em'>" + feature.attributes['cq:LNAME'] +"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
//銷燬彈出窗口的函數
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
//地圖和頁面加載函數
function init(){
//設置地圖縮放範圍和縮放等級，0級比例尺最小
map = new OpenLayers.Map( $('map'), { maxScale: 500, minScale: 500000, numZoomLevels: 5 });
//加載行政區圖層，WMS柵格圖像
layer = new OpenLayers.Layer.WMS( "District",
"http://192.98.151.17:8081/geoserver/wms", {layers: 'cq:GMAP_DISTRICT'} );
map.addLayer(layer);
//加載水系圖層，WMS柵格圖像
layer = new OpenLayers.Layer.WMS( "Water",
"http://192.98.151.17:8081/geoserver/wms", {layers: 'cq:GMAP_LAKE', 'transparent': true, format: 'image/png' } );
map.addLayer(layer);
//加載單位圖層，WFS矢量數據，由openlayers在客戶端繪製，注意：數量太多會導致速度緩慢
layer = new OpenLayers.Layer.WFS( "Unit",
"http://192.98.151.17:8081/geoserver/wfs", {typename: 'cq:GPOI_GOV'},
{
typename: 'unit',
featureNS: 'http://www.openplans.org/cq',
extractAttributes: true,
maxfeatures: 10,
textAttrToDisplay: 'lname'
} );
map.addLayer(layer);
//在地圖上添加按鈕和工具條
zb = new OpenLayers.Control.ZoomBox();
var panel = new OpenLayers.Control.Panel({defaultControl: zb});
selectControl = new OpenLayers.Control.SelectFeature(layer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect, hover: true});
panel.addControls([
new OpenLayers.Control.MouseDefaults(), zb, selectControl
]);
map.addControl(panel);
map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon:false}));
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.MousePosition());
//設置初始地圖的中心座標和縮放等級
map.setCenter(new OpenLayers.LonLat(106.5, 29.5), 3);
}
// -->
</script>
HTML代碼
<body οnlοad="init()">
<h1>OpenLayers Test</h1>
<div id="panel"></div>
<div id="map"></div>
<textarea style="display:none" id="serialize" cols="96" rows="10"/>
</body>