Vue+Openlayer で select を使用して要素を選択する実装コード

<テンプレート>
  <div id="map" ref="map" style="幅: 100vw; 高さ: 100vh"></div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map, View } をインポートします。
"ol/source" から { OSM、Vector を VectorSource としてインポートします。
「ol/layer」から { Vector を VectorLayer として、 Tile を TileLayer として } をインポートします。
「ol/format/GeoJSON」からGeoJSONをインポートします。
 
「ol/interaction/Select」からSelectをインポートします。
"ol/events/condition" から { altKeyOnly、click、pointerMove } をインポートします。
 
エクスポートデフォルト{
  名前: "gif",
  データ（） {
    戻る {
      マップ: {},
      レイヤー: {},
      geojsonデータ:
        タイプ: "FeatureCollection",
        特徴： [
          {
            タイプ: "機能",
            プロパティ:
              タイトル:「アラーム1」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム2」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            タイプ: "機能",
            プロパティ:
              タイトル: 「アラーム3」、
            },
            ジオメトリ:
              タイプ: "ポイント"、
              座標: [123.74363825288785, 44.363694825734726],
            },
          },
        ]、
      },
      選択: {},
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
  },
  メソッド: {
    // マップを初期化する initMap() {
      this.layer = 新しいVectorLayer({
        ソース: 新しい VectorSource({
          機能: 新しい GeoJSON().readFeatures(this.geojsonData)、
        }）、
      });
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          }）、
          このレイヤー、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.912777, 34.730746],
          ズーム: 4.5,
        }）、
      });
 
      this.select = 新しいSelect({
        条件: click, //クリックして選択});
      this.map.addInteraction(this.select);
      this.select.on("選択", (e) => {
        let coordinate = e.mapBrowserEvent.coordinate; //選択された座標を取得します。let properties = e.selected[0].getProperties(); //現在のフィーチャのすべてのプロパティを取得します。});
 
      // ベクター要素上のマウスのスタイルを設定します this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "ポインター" : "";
      });
    },
  },
};
</スクリプト>