一个完整openlayer的例子,包括marker,popup等
整理转自:http://www.blogjava.net/siriusfx/archive/2007/11/26/163104.html
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><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"/> </body>
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器