openlayer实现在地图服务上选择地块的功能

一步一步上前走

已于 2024-07-25 11:29:06 修改

阅读量155

点赞数 1

文章标签：前端 vue

于 2024-07-25 11:27:09 首次发布

本文链接：https://blog.csdn.net/jolie1234/article/details/140684685

版权

实现思路

地图点击事件获取点坐标
根据点坐标做缓冲区并与地图服务做空间查询
查询到的地块结果即为想要选择的地块

关键代码：

this.map.on("singleclick", (evt) => {
      this.currentGroupName = "";
      let layers = [];
      let radius = this.map.getView().getResolution() * 2;
      let circle = new Circle([evt.coordinate[0], evt.coordinate[1]], radius);
      let polygon = polygonFromCircle(circle, 6);
      let mapLayers = this.map.getLayers().getArray();
      for (let i = 0; i < mapLayers.length; i++) {
        let item = mapLayers[i];
        if (item.getVisible()) {
          let source = item.getSource();
          let url = source.getUrl();
          if (url) {
            let layer = this.findLayerByUrl(url, this.layers);
            if (layer && layer.layers) {
              if (layer.supportIdentity) {
                layers = layer.layers;
            }
          }
        }
      }
      if (layers.length > 0) {
        this.source.clear();
        let requests = layers.map((item) => {
          return this.createQuery(polygon, this.srid, item);
        });
        axios
          .all(requests)
          .then(
            axios.spread(function () {
              let results = Array.from(arguments);
              let temp = results.map((item, index) => {
                return T.handleQuery(item, layers[index]);
              });
              //查询到的结果
              T.result = temp.filter((item) => item != undefined);
              T.resultVisible = true;
            })
          )
          .catch((err) => {
        
          })
          .finally(() => {
          
          });
      } else {
  
      }
    });