openlayers使用笔记1 从例子开始学习openlayers - Java&GIS - BlogJava
Java&GIS
BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合 :: 管理 posts - 13, comments - 23,
trackbacks - 0
<2007年11月>
日一二三四五六
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿(6)
给我留言
查看公开留言
查看私人留言
随笔档案
2007年12月 (1)
2007年11月 (2)
2007年8月 (1)
2007年6月 (1)
2007年4月 (1)
2007年2月 (1)
2007年1月 (2)
2006年12月 (1)
2006年8月 (3)
搜索
最新评论
1. re: Internet上的WMS/WFS地图服务器资源
注释能加上点就好了？
--kenzhang
2. re: 使用开源项目打造GIS应用系统
czldl@tom.com
--ldl
3. re: Geoserver 1.5.2 安装与测试
Your Potential, Our Passion! 好像是某个大公司的口号，好像是微软的？记得不是很清楚了！
--Ryan
4. re: Geoserver 1.5.1测试手记
不错,有窝了...呵呵
--BeanSoft
5. re: Geoserver的工程部署说明
知道如何将GeoServer部署到WebSphere上面吗
我的QQ：278104696
MSN：liuzidong88@hotmail.com
--http://salonliudong.cnblogs.com
阅读排行榜
1. 以Geotools和Geoserver为基础开发的商业webgis系统即将上线运营(2367)
2. 使用开源项目打造GIS应用系统(2276)
3. 测试Geoserver1.4.0(2022)
4. apache2.2 tomcat5.0 整合步骤（支持集群负载均衡）(1959)
5. Geoserver的工程部署说明(1827)
评论排行榜
1. 以Geotools和Geoserver为基础开发的商业webgis系统即将上线运营(8)
2. 使用开源项目打造GIS应用系统(6)
3. 测试Geoserver1.4.0(3)
4. apache2.2 tomcat5.0 整合步骤（支持集群负载均衡）(2)
5. Geoserver 1.5.1测试手记(1)
openlayers使用笔记1 从例子开始学习openlayers
openlayers提供了几十个示例，虽然每个示例都很简单，但却很具有代表性，值得初学者学习。
现在我想做一个测试，包含多个图层、缩放条、工具条、鼠标位置、弹出窗口，其中图层分别来自geoservr
提供的WMS和WFS服务接口。
主要代码如下：
样式定义，定义地图大小，工具条位置和替换按钮图片。
<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 onload="init()">
<h1>OpenLayers Test</h1>
<div id="panel"></div>
<div id="map"></div>
<textarea style="display:none" id="serialize" cols="96" rows="10"/>
