• HappyGIS 正式上线啦~
    • HappyGIS 现在已经支持 Markdown 格式评论~

WebGIS 2-2-2交互式绘制(规则)多边形

WebGIS gooin 958次浏览 0个评论

点击多边形绘制按钮后,可在地图任意位置(规则)绘制多边形

1. 步骤

1) 全局变量

        var map, layer;
        var drawControl; //笔
        var vecLayer; //纸

2) 加载地图

        function init() {

//            创建地图容器
            map = new OpenLayers.Map('map1',
                    {
                        controls: [
                            new OpenLayers.Control.PanZoomBar(),//缩放面板的工具控件
                            new OpenLayers.Control.LayerSwitcher(), //图层切换控件
                            new OpenLayers.Control.Navigation(),    //此控件处理伴随鼠标事件的地图浏览
                            new OpenLayers.Control.MousePosition()//此控件显示鼠标移动时,所在点的地理坐标
                        ]
                    }
            );

//            添加图层0
            layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
                    {
//                        添加GoogleMap的矢量图层
                        layerType: Zondy.Enum.GoogleLayerType.VEC,
//                        设为底图
                        isBaseLayer: true
                    }
            );

//            将图层添加到地图中
            map.addLayers([layer0]);
//            设置地图显示中心和缩放级别
            map.setCenter(new OpenLayers.LonLat(0, 0), 2);

        }

3) //创建一个矢量图层用于交互式绘制

Note:创建多边形的区别是一个单词
OpenLayers.Handler.Polygon
OpenLayers.Handler.Point

创建规则多边形与上面两者的区别是 单词 和 指定绘制几边形的边数
OpenLayers.Handler.RegularPolygon
第4步中激活绘图控件后加一行代码指定绘制规则多边形的边数
drawControl.handler.setOptions({ sides: 5 });//设置绘制五边形

        function initDrawControl() {
//            创建图层
            vecLayer = new OpenLayers.Layer.Vector("DrawLayer");
//            添加到地图中
            map.addLayer(vecLayer);


//            创建绘制**点**工具
//            drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.Point);
//            创建绘制**多边形**工具
//           drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.Polygon);

//            创建绘制**规则多边形**工具
            drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.RegularPolygon);

//            将绘图工具添加到控件中
            map.addControl(drawControl);
        }

4) 开始绘制函数

                  function StarDraw() {
                      //如果绘图图层不存在
                      if (vecLayer == null) {
          //                初始化绘图
                          initDrawControl();

                      }
                      drawControl.activate();//激活绘图控件
                      drawControl.handler.setOptions({ sides: 5 });//设置绘制五边形

5) 清除图层

         function clearMap() {
             if (vecLayer) {
 //                移除绘图图层
                 map.removeLayer(vecLayer);
             }
 //            绘图图层赋值为空
             vecLayer = null;
 //            关闭绘图控件
             drawControl.deactivate();
         }         

注:雷同代码不再做注释,如有不懂请参阅前面发布的文章

2.完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>几何图形绘制</title>

    <link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>

    <script src="../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="../libs/OpenLayers.js" type="text/javascript"></script>
    <script src="../libs/zdclient.js" type="text/javascript"></script>
    <script type ="text/javascript">

        var map, layer;
        var drawControl; //笔
        var vecLayer; //纸
        //加载一个图层
        function init() {

//            创建地图容器
            map = new OpenLayers.Map('map1',
                    {
                        controls: [
                            new OpenLayers.Control.PanZoomBar(),//缩放面板的工具控件
                            new OpenLayers.Control.LayerSwitcher(), //图层切换控件
                            new OpenLayers.Control.Navigation(),    //此控件处理伴随鼠标事件的地图浏览
                            new OpenLayers.Control.MousePosition()//此控件显示鼠标移动时,所在点的地理坐标
                        ]
                    }
            );

//            添加图层0
            layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
                    {
//                        添加GoogleMap的矢量图层
                        layerType: Zondy.Enum.GoogleLayerType.VEC,
//                        设为底图
                        isBaseLayer: true
                    }
            );

//            将图层添加到地图中
            map.addLayers([layer0]);
//            设置地图显示中心和缩放级别
            map.setCenter(new OpenLayers.LonLat(0, 0), 2);

        }
        //创建一个矢量图层用于交互式绘制
        function initDrawControl() {
//            创建图层
            vecLayer = new OpenLayers.Layer.Vector("DrawLayer");
//            添加到地图中
            map.addLayer(vecLayer);
//            创建绘制**规则多边形**工具
            drawControl = new OpenLayers.Control.DrawFeature(vecLayer, OpenLayers.Handler.RegularPolygon);
//            将绘图工具添加到控件中
            map.addControl(drawControl);
        }
//        开始绘制函数
        function StarDraw() {
            //如果绘图图层不存在
            if (vecLayer == null) {
//                初始化绘图
                initDrawControl();

            }
            drawControl.activate();//激活绘图控件
            drawControl.handler.setOptions({ sides: 5 });//设置绘制五边形

            //激活控件
        }

        //清除图层
        function clearMap() {
            if (vecLayer) {
//                移除绘图图层
                map.removeLayer(vecLayer);
            }
//            绘图图层赋值为空
            vecLayer = null;
//            关闭绘图控件
            drawControl.deactivate();
        }
    </script>
</head>
<body onload="init()">
<div  class="ToolLib"> 
<input  type ="button" class="ButtonLib" value="绘制几何图形" onclick="StarDraw()" />
<input  type ="button" class="ButtonLib" value="清除绘制" onclick="clearMap()" />
  </div>
  <div id="map1"></div>
</body>
</html>

3.效果

规则多边形绘制(5边形)

Paste_Image.png

多边形绘制

Paste_Image.png


HappyGIS 版权所有, 本站文章可随意转载, 请注明出处: 转载请注明WebGIS 2-2-2交互式绘制(规则)多边形
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址