8.openlayers中单击获取要素

前台

• interaction中select方法
• map中forEachFeatureAtPixel方法

geoserver

• wms中getfeatureinfo
• wfs中getfeature

interaction

      let selectSingleClick = new Select();
      selectSingleClick.on('select', function (e) {
        let features = e.target.getFeatures().getArray();
        console.log(features)
      })

      this.map.addInteraction(selectSingleClick);

map中forEachFeatureAtPixel

      this.map.on('click', (e) => {
        this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
          console.log(feature.getId())
          return true; // 不返回true会有层级穿透
        })
      })

wms中getfeatureinfo

      let TileWMSSource = new TileWMS({
        url: 'http://43.143.213.90:8083/geoserver/one/wms',
        params: {LAYERS: "one:base-old", TILED: true},
        serverType: "geoserver",
      })

      this.map.on('click', (e) => {
        let url = TileWMSSource.getFeatureInfoUrl(e.coordinate, this.map.getView().getResolution(), "EPSG:4326", {
          INFO_FORMAT: "application/json", //输出为json字符串
        });

        if (url) {
          fetch(url).then((res) => {
            return res.json()
          }).then(res => {
            console.log(res)
          })
        }
      })

https://www.likecs.com/show-307918330.html