openlayers-交互之多边形

一、地图上添加多边形控件：

1、css：

 div.olControlPanel
        {
            top: 0px;
            left: 50px;
            position: absolute;
        }
       
        .olControlPanel div
        {
            display: block;
            width: 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
        {
            width: 24px;
            height: 22px;
            background-image: url("http://www.cnblogs.com/OpenLayers/theme/default/img/draw_polygon_on.png");
        }
        .olControlPanel .olControlDrawFeatureItemInactive
        {
            width: 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]);
            }

}