効果画像: 実装コード: <テンプレート> <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 ? "ポインター" : ""; }); }, }, }; </スクリプト> Vue+Openlayer で選択要素を使用する実装コードに関するこの記事はこれで終わりです。Vue Openlayer 選択要素に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerコンテナ同士を接続する3つの方法の詳しい説明
>>: MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明
序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...
Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...
効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...
この記事では、UbuntuシステムでSVNを設定するプロセスを簡単に紹介します。ソースを更新sudo...
必要: docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
主に、Nginx で X-Frame-Options、X-XSS-Protection、X-Cont...
ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...
innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...
1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...
目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...
目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...
目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...