高德地图画线、清除线与改变颜色

画线-------是通过创建 new AMap.Polyline实例 并添加到地图上 polyline.setMap(this.GDMap);

清除线----画线的同时把画线创建的实例存储起来通过remove方法移除线

改变线的颜色---通过 setOptions重新设置配置项

完整的代码

代码语言：javascript复制

<el-button @click="drawLine">画折线</el-button>
<el-button @click="changeLineColor">改变颜色</el-button>
<el-button @click="clearAllLine">清除线</el-button>

代码语言：javascript复制

  data() {
    return {
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
      ],
      v: "1.4.4",
      GDMap: null,
      line:[]
    };
  },

代码语言：javascript复制

  mounted() {
    loadMap(this.key, this.plugins, this.v)
      .then((AMap) => {
        this.GDMap = new AMap.Map("GDMap", {
          zoom: 10,
          center: [119.947, 31.7728],
        });
        this.GDMap.on("complete", () => {
          // var geolocation = new AMap.Geolocation({
          //   enableHighAccuracy: true, //是否使用高精度定位，默认:true
          //   timeout: 10000, //超过10秒后停止定位，默认：5s
          //   buttonPosition: "RB", //定位按钮的停靠位置
          //   buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          //   zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
          // });
          // this.GDMap.addControl(geolocation);
          // geolocation.getCurrentPosition(function(status, result) {
          //   if (status == "complete") {
          //     onComplete(result);
          //   } else {
          //     onError(result);
          //   }
          // });

          // //解析定位结果
          // function onComplete(data) {
          //   console.log(data.position);
          // }
        });
      })
      .catch(() => {
        console.log("地图加载失败！");
      });
  },

代码语言：javascript复制

    clearAllLine(){
      //移除line
      this.GDMap.remove(this.line);
    },
    changeLineColor(){
      this.line[0].setOptions({strokeColor:"#ff8033"})
      // this.GDMap.setFitView();
    },
    drawLine() {
      this.line = [];
      //     var path = [
      //     [116.362209, 39.887487],
      //     [116.422897, 39.878002],
      //     [116.372105, 39.90651],
      //     [116.428945, 39.89663]
      // ];
      var path = [
        [
          [116.362209, 39.887487],
          [116.422897, 39.878002],
        ],
        [
          [116.372105, 39.90651],
          [116.428945, 39.89663],
        ],
      ];
      for (let i = 0; i < path.length; i  ) {
        var polyline = new AMap.Polyline({
          path: path[i],
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 3,
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });

        polyline.setMap(this.GDMap);
        // 缩放地图到合适的视野级别
        this.GDMap.setFitView();
        this.line.push(polyline)
      }

      // var mouseTool = new AMap.MouseTool(this.GDMap);
      // //监听draw事件可获取画好的覆盖物
      // var overlays = [];
      // // map.remove(polyline);
      // // 右键结束画线的时候调用
      // mouseTool.on("draw", function (e) {
      //   overlays.push(e.obj);
      //   console.log(e.obj.getPath())
      // });
      // mouseTool.polyline({
      //   strokeColor: "#80d8ff",
      //   //同Polyline的Option设置
      // });
    },

存储 polyline 地图 配置

0 人点赞