源码二。不做讲解，根据以前的博客去理解。

最新推荐文章于 2023-07-04 13:55:48 发布
置顶真不知道是谁
最新推荐文章于 2023-07-04 13:55:48 发布
阅读量2.5k
点赞数 1
分类专栏： GIS 文章标签： openlayers
本文链接：https://blog.csdn.net/mach365/article/details/16993823
版权
GIS 专栏收录该内容
26 篇文章 2 订阅
订阅专栏
<%@ page contentType="text/html; charset=gb2312"%>
<%@ taglib uri="/WEB-INF/tld/select.tld" prefix="sl"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Gis</title>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/js/common.js"> </script>
	<link href="<%=request.getContextPath()%>/common/css/style.css" rel="stylesheet" type="text/css" />
	<script language='javaScript' src="<%=request.getContextPath()%>/common/jquery/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/lib/OpenLayers.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/lib/Firebug/firebug.js"></script>
	<style type="text/css">
		.smallmap {
		    width: 680px;
		    height: 440px;
		    border: 1px solid #ccc;
		}
       .olControlEditingToolbar .olControlModifyFeatureItemInactive { 
           background-position: -1px 0px ;                                                                   
       }
       .olControlEditingToolbar .olControlModifyFeatureItemActive { 
           background-position: -1px -23px ;                                                                   
       }
   	</style>
</head>

<body οnlοad="init()"  style="margin-left: 0px; margin-top: 0px; margin-right: 0px;height: 100%;">
	<table>
		<tr>
			<td width="20%"></td>
			<td width="20%" align="right">区域名称：</td>
			<td width="20%"><sl:select tableName='tmp_area'  fieldName='areaCode' field='area_code,area_name'/></td>
			<td width="20%"><img style="cursor:hand" src="../images/zy_222.gif" id="img_sub1" οnclick="showFac();"></img></td>
			<td width="20%"></td>
		</tr>
	</table>
	<div id="fac" align="center"></div>
	<div id="map"></div>
	<script>
		var m = document.getElementById("map");
		m.style.height = window.screen.availHeight*0.75;
	</script>
</body>
</html>
<%
	ServletContext sc= this.getServletContext();
	String wms =sc.getInitParameter("WMS");
 %>
<script>
	var map,layerpublic,vectors,geojson,markers;
	OpenLayers.DOTS_PER_INCH = 90.71428571428572;
	OpenLayers.Util.onImageLoadErrorColor = 'transparent';
	function init(){
			var bounds = new OpenLayers.Bounds(
				73.447,6.319,135.086,67.95800000000001
			);
			var options = { 
				resolutions: [0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6],
				projection: new OpenLayers.Projection('EPSG:4326'),
				maxExtent: new OpenLayers.Bounds(-180.0,-90.0,180.0,90.0),
				units: "degrees",
				controls: [new OpenLayers.Control.Navigation(),new OpenLayers.Control.PanPanel(),new OpenLayers.Control.ZoomPanel()]
			};
			
			map = new OpenLayers.Map('map',options);
			layerpublic = new OpenLayers.Layer.WMS( "china",
				"<%=wms%>",
				{
					layers: 'jilin-map',
					srs: 'EPSG:4326',
					format: 'image/png'
				},
				{
				 tileSize: new OpenLayers.Size(256,256)
				}
			);  
			//alert("after layer");
			map.addLayer(layerpublic);
	    geojson = new OpenLayers.Format.GeoJSON();
	    map.zoomToMaxExtent();
	    markers = new OpenLayers.Layer.Markers("markers");
	   
	    map.addLayer(markers);
	    
	    var styleMap = new OpenLayers.StyleMap({
			  "default": {
	              	fillOpacity: 1,
						strokeOpacity:1,
						strokeColor: "#000000",
						label: "\n\n${areaName}",
						fontColor: "#99B4CF",
						fontSize: "9px",
						//fontFamily: "Courier New, monospace",
						//fontWeight: "bold",
						labelAlign: "rt",//cm,lb,rt
						graphicWidth:30,
						graphicHeight:25,
						cursor:"hand",
					    externalGraphic: "../img/wh.gif"
	          },
	          "select": {
	              	fillOpacity: 0.75
	              	//label : "${oid}"
	          }
	    });
	    
	   
	    
	    
	    vectors = new OpenLayers.Layer.Vector("Simple Geometry", {
	        styleMap: styleMap,
	        rendererOptions: {zIndexing: true}
	    });
		map.addLayer(vectors);
		selectControl = new OpenLayers.Control.SelectFeature(vectors);
	    map.addControl(selectControl);
	    selectControl.activate();
	    vectors.events.on({
	        'featureselected': onFeatureSelect
	    });
	    measure();
	    initother();
	}
		
	function initother(){
		// add some editing tools to a panel
           var panel = new OpenLayers.Control.Panel({
               displayClass: "olControlEditingToolbar"
           });
           modify = new OpenLayers.Control.Button({
               title: "随仓库而动",
               trigger: function() {
                  	setFix();
                  	if(fix==0){
                  		modify.deactivate();
                  	}else{
                  		modify.activate();
                  	}
               },
               displayClass: "olControlModifyFeature"
           });
           measure = new OpenLayers.Control.Button({
               title: "目测",
               trigger: function() {
               		setMea();
				    control = measureControls['line'];
				    if(mea && mea==1) {
				        control.activate();
				        measure.activate();
				    } else {
				    	if(popup2){
				        	popup2.hide();
				        }
				        control.deactivate();
				        measure.deactivate();
				    }
               },
               displayClass: "olControlDrawFeaturePolygon"
           });
           
           panel.addControls([
           	   measure,
           	   modify
               
           ]);
           map.addControl(panel);
           //modify.activate();
           var areaCode = $("#areaCode").val();
           
           if(areaCode=='')
           {
           	areaCode = "-1";
           }
          //	alert(areaCode);
           if(areaCode=="-1"){
            	map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);
            }
            if(areaCode.indexOf("1")==0){
            	//长春
            	map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),9);
            }
            if(areaCode.indexOf("2")==0){
            	//吉林
            	map.setCenter(new OpenLayers.LonLat(126.54957208782434, 43.837883069515065),9);
            }
            if(areaCode.indexOf("3")==0){
            	//延吉
            	map.setCenter(new OpenLayers.LonLat(129.71832275390625, 42.898100636939276),9);  	
            }
            if(areaCode.indexOf("4")==0){
            	//四平
            	map.setCenter(new OpenLayers.LonLat(124.35012817382812, 43.167125915000284),9);  	
            }
            if(areaCode.indexOf("5")==0){
            	//通化
            	map.setCenter(new OpenLayers.LonLat(125.93971252441406, 41.72828028223453),9);
            }
            if(areaCode.indexOf("6")==0){
            	//白城
            	map.setCenter(new OpenLayers.LonLat(122.83882141113281, 45.61980072095504),9);
            }
            if(areaCode.indexOf("7")==0){
            	//辽源
            	map.setCenter(new OpenLayers.LonLat(125.13633728027344, 42.896088552971065),9);
            }
            if(areaCode.indexOf("8")==0){
            	//松原
            	map.setCenter(new OpenLayers.LonLat(124.82511788606643, 45.141789104141836),9);
            }
            if(areaCode.indexOf("9")==0){
            	//白山
            	map.setCenter(new OpenLayers.LonLat(126.44920349121094, 41.94110578381598), 9);
            }
	}


