高德地图画围栏与编辑围栏

接地图加载后 (4条消息) Vue加载地图的两种方法_程序大白兔的博客-CSDN博客

新增围栏

addArea(){
    this.drawPolygon();
},
drawPolygon () {
      var that=this;
      var mouseTool=new AMap.MouseTool(that.map);
      mouseTool.polygon({
        strokeColor: "#FF33FF", //线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
        strokeOpacity: 1,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
        strokeWeight: 6,//    轮廓线宽度
        strokeOpacity: 0.2,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
        fillColor: '#1791fc',//多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
        fillOpacity: 0.4,//多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
        // 线样式还支持 'dashed'
        strokeStyle: "solid",//strokeStyle
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      })
       mouseTool.on('draw', function(event) {
          // event.obj 为绘制出来的覆盖物对象
          //mouseTool.close(true);//关闭，并清除覆盖物
          //that.map.clearMap();//删除地图上所有的覆盖物
          //that.map.remove(event.obj);//移出
          console.log('覆盖物对象绘制完成坐标点',event.obj.getPath())
      })
    },

编辑围栏

 drawPolygonEdit(){
        var that=this;
        var path =  [
          [116.453322, 39.920255],
          [116.460703, 39.897555],
          [116.452292, 39.892353],
          [116.439846, 39.891365]
        ];
        polygon = new AMap.Polygon({
          path: path,
          strokeColor: "#FF33FF",
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          zIndex: 50,
          bubble: true,
        });
        this.map.add([polygon]);
         // 缩放地图到合适的视野级别
        this.map.setFitView();
        var polyEditor;
        polyEditor = new AMap.PolyEditor(that.map, polygon,path);
        polyEditor.addAdsorbPolygons(polygon)
        polyEditor.open();
        
        //构建自定义信息窗体
        var infoWindow = new AMap.InfoWindow({
            anchor: 'top-left',
            content: "显示信息",
        });
        infoWindow.open(that.map, path[0]=>('地图上围栏的某个点显示信息窗体');
    },

重绘

clearMap(){
        this.map.clearMap();
        this.drawPolygon();
    },

AMap.MouseTool:鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

polygon:开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制.

具体可看高德地图参考手册-地图 JS API v2.0 | 高德地图API (amap.com)

高德地图画围栏与编辑围栏

猜你喜欢