高德地图画社区网格

最新推荐文章于 2024-01-25 10:18:03 发布

小伙子の

最新推荐文章于 2024-01-25 10:18:03 发布

阅读量415

点赞数 1

文章标签： javascript 前端 vscode

本文链接：https://blog.csdn.net/weixin_62037944/article/details/131394340

版权

// 获取所有网格
    getGrids() {
      this.$http
        .request({
          url: "/rbac/admin/org/info/findOrgListByLevel",
          method: "POST",
          data: {
            orgLevel: 6,
            pageSize: -1,
            pageNo: 1,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200 && res.content) {
            this.getGridEchart(res.content.list);
          } else {
            this.$message({
              message: "暂无网格",
              type: "warning",
            });
          }
        });
    },

// 画网格
    getGridEchart(data) {
      if (this.polygons2.length > 0) {
        this.myMap.remove(this.polygons2);
        this.polygons2 = [];
      }
      data.forEach((item, index) => {
        if (item.pointPosition) {
          let polygonArr = [];
          item.pointPosition.split(",").forEach((e) => {
            polygonArr.push(e.split(":"));
          });
          if (index < 100) {
            if (index < 10) {
              index = "00" + index;
            } else {
              index = "0" + index;
            }
          }
          let color = "#" + index + "5EC";
          let polygon = new AMap.Polygon({
            map: this.myMap,
            path: polygonArr, //设置多边形边界路径
            strokeColor: "#fee", //线颜色
            strokeOpacity: 0.5, //线透明度
            strokeWeight: 1, //线宽
            fillColor: color, //填充色
            fillOpacity: 0.5, //填充透明度
            extData: {
              name: item.label,
            },
          });
          let that = this;
          //变色
          polygon.on("mouseover", function (e) {
            // console.log(e);
            this.setOptions({
              strokeOpacity: 1, //线透明度
              strokeWeight: 2, //线宽
              fillOpacity: 1, //填充透明度
            });
            that.sText = new AMap.Text({
              text: item.label,
              anchor: "center", // 设置文本标记锚点
              draggable: false,
              cursor: "pointer",
              angle: 10,
              style: {
                "text-align": "center",
                "font-size": "12px",
                "background-color": "transparent",
                border: "none",
                "z-index": "-1",
              },
              zIndex: -1,
              position: that.getCenterPoint(polygonArr),
            });
            that.sText.setMap(that.myMap);
          });
          polygon.on("mouseout", function () {
            this.setOptions({
              strokeOpacity: 0.5, //线透明度
              strokeWeight: 1, //线宽
              fillOpacity: 0.5, //填充透明度
            });
            if (that.sText) {
              that.myMap.remove(that.sText);
              that.sText = "";
            }
          });
          this.polygons2.push(polygon);
        }
      });
      // console.log(this.polygons2);
      this.myMap.add(this.polygons2);
    },