openlayer调用geoserver发布的地图实现地图的基本功能

主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度坐标。根据经纬度坐标显示多边形。地图切换,图层控制等功能


<?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>
        <title>OpenLayers map preview</title>
        <!-- Import OL CSS, auto import does not work with our minified OL.js build -->
        <link rel="stylesheet" type="text/css" href="../theme/default/style.css"/>
		 <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
        <!-- Basic CSS definitions -->
        <style type="text/css">
            /* General settings */
            body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: small;
            }
            /* Toolbar styles */
            #toolbar {
                position: relative;
                padding-bottom: 0.5em; 
               
            }
            
            /* The map and the location bar */
            #map {
                clear: both;
                position: relative;
                width: 698px;
                height: 330px;
                border: 1px solid black;
            }
            
            #wrapper {
                width: 698px;
            }
            
            #location {
                float: right;
            }

            /* Styles used by the default GetFeatureInfo output, added to make IE happy */
            table.featureInfo, table.featureInfo td, table.featureInfo th {
                border: 1px solid #ddd;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                font-size: 90%;
                padding: .2em .1em;
            }
            
            table.featureInfo th {
                padding: .2em .2em;
                text-transform: uppercase;
                font-weight: bold;
                background: #eee;
            }
            
            table.featureInfo td {
                background: #fff;
            }
            
            table.featureInfo tr.odd td {
                background: #eee;
            }
            
            table.featureInfo caption {
                text-align: left;
                font-size: 100%;
                font-weight: bold;
                text-transform: uppercase;
                padding: .2em .2em;
            }
        </style>
        <!-- Import OpenLayers, reduced, wms read only version -->
       <script src="../lib/OpenLayers.js" ></script>
	    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script defer="defer" type="text/javascript">
            var map, measureControls;
            var untiled;
            var tiled;
			
            function init(){
                format = 'image/png';
				var bounds = new OpenLayers.Bounds(  //地图区域范围
                    74.137, 6.319,
                    135.086, 53.558
                );
                var options = {
                    controls: [],
					 maxExtent: bounds,
                    maxResolution: 0.23808203125,
					projection: "EPSG:4610",
					numZoomLevels: 7, 
					units: 'degrees'
                };
                map = new OpenLayers.Map('map', options);
        
               /**********************加载图层 开始*******************************/
              /*   tiled = new OpenLayers.Layer.WMS(  //图层组
                    "基础图层", "http://localhost:8080/geoserver/wms",
                    {
                        height: '330',
                        width: '698',
                        layers: 'sf',
                        styles: '',
                        srs: 'EPSG:4326',
                        format: format,
                        tiled: 'true',
                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true
                    } 
                );*/
				
				var streams = new OpenLayers.Layer.WMS(    //图层组
                    "中国", "http://localhost:8080/geoserver/wms",
                    {
                       height: '330',
                        width: '698',
                        layers: 'china',
                        styles: '',
                        srs: 'EPSG:4610',
                        format: format,
                        tiled: 'true',
                        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                    },
                    {
						buffer: 0,
						displayOutsideMaxExtent: true

					} 
                );
            
				untiled = new OpenLayers.Layer.WMS(  //单独图层
                    "省会", "http://127.0.0.1:8080/geoserver/wms",
                    {
                        height: '330',
                        width: '698',
                        layers: 'china:provice',
                        styles: '',
                        srs: 'EPSG:4610',
						transparent: "true",
                        format: format
                    },
                    {singleTile: true, ratio: 1} 
                );
				 untiled.setVisibility(false); //设置为不显示
				//var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});    
				/* var dm_wms = new OpenLayers.Layer.WMS( "点图层",
                "http://127.0.0.1:8080/geoserver/wms",
                {layers: "sf:bugsites,sf:archsites",
                 transparent: "true", format: "image/png"});*/

               map.addLayers([streams,untiled]);
			  /********************END 加载图层*********************************/

               /************************加载一般的基础控件********************************/   
                map.addControl(new OpenLayers.Control.PanZoomBar({  //添加平移缩放工具条
                    position: new OpenLayers.Pixel(2, 15)
                }));
                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************加载一般的基础控件********************************/   

               /***********************鼠标点击,获取图层数据*******************************/   
                map.events.register('click', map, function (e) {
                    document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                    var params = {
                        REQUEST: "GetFeatureInfo",
                        EXCEPTIONS: "application/vnd.ogc.se_xml",
                        BBOX: map.getExtent().toBBOX(),
                        X: e.xy.x,
                        Y: e.xy.y,
                        INFO_FORMAT: 'text/html',
                        QUERY_LAYERS: map.layers[0].params.LAYERS,
                        FEATURE_COUNT: 50,
                        Layers: 'ok',
                        Styles: '',
                        Srs: 'EPSG:4610',
                        WIDTH: map.size.w,
                        HEIGHT: map.size.h,
                        format: format};
                    OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML);
                    OpenLayers.Event.stop(e);
                });
			  /**************END*********鼠标点击,获取图层数据*******************************/   

			/**********************************点、线、面测量开始**********************************************/
			 var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,	
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
			 var styleMap = new OpenLayers.StyleMap({"default": style});
			 measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                )
            };
			 var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }
			/***************************END************点,线、面积测量*****************************************/

			  //添加点标注的图层
			  markers = new OpenLayers.Layer.Markers("markers");
              map.addLayer(markers);  
			  markers.setZIndex(200);

       }
            
		//获取面积的结果赋值
		  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.toFixed(3) + " " + units;
            } else {
                out += "面积为: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
            element.innerHTML = out;
        }
		function setHTML(response){
			document.getElementById('nodelist').innerHTML = response.responseText;
		};
		//缩小
		function zoomOut(){
			map.zoomOut();
		}
		//放大
		function zoomIn(){
			map.zoomIn();
		}
		//获取地图数据
		function getSize(){
			alert(map.getSize()+",高度为="+map.getSize().h);
		}
		//切换鼠标事件功能
		function toggleControl(_value) {
			
            for(key in measureControls) {
                var control = measureControls[key];
                if(_value == key ) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }

		/*********************拉宽并获取经纬度坐标系*********************************/
		function boxExtend(){
			var controlBox = new OpenLayers.Control();
              OpenLayers.Util.extend(controlBox, {
                    draw: function () {
                        this.box = new OpenLayers.Handler.Box( controlBox,
                            {"done": this.notice},{ "persist": true},
                            {keyMask:OpenLayers.Handler.MOD_SHIFT });
                        this.box.activate();
                    },

                    notice: function (bounds) {		
                        var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom)); 
                        var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top)); 
                        alert(ll.lon.toFixed(4) + ", " + 
                              ll.lat.toFixed(4) + ", " + 
                              ur.lon.toFixed(4) + ", " + 
                              ur.lat.toFixed(4));
                    }
                });
			map.addControl(controlBox);
		}
		var markers,marker;
		var markArr=new Array();
		function addMarker(){
			 var url = 'http://www.openlayers.org/dev/img/marker.png';
                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);
				
				marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon);
                markers.addMarker(marker);

               // marker = new OpenLayers.Marker(madrid, icon.clone());
               // markers.addMarker(marker);			
		}
		 function removeMarker() {
                markers.removeMarker(marker);
         }
		 /*******************多边形获取经纬度坐标系*************************/
		 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="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>

 根据经纬度坐标串显示多边形代码如下


 

 

var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style:layer_style });
			var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            layer_style.fillOpacity = 0.2;
            layer_style.graphicOpacity =0.2;

            // create a polygon feature from a linear ring of points
            var pointList = [];          
			var point1 = new OpenLayers.Geometry.Point(99.480233398438 ,34.892876953125);
			var point2 = new OpenLayers.Geometry.Point(106.74173535156, 25.96480078125);
			var point3 = new OpenLayers.Geometry.Point(116.26501660156, 36.6784921875);
			var point4 = new OpenLayers.Geometry.Point(109.59871972656 , 41.559173828125);
			var point5 = new OpenLayers.Geometry.Point(99.480233398438,34.892876953125);
			pointList.push(point1);
			pointList.push(point2);
			pointList.push(point3);
			pointList.push(point4);
			pointList.push(point5);
			pointList.push(pointList[0]);
            var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
            var polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linearRing]));
			 map.addLayer(vectorLayer);
           // map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
            vectorLayer.addFeatures([ polygonFeature]);

 

根据经纬度坐标窜画多边形,线性等可以参考OpenLayers-2.10\examples 下的vector-features.html代码

 

转载自:https://blog.csdn.net/lting19880817/article/details/83918920

You may also like...