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

<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="struts.common.UserInfoBean,java.util.*" %>
<%@ page import="com.chinatelecomex.util.Constant"%>
<%@ page  pageEncoding="GB2312"%> 
<%@ page isELIgnored="true"%>
<html>
<head>
	<title>Gis</title>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/common/css/style.css">
	<link type="text/css" rel="stylesheet"
		href="<%=request.getContextPath()%>/css/comm.css">
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/lib/OpenLayers.js"></script>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/lib/Firebug/firebug.js"></script>
	<link type="text/css" href="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
	<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-1.4.2.min.js"></script>
	<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script language=javascript src="<%=request.getContextPath()%>/common/jquery/js/jquery-ui-i18n.js"></script> 

<%
	response.setHeader("Pragma","No-cache");
	response.setHeader("Cache-Control","no-cache");
	response.setDateHeader("Expires", 0);

	UserInfoBean userInfo = (UserInfoBean)session.getAttribute("userInfo");
	
	ServletContext sc= this.getServletContext();
	String wms =sc.getInitParameter("WMS");
%> 
	
	<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>
	<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",
			//"http://192.168.0.7:8089/geoserver/gwc/service/wms",
			"<%=wms%>",
			{
				layers: 'jilin-map',
				srs: 'EPSG:4326',
				format: 'image/png'
			},
			{
			 tileSize: new OpenLayers.Size(256,256)
			}
		);  
		map.addLayer(layerpublic);
		geojson = new OpenLayers.Format.GeoJSON();
		markers = new OpenLayers.Layer.Markers("markers");
		map.addLayer(markers);
		
		var style = new OpenLayers.Style({
		    fillColor: "#ffcc66",
		    strokeColor: "#ff9933",
		    strokeWidth: 1,
		    fillOpacity: 0.5,
		    //label: "${ogenId}",
		    fontColor: "#003366",
		    fontFamily: "sans-serif",
		    fontWeight: "bold",
		    labelAlign: "cm",//cm,lb,rt
		    cursor:"hand"
		}, {
		    rules: [
		    	new OpenLayers.Rule({
		            minScaleDenominator: 4000000,
		            symbolizer: {
		                pointRadius: "${radius1}",
		                fontSize: "12px",
		                label: "${ogens}"
		            }
		        }),
		        new OpenLayers.Rule({
		        	maxScaleDenominator: 4000000,
		            minScaleDenominator: 937000,
		            symbolizer: {
		                pointRadius: "${radius2}",
		                fontSize: "15px",
		                label: "\n【${areaName}有${ogens}处发电行为】"
		            }
		        }),
		        new OpenLayers.Rule({
		            maxScaleDenominator: 937000,
		            symbolizer: {
		                pointRadius: "${radius3}",
		                fontSize: "18px",
		                label:  "\n\n【${areaName}有${ogens}处发电行为】"
		            }
		        })
		    ]
		});
		
		var styleHightLeight = new OpenLayers.Style({
		    fillColor: "##66cccc",
		    strokeColor: "#66cccc",
		    strokeWidth: 1,
		    fillOpacity: 0.5,
		    //label: "${ogenId}",
		    fontColor: "#003366",
		    fontFamily: "sans-serif",
		    fontWeight: "bold",
		    labelAlign: "cm",//cm,lb,rt
		    cursor:"hand"
		}, {
		    rules: [
		    	new OpenLayers.Rule({
		            minScaleDenominator: 4000000,
		            symbolizer: {
		                pointRadius: "${radius1}",
		                fontSize: "12px",
		                label: "${ogens}"
		            }
		        }),
		        new OpenLayers.Rule({
		        	maxScaleDenominator: 4000000,
		            minScaleDenominator: 937000,
		            symbolizer: {
		                pointRadius: "${radius2}",
		                fontSize: "15px",
		                label: "\n【${areaName}有${ogens}处发电行为】"
		            }
		        }),
		        new OpenLayers.Rule({
		            maxScaleDenominator: 937000,
		            symbolizer: {
		                pointRadius: "${radius3}",
		                fontSize: "18px",
		                label:  "\n\n【${areaName}有${ogens}处发电行为】"
		            }
		        })
		    ]
		});
		
		
		vectors = new OpenLayers.Layer.Vector("Simple Geometry", {
			styleMap: new OpenLayers.StyleMap({"default":style,"temporary":styleHightLeight,"select":styleHightLeight}),
			rendererOptions: {zIndexing: true}
		});
		map.addLayer(vectors);
		
		var report = function(e) {
			//alert(e.type+" "+e.feature.id);
                OpenLayers.Console.log(e.type, e.feature.id);
            };
            
		

		var selectCtrlOut = new OpenLayers.Control.SelectFeature(vectors,
			{clickout: true}
		);
		
		
		selectControl = new OpenLayers.Control.SelectFeature(vectors, {
			hover: true,
			highlightOnly: true,
			renderIntent: "temporary",
			eventListeners: {
				beforefeaturehighlighted: report,
				featurehighlighted: report,
				featureunhighlighted: report
			}
		});
		map.addControl(selectControl);
		map.addControl(selectCtrlOut);
		selectControl.activate();
		selectCtrlOut.activate();
		vectors.events.on({
			'featureselected': onFeatureSelect
		});
		measure();
		initother();
	}
	var popup;
	//点击油机图标,跳转到油机track页面
	function onFeatureSelect(evt) {
		feature = evt.feature;
		window.location="../gis/ogen_map.jsp?areaCode="+feature.attributes.areaCode;
	}
	
	
	function changePage(){
		window.location="../gis/ogen_map.jsp?areaCode=<%=userInfo.getAreaCode()%>";
	}
	</script>
	<script>
		var areaCode='<%=userInfo.getAreaCode()%>';
		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==1){
                   		modify.activate();
                   	}else{
                   		modify.deactivate();
                   	}
                },
                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"
           });
		   
		   var changeButton = new OpenLayers.Control.Button({displayClass: "change", trigger: changePage});
           
           panel.addControls([
		   	   changeButton,
           	   measure,
           	   modify 
           ]);
            map.addControl(panel);
            //modify.activate();
			
            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);
            }
		}
		
		
	</script>
</head>

<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">
	<div id="map" style="margin:0"></div>
</body>
<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">
	<div id="map2" style="margin:0"></div>
</body>
</html>
<script>
var fix = 0;//是否固定地图
var mea = 0;
function locorie(){
	$.post("../ogenmap/ogenmap_queryPreActiveOgens.action",{areaCode:areaCode},function(data){
		//alert(data);
		data = $.trim(data);
		
		var features = geojson.read(data,"FeatureCollection");
		
		var bounds;
		if(features) {
			if(vectors){
				
				vectors.removeAllFeatures();
				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);
				if(fix==1&&features.length==1){
					map.setCenter(new OpenLayers.LonLat(features[0].geometry.x, features[0].geometry.y), 15);
					return ;
				}
				if(bounds){
					map.zoomToExtent(bounds);
				}
			}
        }else{
        	if(vectors){
        		vectors.removeAllFeatures();
        	}
        }
	});
	
}
function startOrie(){
	var t=setTimeout("locorie();startOrie();",1000*<%=Constant.RERESH_NORMAL%>);
}
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(3) + " " + units;
	    } else {
	        data += "间距: " + measure.toFixed(3) + " " + 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;
	}
}
init();
locorie();
startOrie();
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值