5. OpenLayer クリッククエリ

この領域は、レイヤやサービスごとに属性情報の取得方法やアドレスが異なるため、実際には多くの種類に分かれています。よく使用されるものをいくつか紹介しましょう。

1. ベクターレイヤー VectorLayer

この種のベクターレイヤー属性情報は、フロントエンドキャンバスに直接保存されており、要素 (プロパティ属性、前のセクションのレイヤー導入に関するコメントがあります) を追加するときに動的に割り当てられていれば、直接取得できます。 geojson 形式オブジェクトのデータを追加します。それ以外の場合、クリックして取得するオブジェクトも空のオブジェクトになります。

属性の動的割り当て方法

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

クリックしたときに取得する方法:

    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. wms サービスの TileLayer または ImageLayer をロードします

これはラスターレイヤーであり、画像として認識され、属性情報はフロントエンドに格納されません。リクエストアドレスを通じて取得する必要があります。openlayer は、wms サービスのリクエストアドレススプライシングインターフェイスを提供します。

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. その他のサービス

たとえば、arcgis Server と hypergraph の iserver は空間クエリ用のサービスインターフェイスを提供します。対応するデータを取得するには、パラメーターリクエストを結合する必要があります。

カスタムクエリウィンドウ。openlayer は、自分で作成した要素を動的にバインドできるオーバーレイクラスを提供します。

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

おすすめ