准确获取overlay，点击地图判断是否在overlay内部

最新推荐文章于 2024-10-16 11:23:07 发布

十一侍卫

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量143

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_59861761/article/details/142584450

版权

removeGroundOverlay(e) {
    let isOut = 1;
    const stationSign = document.querySelectorAll('.station-sign');
    stationSign.length && stationSign.forEach((station) => {
      if (station.contains(e.originalEvent.target)) {
        isOut = 0;
        console.log(station.childNodes[0].childNodes[1].childNodes[5]);
        // 若点击了overlay中触发其他事件的元素
        if (station.childNodes[0].childNodes[1].childNodes[5].contains(e.originalEvent.target)) {
          console.log("comp", JSON.parse(station.childNodes[0].getAttribute('id')));
          emitter.emit('rendGroundChart', JSON.parse(station.childNodes[0].getAttribute('id')))
        }
      }
    })
    if (isOut) {
      // 查找所有 Overlay
      const overlays = this.#map
        ?.getOverlays()
        ?.getArray()
        ?.slice(0)
        ?.filter((item) => item.element.className === "station-sign")
        ?.forEach((item) => {
          this.#map.removeOverlay(item);
      });
    }
  }

以下是渲染overlay的逻辑‘

  addStationOverlay(feature, res) {
    const coor = feature.getGeometry().getCoordinates();
    let stationSign = document.createElement('div');
    stationSign.classList.add('station-sign-item');
    stationSign.innerHTML = `
    <div class="top">
      <div class="head"><span>${feature.get('name')}(${res.station_num})</span></div>
      <div class="body">
        <div class="title">${res.stationSignTitle}：</div>
        <div class="content">${res.description}${res.unit}</div>
      </div>
      <div class="link">
        <div class="title">站点实况</div>
        <img src="${imageUrl('map-tool/arrow-right.png')}" />
      </div>
    </div>
    <div class="bottom">
      <div class="rect"></div>
      <div class="circle"></div>
    </div>
    `;
    // 手动给overlay中的元素增加属性，这样就可以在获取到overlay的同时，也能获取到相关的数据
    // 理论来说应当可以直接给overlay本身添加自定义属性，但是翻了翻搜索，官网也打不开，暂且如此
    const id = document.createAttribute('id');
    id.value = JSON.stringify({
      stationId: res.station_num,
      name: feature.get('name'),
      feature: feature,
      res: res
    });
    stationSign.setAttributeNode(id);
    let stationSignOverlay = new Overlay({
      type: 'shipArea',
      element: stationSign,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, 5],
      position: coor,
      className: 'station-sign',
      zIndex: 4,
    });
    this.map.addOverlay(stationSignOverlay);
  }

以下是overlay 由于数据变化进行的重画，options是新的对overlay的设置

refreshStationOverlay(option) {
    const stationSign = document.querySelectorAll('.station-sign');
    stationSign.length && stationSign.forEach(async (station) => {
      console.log("comp", JSON.parse(station.childNodes[0].getAttribute('id')));
      const { feature, res } = JSON.parse(station.childNodes[0].getAttribute('id'));
      // params 是数据请求的参数
      let newRes = await apiGetStationInfo(params);
      station.childNodes[0].innerHTML = `
        <div class="top">
          <div class="head"><span>${feature.values_.name}(${res.station_num})</span></div>
          <div class="body">
            <div class="title">${option.stationSignTitle}：</div>
            <div class="content">${newRes.data[0].pr}${option.unit}</div>
          </div>
          <div class="link">
            <div class="title">站点实况</div>
            <img src="${imageUrl('map-tool/arrow-right.png')}" />
          </div>
        </div>
        <div class="bottom">
          <div class="rect"></div>
          <div class="circle"></div>
        </div>`;
    });
  }