5. OpenLayer-Klickabfrage

Dieser Bereich ist tatsächlich in viele Typen unterteilt, da verschiedene Schichten und Dienste unterschiedliche Methoden und Adressen zum Abrufen von Attributinformationen haben. Lassen Sie uns einige häufig verwendete vorstellen:

1. Vektorebene VectorLayer

Diese Art von Attributinformationen der Vektorebene werden direkt in der Front-End-Leinwand gespeichert. Wir können sie direkt abrufen, sofern Sie sie beim Hinzufügen von Elementen dynamisch zugewiesen haben (Eigenschaftsattribute, es gibt Kommentare zur Ebeneneinführung im vorherigen Abschnitt). Fügen Sie die Daten des Geojson-Formatobjekts hinzu, andernfalls ist der zu erhaltende Klick auch ein leeres Objekt.

Dynamische Zuweisungsmethode für Attribute

var feature = new ol.Feature();
feature.setProperties({你的属性对象})
//或者
var feature = new ol.Feature({
  properties:{你的属性对象}
});

So erhalten Sie es, wenn Sie darauf klicken:

    this.map.on("click", (ev) => {
      const mouse = ev.coordinate; // 鼠标点击的坐标位置
      let feature = this.map.forEachFeatureAtPixel(
        ev.pixel,
        function (feature) {
          return feature;
        }
      );
      //获取属性对象的某个属性值 但是有时候自定义和其他方式加载的根对象不一样，可能获取不到
      const name= feature.get("name")
      //建议直接打印自己去看，一般都是在values_下面
      const properties = feature?.values_?.properties


      //当然也可以获取特定图层的点击要素集合，比如聚合图层
      myVectorLayer.getFeatures(ev.pixel).then((clickedFeatures) => {

      })
    })

2. Laden Sie den TileLayer oder ImageLayer des WMS-Dienstes

Dies ist eine Rasterebene, die als Bild verstanden wird und deren Attributinformationen nicht im Frontend gespeichert werden. Es muss über die Anforderungsadresse abgerufen werden. openlayer stellt die Anforderungsadressen-Spleißschnittstelle des WMS-Dienstes bereit:

map.on('singleclick', function (evt) {
  const viewResolution = view.getResolution();
  const url = wmsSource.getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    'EPSG:4326',
    {'INFO_FORMAT': 'text/html'}  //返回的是表格hmtl标签，可直接挂接到元素上
    //{'INFO_FORMAT': 'application/json'}  //返回的是geojson格式的数据
  );
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((html) => {
        document.getElementById('info').innerHTML = html;
      });
  }
});

3. Andere Arten von Dienstleistungen

Beispielsweise stellen der ArcGIS-Server und der Hypergraph-IServer Dienstschnittstellen für räumliche Abfragen bereit. Sie müssen Parameteranforderungen zusammenfügen, um entsprechende Daten zu erhalten.

Benutzerdefiniertes Abfragefenster. openlayer stellt die Overlay-Klasse bereit, die selbst erstellte Elemente dynamisch binden kann.

//属性窗体
this.overlayForm = new Overlay({
   // 创建一个图层
   element: this.$refs.msgForm.$el, // 图层绑定我们上边的弹窗
   autoPan: true,
   autoPanAnimation: {
      duration: 250,
    },
 });
this.overlayForm.setPosition(undefined); //设置弹窗位置，刚开始我们不让他显示，就是undefined就行
this.map.addOverlay(this.overlayForm); // 然后把弹窗的图层加载到地图上