zoukankan      html  css  js  c++  java
  • 如何同时编辑2个多边形?

    我们利用鼠标工具来实现多边形编辑,引入鼠标工具插件:

     <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.PolyEditor"></script>

    绘制多边形,如此绘制2个。您也可以绘制多个。

     //在地图上绘制折线
        var editor={};
        editor._polygon1=(function(){
            var arr = [ //构建多边形经纬度坐标数组
            [116.403322,39.920255],
            [116.410703,39.897555],
            [116.402292,39.892353],
            [116.389846,39.891365]
            ]
            return new AMap.Polygon({
                map: map,
                path: arr
            });
        })();

    绘制完毕,打开多边形可编辑属性。即可编辑多边形。

    editor._polygonEditor1= new AMap.PolyEditor(map, editor._polygon1);
    editor._polygonEditor1.open();

    截图如下:

    全部源代码:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>编辑折线、多边形、圆</title>
        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
        <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.PolyEditor"></script>
       
    </head>
    <body>
    <div id="container"></div>
    <script>
        var editorTool, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.403322, 39.900255],//地图中心点
            zoom: 13 //地图显示的缩放级别
        });
        //在地图上绘制折线
        var editor={};
        editor._polygon1=(function(){
            var arr = [ //构建多边形经纬度坐标数组
            [116.403322,39.920255],
            [116.410703,39.897555],
            [116.402292,39.892353],
            [116.389846,39.891365]
            ]
            return new AMap.Polygon({
                map: map,
                path: arr
            });
        })();
    
        editor._polygon2=(function(){
            var arr = [ //构建多边形经纬度坐标数组
            [116.403322,39.921255],
            [116.410703,39.891555],
            [116.402292,39.891353],
            [116.389846,39.891365]
            ]
            return new AMap.Polygon({
                map: map,
                path: arr
            });
        })();
      
        map.setFitView();
       editor._polygonEditor1= new AMap.PolyEditor(map, editor._polygon1);
       editor._polygonEditor1.open();
      
          editor._polygonEditor2= new AMap.PolyEditor(map, editor._polygon2);
       editor._polygonEditor2.open();
    
    
    </script>
    </body>
    </html>
  • 相关阅读:
    Spark学习之路 九、SparkCore的调优之数据倾斜调优
    Spark学习之路 八、SparkCore的调优之开发调优
    Spark Core、Spark Sql、Spark Streaming 联系与区别
    Spark学习之路 七、Spark 运行流程
    Spark学习之路 六、Spark Transformation和Action
    Spark学习之路 五、Spark伪分布式安装
    一起来学习Shell脚本
    简单整理React的Context API
    阅读别人项目源码时的随手记(乱七八糟待归类整理)
    React.Component 与 React.PureComponent(React之性能优化)
  • 原文地址:https://www.cnblogs.com/milkmap/p/6382868.html
Copyright © 2011-2022 走看看