高德地图实现画多边形,编辑围栏,清空多边形,正逆地址解析

1. 初始化

   <div id="container"></div>
 return new Promise((res)=>{
        let that =this
      AMapLoader.load({
        // key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugin: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: { // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
        Loca: { // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          this.AMap = AMap;
          let map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 13,
          });
          this.map = map;
            map.plugin(["AMap.Geocoder"], function () {
          that.geocoder = new AMap.Geocoder({ 
             city: "010", //城市设为北京，默认：“全国”
             radius: 1000 //范围，默认：500
          });
          map.addControl(that.geocoder);
          });
          res(AMap)
        })
        .catch((e) => {
          console.log('e',e);
        });
      })
      }else{
        return new Promise((res)=>{
        let that =this
      AMapLoader.load({
        key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugin: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {// 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
        Loca: {// 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          this.AMap = AMap;
          let map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 13,
          });
          this.map = map;
            map.plugin(["AMap.Geocoder"], function () {
          that.geocoder = new AMap.Geocoder({ 
             city: "010", //城市设为北京，默认：“全国”
             radius: 1000 //范围，默认：500
          });
          map.addControl(that.geocoder);
          });
          res(AMap)
        // }
          // 启用工具条
          map.plugin(["AMap.Geolocation"], function () {
          var geolocation = new AMap.Geolocation({
             enableHighAccuracy: true, //是否使用高精度定位，默认:true
             timeout: 15000, //超过10秒后停止定位，默认：无穷大
             maximumAge: 5000, //浏览器原生定位的缓存时间 定位结果缓存0毫秒，默认：0
             convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
             showButton: true, //显示定位按钮，默认：true
             buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
             buttonOffset: new that.AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
             showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
             showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
             panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
             zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
           });
           that.map.addControl(geolocation);  //添加控件,可以是任何插件对象
           geolocation.getCurrentPosition(); //获取用户当前的精确位置信息
           that.AMap.event.addListener(geolocation, "complete",
            function onComplete(data) {   //data具体的定位信息
              if (that.paths.length > 0) {
                that.draw();
                that.temporary = [];
                that.paths.forEach((item, index) => {
                  that.temporary.push([item.lng, item.lat]);
                });
                that.edit(that.temporary)
              } else {
                that.markersPosition = [
                  data.position.getLng(),
                  data.position.getLat(),
                ];
                that.draw();
                that.temporary = [];
                that.temporary.push([
                  data.position.getLng() + 0.006,
                  data.position.getLat() + 0.005,
                ]);
                 that.temporary.push([
                  data.position.getLng() + 0.006,
                  data.position.getLat() - 0.005,
                ]);
                that.temporary.push([
                  data.position.getLng() - 0.006,
                  data.position.getLat() - 0.005,
                ]);
                that.temporary.push([
                  data.position.getLng() - 0.006,
                  data.position.getLat() + 0.005,
                ]);
              }
            }
        );
        that.AMap.event.addListener(geolocation, "error", function onError(data) {
            //返回定位出错信息
            this.$message.warning(error)
          }
        ); 
          });
          map.plugin(["AMap.ToolBar"], function () {
            that.ToolBar=new AMap.ToolBar()
            map.addControl(that.ToolBar);
          });
          map.plugin(["AMap.MouseTool"], function () {
            map.addControl(new AMap.MouseTool(), {});
          });

          map.plugin(["AMap.PolyEditor"], function () {
            map.addControl(new AMap.PolyEditor());
          });
          map.plugin(["AMap.ControlBar"], function () {
            map.addControl(new AMap.ControlBar());
          });
          map.plugin(["AMap.CircleEditor"], function () {
            map.addControl(new AMap.CircleEditor());
          });
        })
        .catch((e) => {
          console.log('e',e);
        });
      })
      }
    },

初始化

  draw() {
      var that = this;
      this.map = new this.AMap.Map("container", {
        center: [116.3975, 30],
        resizeEnable: true,
        zoom: 14,
        pitch: 80,
        rotation: -0,
        viewMode: "2D", //开启3D视图,默认为关闭
        buildingAnimation: true, //楼块出现是否带动画
      });
    },

