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 レプリケーションの原理と実際のアプリケーションの詳細な説明

推薦する

WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

実践的な経験を共有するためのコードチェックツールstylelintの紹介

目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

JavaScript キャンバス テキスト クロック

この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的...

Vue は左右のスライド効果のサンプルコードを実装します

序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...

WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)

目次1. 効果図(複数列) 2. 通常セレクター: mode = selector、複数列セレクター...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

Centos7.6にTomcat-8.5.39をインストールする方法

Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...

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

MySQL 5.7.27の詳細なダウンロード、インストール、および構成チュートリアルは参考までに、具...

MySQL の最適化: InnoDB の最適化

勉強の計画は簡単に中断され、継続するのが困難です。先日、社内で事業の方向性を調整するための会議があり...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

Vue.js でフォントを読み込む正しい方法

目次font-faceでフォントを正しく宣言するフォントをプリロードするフォントをホストするにはli...

ピクセルを包括的なブランド体験に変えるヒント

編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...