SelectFeature

最新推荐文章于 2022-11-14 19:31:59 发布

原创最新推荐文章于 2022-11-14 19:31:59 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#OpenLayers

OpenLayers 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用OpenLayers库在Web地图上创建矢量图层并进行绘图操作，包括点、线、多边形等元素的绘制及交互控制。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在web地图上创建矢量图层，并在矢量图层上绘制元素</title>
<style type="text/css">
	.smallmap{
		height: 300px;
		width: 600px;
		border: 1px solid gray;
	}
	#positionid{
		width: 600px;
		text-align: right;
	}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var divId='map';
var drawControls = {};
function initMap(){
	map = new OpenLayers.Map(divId,{
		numZoomLevels:8
	});
	styleMap = new OpenLayers.StyleMap({
		 'default': {
	            strokeOpacity:1,  
	            strokeColor: "#b2d235",  
	            graphicWidth:30,  
	            graphicHeight:50,  
	            externalGraphic:"<%=basePath%>/Script/img/marker.png"
		    },
		    'select': {
	            strokeColor: "#0000ff",  
	            graphicWidth:30,  
	            graphicHeight:50,  
	            externalGraphic:"<%=basePath%>/Script/img/marker.png"
		    }	
	});
	var veclayer = new OpenLayers.Layer.Vector('vector layer',{
		styleMap:styleMap,
		rendererOptions: {zIndexing: true}  
	});
	veclayer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,30)));
	var googlelayer = new OpenLayers.Layer.Google("Google Streets",{
		layers:"basic"
	});
	var drawlayer = new OpenLayers.Layer.Vector('draw layer');
	map.addLayers([googlelayer,veclayer,drawlayer]);
	var polygon = new OpenLayers.Control.DrawFeature(drawlayer, OpenLayers.Handler.Polygon);
	polygon.featureAdded = getGeometryPoints;//回调函数，获取多边形顶点集合数
	drawControls = {
		point: new OpenLayers.Control.DrawFeature(drawlayer,OpenLayers.Handler.Point),
		line: new OpenLayers.Control.DrawFeature(drawlayer, OpenLayers.Handler.Path),
		polygon: polygon,
		select: new OpenLayers.Control.SelectFeature( drawlayer,{
			clickout: false, 
			toggle: false,        
			multiple: false,
			hover: false, 
	        toggleKey: "ctrlKey", // ctrl key removes from selection       
	        multipleKey: "shiftKey", // shift key adds to selection       
	        box: true
	     }),
	    selecthover: new OpenLayers.Control.SelectFeature(drawlayer,{
	        multiple: false, 
	        hover: true,
			toggleKey: "ctrlKey", // ctrl key removes from selection        
			multipleKey: "shiftKey" // shift key adds to selection       
		})
	};
	
	for(var key in drawControls) {
		map.addControl(drawControls[key]);
	} 
	
	var dgControl =new OpenLayers.Control.DragFeature(drawlayer);//矢量要素拖动，参数为矢量图层名称，上边已经存在
	map.addControl(dgControl);
	dgControl.activate();
	
	
	map.addControls([
		new OpenLayers.Control.MousePosition({
			'element':document.getElementById('positionid'),
			'prefix':'经度: ',
			'separator':',纬度: '
		}),
		new OpenLayers.Control.PanZoomBar(),
		new OpenLayers.Control.LayerSwitcher()
	]);
	map.setCenter(new OpenLayers.LonLat(0,0),3);
	map.zoomToMaxExtent();
}

function  toggleControl(element){
	for(var key in  drawControls){
		var control =  drawControls[key];
		if(element.value == key && element.checked){
			control.activate();
		}else{
			control.deactivate();
		}
	}
}

//feature:OpenLayers.Feature.Vector类型的对象
function getGeometryPoints(feature){
	var geometry = feature.geometry;
	var lonlat = geometry.getVertices();
	document.getElementById("points").innerHTML=lonlat;
	alert(lonlat);
}
</script>
</head>
<body onload="initMap();">
	   <div id="points"></div>
       <div id="map" class="smallmap"></div>
       <div id="positionid"></div>
       <label>导航</label><input type="radio" name="type" value="none" onclick="toggleControl(this)" checked="checked">
       <label>点</label><input type="radio" name="type" value="point" onclick="toggleControl(this)">
       <label>线</label><input type="radio" name="type" value="line" onclick="toggleControl(this);">
       <label>多边形</label><input type="radio" name="type" value="polygon" onclick="toggleControl(this);">
       <label>select</label><input type="radio" name="type" value="select" onclick="toggleControl(this);">
       <label>selecthover</label><input type="radio" name="type" value="selecthover" onclick="toggleControl(this);">
</body>
</html>