2. 编辑围栏

edit(paths) {
      var that = this;
      const path = paths;
      const AMap = this.AMap;
      let polygon = new this.AMap.Polygon({
        path: path,
        strokeColor: "#1791fc", //线条颜色
        strokeWeight: 1,
        borderWeight: 1, //线条宽度
        strokeOpacity: 1, //0.2
        fillOpacity: 0.35, //0.4
        fillColor: "#1791fc", //多边形填充颜色
        zIndex: 50,
      });
      this.map.add(polygon);
      this.polygonItem.push(polygon);
      // 缩放地图到合适的视野级别
      this.map.setFitView([polygon]);
      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
      this.polyEditor.open();
      this.polyEditors.push(this.polyEditor);
      this.temporary = polygon.getPath();
      this.polyEditor.on("addnode", function (event) {
        console.info("触发事件：addnode", event);
        console.info("修改后的经纬度：", polygon.getPath());
        that.temporary = polygon.getPath();
      });

      this.polyEditor.on("adjust", function (event) {
        console.info("触发事件：adjust", event);
        console.info("修改后的经纬度：", polygon.getPath());
        that.temporary = polygon.getPath();
      });
      this.polyEditor.on("removenode", function (event) {
        console.info("触发事件：removenode", event);
        console.info("修改后的经纬度：", polygon.getPath());
        that.temporary = polygon.getPath();
      });
      this.polyEditor.on("end", function (event) {
        console.info("触发事件： end", event);
        console.info("修改后的经纬度：", polygon.getPath());
        that.temporary = polygon.getPath();
        // event.target 即为编辑后的多边形对象
      });
    },

3. 点击绘制围栏按钮的点击事件

// 绘制多边形围栏
    drawRectangle() {
      this.mouseTool = new this.AMap.MouseTool(this.map);
      const polygon = this.mouseTool.polygon({
        strokeColor: "#1791fc",
        strokeOpacity: 1,
        fillColor: "#1791fc",
        fillOpacity: 0.5,
        strokeStyle: "solid",//还能是虚线
        draggable: true,
        strokeWeight: 1,
        cursor: "ani",
        lineJoin: "round"
      });
      this.mouseTool.on("draw", function (event) {
        console.log("e", event);
        //判断确保只能绘制一个覆盖物
        this.map.clearMap();
        this.path = [];
        // event.obj 为绘制出来的覆盖物对象
        var polygonItem = event.obj;
        var paths = polygonItem.getPath(); //取得绘制的多边形的每一个点坐标
          var path = []; // 编辑的路径     
          paths.forEach((v) => {
            path.push([v.lng, v.lat]);
          });
          this.path = path;
          this.edit(this.path);
          this.polygonItem.push(event.obj);
      });
    },

5. 正逆地址解析
   输入框输入地址,地图定位到当前位置
   

 this.geocoder.getLocation(detail, function (status, result) {
      if (status === 'complete' && result.info=='OK') {
        let Lng=result.geocodes[0].location.lng
        let Lat=result.geocodes[0].location.lat
        that.markersPosition = [ Lng, Lat ];
        that.draw();
        that.temporary = [];
        that.temporary.push([
          Lng + 0.006,
          Lat + 0.005
        ]);
        that.temporary.push([
         Lng + 0.006,//左
         Lat - 0.005,
        ]);
        that.temporary.push([
         Lng - 0.006,
         Lat - 0.005,  //下
        ]); 
        that.temporary.push([
         Lng - 0.006,
         Lat + 0.005,//右
        ]);
        that.edit(that.temporary);
        that.map.addControl(that.ToolBar);
       } else {
         log.error('根据经纬度查询地址失败')
      }
     });
    },

6. 删除多边形

   del() {
      this.polyEditors.forEach((v) => {
        v.close();
      });
      this.map.clearMap(); // 删除地图所有覆盖物
      this.temporary=[]
    }