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

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 ? "ポインター" : "";
      });
    },
  },
};
</スクリプト>

Vue+Openlayer で選択要素を使用する実装コードに関するこの記事はこれで終わりです。Vue Openlayer 選択要素に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+openlayers は州や市の境界線を描画します
  • Openlayers が Vue プロジェクトに行政区画を描く
  • vue-openlayers はマップ座標ポップアップボックス効果を実現します
  • Vue+Openlayers カスタムトラックアニメーション
  • VueはOpenLayersを使用して移動するポイントアニメーションを実装します

<<:  Dockerコンテナ同士を接続する3つの方法の詳しい説明

>>:  MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

推薦する

MySQLの基本操作を詳しく解説(第2部)

序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...

MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...

Ubuntu 16.04.5LTS に SVN をインストールする手順

この記事では、UbuntuシステムでSVNを設定するプロセスを簡単に紹介します。ソースを更新sudo...

スーパーバイザーを使用して nginx + tomcat コンテナを管理する例

必要: docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

MySQL innodb_autoinc_lock_mode について

innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...

カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較

1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...

MySQL インデックス失敗の原理

目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...