高德.js2.0绘制点聚合,并点击点出现自定义样式弹窗

最新推荐文章于 2024-09-26 19:12:13 发布

神探小白牙

最新推荐文章于 2024-09-26 19:12:13 发布

阅读量438

点赞数 1

分类专栏：高德地图文章标签：前端

本文链接：https://blog.csdn.net/anny_mei/article/details/140012971

版权

高德地图专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述
我这里依旧使用AMapLoader插件

代码如下

  // 初始化高德地图
    initMap() {
      AMapLoader.load({
        key: "fb35c92d4019cfafeca876fd5514bb47", //key值是key值 和安全密钥不同
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.GeoJSON",
          "AMap.MarkerClusterer",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.Polyline",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表,用到的再次注册，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map("mapContainer", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 14.0, // 初始化地图级别
          center: [114.885796, 40.768555], //中心点坐标
          resizeEnable: true,
        });
        //使用CSS默认样式定义地图上的鼠标样式
        this.map.setDefaultCursor("pointer");

        let styleName = "amap://styles/whitesmoke";
        this.map.setMapStyle(styleName);
        this.setMraker();
      });
    },
    setMraker() {
      let arr = this.mapPointsList.map((item) => {
        return {
          lnglat: [item.cordsArr[0], item.cordsArr[1]],
          extData: item,
        };
      });
     // 此处为点聚合
      this.map.plugin(["AMap.MarkerCluster"], () => {
        this.markerClusterer = new AMap.MarkerCluster(this.map, arr, {
          gridSize: 100,
          renderMarker: this.renderMarker,
        });

        this.mapPointMrksClu.push(this.markerClusterer);
      });
    },
    // 自定义点位渲染方法
    renderMarker(context) {
      const marker = context.marker;

      const item = context.data[0].extData;

      let bgtTM = "https://union.huaxindata.com.cn/dma/img/icon_19.png";
      // 获取当 marker 类型的覆盖物
      // 创建点面覆盖物实例
      let icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(53, 53),
        // 图标的取图地址
        image: item.iconUrl,
        // 图标所用图片大小
        // imageSize: new AMap.Size(12, 12),
      });
      // 点标记显示内容，HTML要素字符串

      // <img src="img/icon_19.png">
      let markerContent = `
  <div class="map-item__base" id='mark${item.id}'>
    <div class="arrowBox">
      <img src="${bgtTM}">
    </div>
    <div style="height:50px"><i class="fontfamily ali-icon-dingweisvg" style="color:${item.typeColour}"></i></div>
    <div class="pointBox"> <img src="${item.iconUrl}"></div>
  </div>
  `;

      let content = `<div class='pointName' id='pointName${item.id}'><div class="pointTxt">${item.name}</div></div>`;
      let offset = new AMap.Pixel(0, 0); //设置偏移量
      marker.setIcon(icon);
      marker.setContent(markerContent);
      marker.setOffset(offset);
      marker.setLabel({
        direction: "top",
        content: content,
        offset: new AMap.Pixel(0, -5),
      });

      let pointName = document.getElementsByClassName("pointName")[0];
      if (pointName) {
        if (item.nameDisplay == 1) {
          pointName.style.display = "block";
        } else {
          pointName.style.display = "none";
        }
      }

      let div = document.getElementsByClassName("amap-marker-label");
      if (div) {
        // 鼠标移入移出事件
        if (item.nameDisplay == 0) {
          $(div).bind("mouseenter", () => {
            // 鼠标移入显示标签
            pointName.style.display = "block";
            div.style.zIndex = "999";
          });
          $(div).bind("mouseleave", () => {
            // 鼠标移出隐藏标签
            pointName.style.display = "none";
            div.style.zIndex = "unset";
          });
        }
      }

      // 给点添加点击事件
      marker.on("click", (event) => {
        // classify  1溯源站，2排水户
        if (item.classify == "2") {
          this.clickMark(event, item);
        } else {
          this.currentNode = item;
          this.changeTree();
        }
      });
      this.mapPointMrksClu.push(marker);
    },
    // 打开信息窗体
    clickMark(e, item) {
      let title = item?.name;
      //实例化信息窗体
      let content = [];

      let trs = "";
      if (item.indexVOS && item.indexVOS.length) {
        item.indexVOS.forEach((e) => {
          trs += `<ul class="meddil_val">
             <li>
            <div class="title_info">${e.indexName}:</div>
            <div class="title_value" id="${item.id}-${e.pointId}"> ${
            e.val || ""
          }<span class="unit">${e.unit}</span>
            </div>
          </li>
          </ul>`;
        });
      } else {
        trs += "<ul class='meddil_val'><li>暂无数据</li></ul>";
      }
      content.push(trs);

      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.createInfoWindow(title, content.join("<br/>"), item),
        offset: new AMap.Pixel(16, -45),
      });
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    //构建自定义信息窗体
    createInfoWindow(title, content, item) {
      let info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      info.style.width = "400px";
      // 定义顶部标题
      let top = document.createElement("div");
      let titleD = document.createElement("div");
      let closeX = document.createElement("div");
      top.className = "info-top";
      top.style.backgroundColor = item.typeColour;

      titleD.innerHTML = title;
      closeX.innerHTML = "<i class='el-icon-close'></i>";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      let middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "white";
      middle.innerHTML = content;
      info.appendChild(middle);

      return info;
    },

    //关闭信息窗体
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },

自定义样式如下

/deep/.amap-marker {
  position: relative;
  height: 50px;
  .map-item__base {
    position: absolute;
    z-index: 9852432;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    top: -27px;
    left: -14px;
  }
  .arrowBox {
    position: absolute;
    height: 50px;
    top: -1px;
    left: 1px;
    img {
      position: absolute;
      height: 50px;
    }
  }
  .fontfamily {
    position: absolute;
    left: 5px;
    top: 4px;
    font-size: 34px;
  }
  .pointBox {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      display: inline-block;
      width: 16px;
    }
  }
}
/deep/.el-icon-close {
  color: #fff;
  font-size: 17px !important;
  cursor: pointer;
  font-weight: 600 !important;
  margin: 0 0 0 10px !important;
}
/deep/ .content {
  max-height: 500px;
  overflow: auto;
}
.rala_select {
  width: 120px;
  margin-left: 8px;
}
/deep/.amap-icon {
  font-size: 34px;
  background: rgb(71, 63, 63);
}
/deep/ .amap-marker-label {
  top: 20px !important;
  border: 0;
  background: transparent;
  margin-left: -16px;

  .pointTxt {
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
  }
}
/deep/.amap-marker {
  position: relative;
  height: 50px;
  .map-item__base {
    position: absolute;
    z-index: 9852432;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    top: -27px;
    left: -14px;
  }
  .arrowBox {
    position: absolute;
    height: 50px;
    top: -1px;
    left: 1px;
    img {
      position: absolute;
      height: 50px;
    }
  }
  .fontfamily {
    position: absolute;
    left: 5px;
    top: 4px;
    font-size: 34px;
  }
  .pointBox {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      display: inline-block;
      width: 16px;
    }
  }
}
/deep/.info-top {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px;
  color: #fff;
  line-height: 30px;
}
/deep/.info-middle {
  max-height: 300px;
  overflow: auto;
}
/deep/.info-middle .meddil_val {
  padding: 4px 0;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 4px 8px;
    font-size: 14px;
    .unit {
      display: inline-block;
      width: 40px;
      margin-left: 12px;
      color: #adaab2;
    }
  }
}