OpenLayers 添加RegularPolygon

最新推荐文章于 2024-08-08 16:17:32 发布

转载最新推荐文章于 2024-08-08 16:17:32 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/boonya/archive/2012/03/18/2404756.html

本文介绍如何利用OpenLayers实现用户交互式的多边形绘制功能，包括选择多边形类型、设置边数、激活与禁用绘制功能。

1、主要涉及类：

OpenLayers.Layer.Vector、OpenLayers.Control.DrawFeature、

OpenLayers.Handler.RegularPolygon

2、方法编写

var polygonControl ;

function addPolygonLayer(){

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

   map.addLayers([polygonLayer]);

   polyOptions = {sides: 4};
   polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
              OpenLayers.Handler.RegularPolygon,{handlerOptions: polyOptions});
            
    map.addControl(polygonControl);
            
    map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            
        document.getElementById('activate').checked = true;
        document.getElementById('deactivate').checked = false;
   }
     function setOptions(options) {
            polygonControl.handler.setOptions(options);
     }

3、操作选项：

<input type="radio" name="type"   value="none" id="deactivate"
                       onclick="polygonControl.deactivate()"
                       checked="checked" />deactivate

<input type="radio" name="type" value="none" id="activate"
onclick="polygonControl.activate()" />activate

 <select name="sides"  onchange="setOptions({sides: parseInt(this.value)})">
      <option value="3">triangle</option>
      <option value="4" selected="selected">square</option>
      <option value="5">pentagon</option>
      <option value="6">hexagon</option>
      <option value="40">circle</option>
  </select>

转载于:https://www.cnblogs.com/boonya/archive/2012/03/18/2404756.html