一、地图上添加多边形控件：
1、css：
div.olControlPanel
{
top: 0px;
left: 50px;
position: absolute;
}
.olControlPanel div
{
display: block;
24px;
height: 24px;
margin: 5px;
background-color: white;
}
.olControlPanel .olControlMouseDefaultsItemActive
{
background-color: blue;
background-image: url("http://www.cnblogs.com/OpenLayers/theme/default/img/pan_on.png");
}
.olControlPanel .olControlMouseDefaultsItemInactive
{
background-color: orange;
background-image: url("http://www.cnblogs.com/OpenLayers/theme/default/img/pan_off.png");
}
.olControlPanel .olControlDrawFeatureItemActive
{
24px;
height: 22px;
background-image: url("http://www.cnblogs.com/OpenLayers/theme/default/img/draw_polygon_on.png");
}
.olControlPanel .olControlDrawFeatureItemInactive
{
24px;
height: 22px;
background-image: url("http://www.cnblogs.com/OpenLayers/theme/default/img/draw_polygon_off.png");
}
2、js：
function drawVector() {
editLayer = new OpenLayers.Layer.Vector("交互");
map.addLayer(editLayer);
panel = new OpenLayers.Control.Panel();
panel.addControls([
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.DrawFeature(editLayer, OpenLayers.Handler.Polygon,
{ title: '画多边形' })
]);
}
map.addControl(panel);
}
function toggleControl() {
panel.deactivate();
}
二、保存多边形经纬度：
function getLonLat() {
var test = editLayer;
var polygonlist;
if (test != null && test.features.length > 0) {
if (test.features.length > 1) {
alert("只能画一个多边形");
return;
}
var list;
if (test.features[0].geometry.CLASS_NAME == "OpenLayers.Geometry.Polygon") {
list = test.features[0].geometry.components[0].components;
for (var j = 0; j < list.length - 1; j++) {
if (polygonlist == null || polygonlist == "") {
polygonlist = j + ","; //记录多边形的第几个点
}
else {
polygonlist += j + ","; //记录多边形的第几个点
}
polygonlist += list[j].x + ","; //记录经度
polygonlist += list[j].y + ";"; //记录维度
}
}
}
}
三、根据经纬度绘制多边形：
function draw(data){
if (drawlayer != null) {
map.removeLayer(drawlayer);
}
drawlayer = new OpenLayers.Layer.Vector("画图");
map.addLayer(drawlayer);
if (data != null && data.length > 0) {
var times = -1;
var pointList = [];
var type;
var polygonFeature;
var lineFeature;
for (var i = 0; i < data.length; i++) {
var ll = new OpenLayers.LonLat(data[i].Lon, data[i].Lat);
var newPoint = new OpenLayers.Geometry.Point(ll.lon, ll.lat);
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
drawlayer.addFeatures([polygonFeature]);
}
}