SelectFeature

来源：互联网发布：.it域名编辑：程序博客网时间：2024/05/17 20:21
<%@ 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>
0 0