用绘制控件绘制要素示例(openlayers)

001	<div id="tags"></div>

002	<div id="simpleMap" style="height: 450px; width: 700px;"></div><br>

003	<script type="text/javascript">

004	var map, drawControls;

005	function init(){

006	//构造地图对象实例,并添加到id为simpleMap的div容器中

007	map = new Geo.View2D.Map("simpleMap");

008	// 构造瓦片地图图层

009	var layer = new Geo.View2D.Layer.GlobeTile("全球1:100万影像图", "http://tile0.tianditu.com/services/sbsm0210", {

010	transitionEffect: "resize",

011	topLevel: 2,

012	bottomLevel: 10,

013	maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)

014

});

015

// 定义点图层

016	var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

017

// 定义线图层

018	var lineLayer = new OpenLayers.Layer.Vector("Line Layer");

019

// 定义面图层

020	var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

021

022	//添加图层到地图对象

023	map.addLayers([layer, pointLayer, lineLayer, polygonLayer]);

024

// 构造画图控件

025	drawControls = {

026

// 点

027	point: new OpenLayers.Control.DrawFeature(pointLayer,

028	OpenLayers.Handler.Point),

029

// 线

030	line: new OpenLayers.Control.DrawFeature(lineLayer,

031	OpenLayers.Handler.Path),

032

// 多边形

033	polygon: new OpenLayers.Control.DrawFeature(polygonLayer,

034	OpenLayers.Handler.Polygon),

035

// 圆

036	circle: new OpenLayers.Control.DrawFeature(polygonLayer,

037	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 40}}),

038

// 规则三角形

039	triangle: new OpenLayers.Control.DrawFeature(polygonLayer,

040	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 3}}),

041

// 规则四边形

042	square: new OpenLayers.Control.DrawFeature(polygonLayer,

043	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 4}}),

044

// 规则五边形

045	pentagon: new OpenLayers.Control.DrawFeature(polygonLayer,

046	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 5}}),

047

// 规则六边形

048	hexagon: new OpenLayers.Control.DrawFeature(polygonLayer,

049	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 6}}),

050

// 椭圆

051	irregularCircle: new OpenLayers.Control.DrawFeature(polygonLayer,

052	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 40,irregular: true}}),

053

// 不规则三角形

054	irregularTriangle: new OpenLayers.Control.DrawFeature(polygonLayer,

055	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 3,irregular: true}}),

056

// 不规则四边形

057	irregularSquare: new OpenLayers.Control.DrawFeature(polygonLayer,

058	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 4,irregular: true}}),

059

// 不规则五边形

060	irregularPentagon: new OpenLayers.Control.DrawFeature(polygonLayer,

061	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 5,irregular: true}}),

062

// 不规则六边形

063	irregularHexagon: new OpenLayers.Control.DrawFeature(polygonLayer,

064	OpenLayers.Handler.RegularPolygon,{handlerOptions: {sides: 6,irregular: true}})

065

};

066	// 加载画图控件到地图对象

067	for(var key in drawControls) {

068	map.addControl(drawControls[key]);

069

}

070

071	//定位到中心点，缩放级别为2

072	map.setCenter(new OpenLayers.LonLat(104, 37), 2);

073	document.getElementById('noneToggle').checked = true;

074

}

075	// 检测点击的要素控件

076	function toggleControl(element) {

077	for(key in drawControls) {

078	var control = drawControls[key];

079	if(element.value == key && element.checked) {

080

// 画图对象激活

081	control.activate();

082

} else {

083	control.deactivate();

084

}

085

}

086

}

087

</script>

088	<ul id="controlToggle">

089

<li>

090	<input name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" type="radio">

091	<label for="noneToggle">导航操作</label>

092

</li>

093

<li>

094	<input name="type" value="point" id="pointToggle" onclick="toggleControl(this);" type="radio">

095	<label for="pointToggle">画点</label>

096	<input name="type" value="line" id="lineToggle" onclick="toggleControl(this);" type="radio">

097	<label for="lineToggle">画线</label>

098	<input name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" type="radio">

099	<label for="polygonToggle">画多边形</label>

100

</li>

101

<li>

102	<input name="type" value="circle" id="circleToggle" onclick="toggleControl(this);" type="radio">

103	<label for="circleToggle">画圆</label>

104	<input name="type" value="triangle" id="triangleToggle" onclick="toggleControl(this);" type="radio">

105	<label for="triangleToggle">画规则三角形</label>

106	<input name="type" value="square" id="squareToggle" onclick="toggleControl(this);" type="radio">

107	<label for="squareToggle">画规则四边形</label>

108	<input name="type" value="pentagon" id="pentagonToggle" onclick="toggleControl(this);" type="radio">

109	<label for="pentagonToggle">画规则五边形</label>

110	<input name="type" value="hexagon" id="hexagonToggle" onclick="toggleControl(this);" type="radio">

111	<label for="hexagonToggle">画规则六边形</label>

112

</li>

113

<li>

114	<input name="type" value="irregularCircle" id="irregularCircleToggle" onclick="toggleControl(this);" type="radio">

115	<label for="irregularCircleToggle">画椭圆</label>

116	<input name="type" value="irregularTriangle" id="irregularTriangleToggle" onclick="toggleControl(this);" type="radio">

117	<label for="irregularTriangleToggle">画不规则三角形</label>

118	<input name="type" value="irregularSquare" id="irregularSquareToggle" onclick="toggleControl(this);" type="radio">

119	<label for="irregularSquareToggle">画不规则四边形</label>

120	<input name="type" value="irregularPentagon" id="irregularPentagonToggle" onclick="toggleControl(this);" type="radio">

121	<label for="irregularPentagonToggle">画不规则五边形</label>

122	<input name="type" value="irregularHexagon" id="irregularHexagonToggle" onclick="toggleControl(this);" type="radio">

123	<label for="irregularHexagonToggle">画不规则六边形</label>

124

</li>

125

</ul>

126

127	<div id="docs">

128	<p>1、在地图上点击鼠标左键就可以画一个点</p>

129	<p>2、在地图上点击鼠标左键开始画线的起点，继续单击左键是画转折点，双击左键则是完成画线操作</p>

130	<p>3、在地图上点击鼠标左键开始画面的起点，继续单击左键是画转折点，双击左键则是完成画面操作</p>

131	<p>4、按住shift键是开启自由画图模式，在画线和画面时按住shift键，同时一直按着鼠标左键在地图上移动，将绘制出鼠标移动的细节图形</p><p>

http://hsjian042.blog.163.com/blog/static/176983377201161525834982/