Openlayers入门经典例子
2013-12-11 15:18
295 查看
所有例子是基于OpenLayers-2.13,不多说直接上代码了,都是js代码,拷贝过去直接可以用了,路径放在OpenLayers-2.13\examples目录下即可。
本例子地图服务是本地图片发布的,只需修改38行 'data/lzk_gis.gif', 图片名即可。
界面如下:
本例子地图服务是本地图片发布的,只需修改38行 'data/lzk_gis.gif', 图片名即可。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> html,body { height: 99%; width: 99%; } #map { width: 698px; height: 330px; border: 1px solid black; } /* General settings */ body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } /* Toolbar styles */ #toolbar { position: relative; padding-bottom: 0.5em; } </style> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, measureControls; var markers; function init(){ map = new OpenLayers.Map('map'); /**********************加载图层 开始*******************************/ var graphic1 = new OpenLayers.Layer.Image( 'BinJiang City', 'data/lzk_gis.gif', //坐标范围 new OpenLayers.Bounds(-180, -90, 180, 90), //图片大小 new OpenLayers.Size(1024, 768), {numZoomLevels: 3} ); var graphic2 = new OpenLayers.Layer.Image( 'BinJiang City1', 'data/4_m_citylights_lg.gif', //坐标范围 new OpenLayers.Bounds(-180, -90, 180, 90), //图片大小 new OpenLayers.Size(1024, 768), {numZoomLevels: 3} ); //graphic2.setVisibility(false); //设置为不显示 map.addLayers([graphic1,graphic2]); //map.setCenter(new OpenLayers.LonLat(90, 10), 0); // 注册map点击事件 map.events.register("click", map, onMapClick); // 注册map点击事件 map.events.register("zoomend", map, onMapZoom); // 放大到全屏 map.zoomToMaxExtent(); //map.addControl(new OpenLayers.Control.LayerSwitcher()); //map.addControl(new OpenLayers.Control.MousePosition()); /********************END 加载图层*********************************/ /************************加载一般的基础控件********************************/ map.addControl(new OpenLayers.Control.PanZoomBar({ //添加平移缩放工具条 position: new OpenLayers.Pixel(2, 6) })); //map.addControl(new OpenLayers.Control.Navigation()); //双击放大,平移 //map.addControl(new OpenLayers.Control.Scale($('scale'))); //获取地图比例尺 // map.addControl(new OpenLayers.Control.MousePosition({element: $('location')})); //获取鼠标的经纬度 //map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1); //添加平移缩放工具条 //map.addControl(new OpenLayers.Control.OverviewMap()); //添加鹰眼图 //map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); //图层切换工具 // map.addControl(new OpenLayers.Control.Permalink('xxxx')); //添加永久链接 //map.addControl(new OpenLayers.Control.MouseToolbar()); //map.zoomToMaxExtent(); //var zb=new OpenLayers.Control.ZoomBox({out:true}); //var panel = new OpenLayers.Control.Panel({defaultControl: zb}); //map.addControl(panel); /************END************加载一般的基础控件********************************/ /*****************************测距、面积Start***************************/ // style the sketch fancy var sketchSymbolizers = { "Point": { pointRadius: 4, graphicName: "square", fillColor: "white", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor: "#333333" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#ffffff", strokeDashstyle: "dash" }, "Polygon": { strokeWidth: 2, strokeOpacity: 1, strokeColor: "#ffffff", fillColor: "white", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer: sketchSymbolizers}) ]); var styleMap = new OpenLayers.StyleMap({"default": style}); // allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; measureControls = { line: new OpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ), polygon: new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure": handleMeasurements, "measurepartial": handleMeasurements }); map.addControl(control); } //map.setCenter(new OpenLayers.LonLat(0, 0), 3); /**************************测距、面积End***************************/ /**************************添加图片标注Start***************************/ markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('./img/mobile-loc.png',size,offset); markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(88,46),icon)); var halfIcon = icon.clone(); markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(46,45),halfIcon)); halfIcon.setOpacity(0.5); marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone()); marker.setOpacity(0.2); //鼠标点击事件 marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); }); markers.addMarker(marker); //map.addControl(new OpenLayers.Control.LayerSwitcher()); //map.zoomToMaxExtent(); //鼠标悬浮到图标上的事件 var companyname="白马湖",renshu=502; marker.events.register("mouseover", marker, function(evt){ var html="<b> "+companyname+"<br> 当前人数:"+renshu+"人</b>"; popup1=new OpenLayers.Popup("popup1", new OpenLayers.LonLat(90,10), new OpenLayers.Size(200,50), html, false); popup1.setBackgroundColor("#ffffff"); popup1.setOpacity(12); popup1.setBorder("1px solid #d91f12"); map.addPopup(popup1); }); //鼠标移开事件 marker.events.register("mouseout", marker, function(evt){ popup1.hide(); }); /**************************添加图片标注End***************************/ //createPoint(); //不同级别显示不同图层 function onMapZoom(e){ //alert('zoom level:'+map.getZoom()); //alert('sclse:'+map.getScale()); if(map.getZoom() == 1){ //show some layers.... graphic1.setVisibility(true); graphic2.setVisibility(false); }else if(map.getZoom() == 2){ //hide some lyers... graphic1.setVisibility(false); graphic2.setVisibility(true); }else{ graphic1.setVisibility(true); graphic2.setVisibility(false); } } } //测距、面积 function handleMeasurements(event) { var geometry = event.geometry; var units = event.units; var order = event.order; var measure = event.measure; var element = document.getElementById('output'); var out = ""; if(order == 1) { out += "measure: " + measure.toFixed(3) + " " + units; } else { out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>"; } element.innerHTML = out; } function toggleControl(_value) { for(key in measureControls) { var control = measureControls[key]; if(_value == key ) { control.activate(); } else { control.deactivate(); } } } function onMapClick(e){ //alert('click'); // 显示地图屏幕坐标 var str = "[Screen]:" + e.xy.x + "," + e.xy.y; document.getElementById("screen_xy").innerHTML = str; // 屏幕坐标向地图坐标的转换 var lonlat = map.getLonLatFromViewPortPx(e.xy); str = "[Map]:" + lonlat.lon + "," + lonlat.lat; document.getElementById("location").innerHTML = str; //生成点图层 } function createPoint(){ /******************************生成点图层Start***********************************/ // Create 50 random features, and give them a "type" attribute that // will be used for the label text. var features = new Array(50); for (var i=0; i<features.length; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point( (360 * Math.random()) - 180, (180 * Math.random()) - 90 ), { type: 5 + parseInt(5 * Math.random()) } ); } /** * Create a style instance that is a collection of rules with symbolizers. * Use a default symbolizer to extend symoblizers for all rules. */ var style = new OpenLayers.Style({ fillColor: "#ffcc66", strokeColor: "#ff9933", strokeWidth: 2, label: "${type}", fontColor: "#333333", fontFamily: "sans-serif", fontWeight: "bold" }, { rules: [ new OpenLayers.Rule({ minScaleDenominator: 200000000, symbolizer: { pointRadius: 7, fontSize: "9px" } }), new OpenLayers.Rule({ maxScaleDenominator: 200000000, minScaleDenominator: 100000000, symbolizer: { pointRadius: 10, fontSize: "12px" } }), new OpenLayers.Rule({ maxScaleDenominator: 100000000, symbolizer: { pointRadius: 13, fontSize: "15px" } }) ] }); // Create a vector layer and give it your style map. var points = new OpenLayers.Layer.Vector("Points", { styleMap: new OpenLayers.StyleMap(style) }); points.addFeatures(features); //map.removeLayer(points); map.addLayer(points); /******************************生成点图层End***********************************/ } //缩小 function zoomOut(){ map.zoomOut(); } //放大 function zoomIn(){ map.zoomIn(); } //获取地图数据 function getSize(){ alert(map.getSize()+",高度为="+map.getSize().h); } //显示标注 var marker1; function addMarker(){ var url = './img/small.jpg'; var sz = new OpenLayers.Size(20, 20); //尺寸大小 var calculateOffset = function(size) { return new OpenLayers.Pixel(-(size.w/2), -size.h); }; var icon = new OpenLayers.Icon(url, sz, null, calculateOffset); marker1 = new OpenLayers.Marker(new OpenLayers.LonLat(48,31), icon); markers.addMarker(marker1); // marker = new OpenLayers.Marker(madrid, icon.clone()); // markers.addMarker(marker); } function removeMarker() { markers.removeMarker(marker1); } /*******************多边形获取经纬度坐标系*************************/ function test(){ var getpolygonxy = new OpenLayers.Control(); OpenLayers.Util.extend(getpolygonxy, { draw: function() { this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy , { "done": this.notice },{ "persist": true}, { keyMask: OpenLayers.Handler.MOD_SHIFT }); this.polygon.activate(); }, notice: function(bounds) { alert(bounds);//坐标信息 } }); map.addControl(getpolygonxy); } </script> </head> <body onload="init()"> <div id="toolbar" style="display:"> <input type="button" value="放大" onclick="zoomIn()"/> <input type="button" value="缩小" onclick="zoomOut()"/> <input type="button" value="获取地图大小" onclick="getSize()"/> <input type="button" value="平移" onclick="toggleControl('none')"/> <input type="button" value="线路测量" onclick="toggleControl('line')"/> <input type="button" value="测量面积" onclick="toggleControl('polygon')"/> <!--<input type="button" value="shift拉框" onclick="boxExtend()"/>--> <input type="button" value="显示标注" onclick="addMarker()"/> <input type="button" value="移除标注" onclick="removeMarker()"/> <input type="button" value="画多边形获取经纬度坐标" onclick="test()"/> </div> <div id='map'></div> <div id="wrapper"> <div id="screen_xy"></div> <div id="location">经纬度坐标 </div> <div id="scale"> </div> <div id="output"> </div> </div> <div id="xystr"></div> <div id="nodelist"> <em>Click on the map to get feature info</em> </div> </body> </html>
界面如下:
相关文章推荐
- java IO文件操作入门经典例子
- java IO文件操作入门经典例子
- 一个经典的ADO.NET入门例子
- MINA经典入门例子----Time Server
- 一个经典的ADO.NET入门例子
- MINA经典入门例子----Time Server
- 一个经典的ADO.NET入门例子
- Beans入门必读之经典EJB例子代码
- 经典的Spring 入门级例子
- 经典的Spring 入门级例子
- 【经典】Linux Shell快速入门小例子(shell十三问学习笔记)
- [笔记]《ECMAScript 6 入门》中的经典例子(3)
- MINA经典入门例子----Time Server .
- 一个经典的ADO.NET入门例子
- Eclipse+tomcat开发j2ee经典入门例子
- 第64页的例子(ASP.NET入门经典1.1)的问题!
- Springboot helloworld入门最经典例子
- struts2入门-第一个例子==》第一个struts2实例——HelloWorld==》Struts2.0搭建和简单实例==>写一个Steuts2的经典入门案例,做了一个登陆程序作为入门例子
- FreeMarker 经典入门例子
- 【入门】openlayers3官网例子解读