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应用系统
[email protected]
--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:[email protected]
--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"/>
openlayers_note.rar_openLayer_openlayers
版权申诉
96 浏览量
2022-09-23
23:23:12
上传
评论
收藏 4KB RAR 举报
林当时
- 粉丝: 99
- 资源: 1万+
最新资源
- 基于图像的三维模型重建C++源代码+文档说明(高分课程设计)
- 基于聚焦法的工件立体测量方案,根据数据进行三维重建 使用HALCON处理图像,MATLAB拟合数据+源代码+数据集+效果图
- 锄战三国村 修改:货币使用不减 v1.10(2) 原创 (中文).apk
- 基于python实现的单目双目视觉三维重建+源代码+图像图片(高分课程设计)
- 基于C+++OPENCV的全景图像拼接源码(课程设计)
- 基于Python+OpenCV对多张图片进行全景图像拼接,消除鬼影,消除裂缝+源代码+文档说明+界面截图(高分课程设计)
- 基于C++实现的全景图像拼接源码(课程设计)
- 基于SIFT特征点提取和RASIC算法实现全景图像拼接python源码+文档说明+界面截图+详细注释(95分以上课程大作业)
- 基于matlab实现眼部判别的疲劳检测系统+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于Matlab的异常姿势识别系统+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