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>
  • 相关阅读:
    linux查看日志文件内容命令tail、cat、tac、head、echo
    改变自己的128种方法,教你变得更优秀!
    php 23种设计模式
    Swoole消息推送
    PHP 出现 502 解决方案
    【centos7】添加开机启动服务/脚本
    curl 参数配置详解
    i系列标准-互联网周刊
    MySQL 设计与开发规范2
    Cocos Creator webviw网页置顶增加返回键的方法
  • 原文地址:https://www.cnblogs.com/milkmap/p/6382868.html
Copyright © 2011-2022 走看看