var fix = 0;//是否固定地图
var mea = 0;
function showFac(){

	var areaCode = document.getElementById("areaCode").value;
	if(areaCode == -1){
		areaCode = "";
	}
	$.post("gis_getGisFacByAreaCode.action?areaCode="+areaCode,function(data){
		count = 0;
		features = geojson.read(data,"FeatureCollection");
		var bounds;
		vectors.removeAllFeatures();
        if(features) {
			if(vectors){
				
				if(fix==1){
					for(var i=0; i<features.length; ++i) {
		                 if (!bounds) {
		                     bounds = features[i].geometry.getBounds();
		                 } else {
		                     bounds.extend(features[i].geometry.getBounds());
		                 }
		           	}
	           	}
				vectors.addFeatures(features);
			}
        }
	});
}

var measureControls;
function measure(){
	var sketchSymbolizers = {
        "Point": {
            pointRadius: 4,
            graphicName: "square",
            fillColor: "white",
            fillOpacity: 1,
            strokeWidth: 1,
            strokeOpacity: 1,
            strokeColor: "#333333"
        },
        "Line": {
            strokeWidth: 3,
            strokeOpacity: 1,
            strokeColor: "#FF0000",
            strokeDashstyle: "dash"
        }
    };
    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}
                }
            }
        )
    };
    
    var control;
    for(var key in measureControls) {
        control = measureControls[key];
        control.events.on({
            "measure": handleMeasurements,
            "measurepartial": handleMeasurements
        });
        map.addControl(control);
    }
}
var popup2;
function handleMeasurements(event) {
    var geometry = event.geometry;
    var units = event.units;
    var order = event.order;
    var measure = event.measure;
    if(geometry){
    	var point;
	    if(geometry.getVertices()&&geometry.getVertices().length>1){
	    	point = geometry.getVertices()[geometry.getVertices().length-1];
	    }
		if (popup2 == null) {
	  		popup2 = new OpenLayers.Popup("Measure", 
	  			new OpenLayers.LonLat(point.x,point.y),
	            new OpenLayers.Size(150,35),
	            "",
	            false);//右上角关闭按钮
            popup2.setBackgroundColor("#F7C329");
            popup2.setOpacity(0.9);
            map.addPopup(popup2);
        } else {
            popup2.show();
            popup2.lonlat = new OpenLayers.LonLat(point.x,point.y);
           	map.addPopup(popup2);
        }
        var data = "";
        if(order == 1) {
        	data += "距离: " + measure.toFixed(1) + " " + units;
	    } else {
	        data += "距离: " + measure.toFixed(1) + " " + units + "<sup>2</" + "sup>";
	    }
        popup2.setContentHTML(data);
	}
}


function setFix(){
	if(fix==0){
		fix = 1;
	}else{
		fix = 0;
	}
}
function setMea(){
	if(mea==0){
		mea = 1;
	}else{
		mea = 0;
	}
}
function onFeatureSelect(evt) {
    feature = evt.feature;
    if(feature.attributes.ogid){
    	getFacDetail(feature.attributes.ogid);
    	if(fix==1)
    	{
	    	map.setCenter(new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y), 12);
    	}
    }
}
function getFacDetail(ogid){
	$.post("gis_getGisFacDetail.action?ogid="+ogid,function(data){
		var json = eval('('+data+')');
       	for(var b=0;b<json.fac.length;b++){
       		var id = parseFloat(""+json.fac[b].i);
       		var lot = parseFloat(""+json.fac[b].o);
       		var lat = parseFloat(""+json.fac[b].a);
       		$("#fac").html("区域名称:"+json.fac[b].m+";仓库编号:"+json.fac[b].i+";仓库名称:"+json.fac[b].n+";经度:"+json.fac[b].o+";纬度:"+json.fac[b].a);
       	}
	});
}
</script>