Vue+Openlayerはグラフィックスのドラッグと回転変形効果を実現します

Vue+Openlayerはグラフィックスのドラッグと回転変形効果を実現します

序文

Openlayer には独自の拡張プラグイン ol-ext があり、ここではこれを使用して、ドラッグ、回転、ズーム、ストレッチ、移動などのグラフィック操作とそのイベント監視を実装します。結局のところ、描画後はデータをバックエンドに保存し、データベースに格納する必要があります。

関連資料

1. ol-ext 公式住所: 入口

2. ol-ext 対応データアドレス: エントリ

3.ol-ext ソースコード gitee アドレス: エントリ

4. Openlayersの最新公式サイト: 入り口

5. Openlayers公式サイトAPI: エントリー

成果を達成する

回転、ドラッグ

図1: 実施効果

図2: 回転効果

図3: 左右移動効果

実装手順

1. OpenLayersをVueに導入する

npm i ol --save

添付ファイル: npm は指定されたバージョンコマンドをダウンロードします。必要な場合は取得できます。

npm をインストール --save-dev [email protected]

2. OpenLayers拡張パッケージol-extをvueに導入する

npm インストール ol-ext --save

添付ファイル: npm は指定されたバージョンコマンドをダウンロードします。必要な場合は取得できます。

npm をインストール --save [email protected]

3. マップコンテナを作成する

<テンプレート>
  <div id="map" class="map"></div>
</テンプレート>

4. jsに特定の設定を導入します。特定の変更に応じて、ここに独自の設定を入れます。

関連:

"ol/ol.css"をインポートします。
「ol/View」からViewをインポートします。
「ol/Map」からマップをインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/Overlay」からOverlayをインポートします。
「ol/source/XYZ」からXYZをインポートします。
"ol/source" から、{ Vector を SourceVec 、Cluster、Vector を VectorSource として } インポートします。
"ol"から{Feature}をインポートします。
"ol/layer" から、Vector を LayerVec として、Vector を VectorLayer としてインポートします。
"ol/geom" から { Point、LineString、Polygon } をインポートします。
 
輸入 {
    スタイル、
    アイコン、
    埋める、
    脳卒中、
    文章、
    CircleStyle として Circle、
  } から "ol/style" へ;
  "ol/source" から { OSM、TileArcGISRest } をインポートします。

ol-ext関連:

'ol-ext/interaction/Transform' から ExtTransform をインポートします。

5. マップメソッドを実装します。

データ() {
      戻る {
        マップ: null、
        center: [116.39702518856394, 39.918590567855425], //北京の故宮の経度と緯度centerSize: 11.5,
        投影: "EPSG:4326",
 
    }
}
マウント() {
  この.initMap()
}
メソッド: {
      //マップを初期化する initMap() {
        // マップをレンダリングする varlayers = [
          //濃い青の背景// new TileLayer({
          // ソース: new XYZ({
          // URL:
          // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          // })、
          // })、
          // 背景を初期化 // new TileLayer({
          // ソース: new OSM(),
          // })
          新しいタイルレイヤー({
            タイトル: 「ストリートマップ」
            ソース: 新しいXYZ({
              url: "http://localhost:8888/haoxing-map/sosomaps/roadmap/{z}/{x}/{y}.jpg", //zwh ローカル使用}),
          })、
        ];
 
        this.map = 新しいマップ({
          レイヤー: レイヤー、
          ターゲット: "マップ"、
          ビュー: 新しいビュー({
            中心: this.center,
            投影: this.projection、
            ズーム: this.centerSize、
            最大ズーム: 17,
            最小ズーム: 8,
          })、
        });
      },

6. マップにポリゴンデータを追加する

マウント() {
 この.initMap()
 this.createPolygon()
},
 メソッド: {    
 
    //ポリゴンを作成する createPolygon() {
        //レイヤーを追加し、ポイント範囲を設定します const polygon = new Feature({
          ジオメトリ: 新しいポリゴン([
            [
              [116.39314093500519,40.0217660530101],
              [116.47762344990831,39.921746523871924],
              [116.33244947314951,39.89892653421418],
              [116.30623076162784,40.00185925352143],
            ]
          ])、
        })
        //スタイルを設定する polygon.setStyle(new Style({
          ストローク: 新しいストローク({
            幅: 4,
            色: [255, 0, 0, 1],
          })、
        }))
        //マップにグラフィックを追加します this.map.addLayer(new VectorLayer({
          ソース: 新しい VectorSource({
            特徴: [ポリゴン],
          })、
        }))
      },
 
}

7. マップに具体的な操作方法や効果を追加する 

マウント() {
  この.initMap()
  this.createPolygon()
  編集時にこれ()
},
//操作イベント onEdit() {
   const transform = 新しい ExtTransform({
       回転変換を有効にする: false、
       ヒット許容度: 2,
       translate: true, // ドラッグ Stretch: false, // ストレッチ scale: true, // スケール rotate: true, // 回転 translateFeature: false,
       反転しない: true、
       // レイヤー: [],
    })
   this.map.addInteraction(変換)
 
 
  //開始イベント transform.on(['rotatestart','translatestart'], function(e){
          // 回転
          startangle = e.feature.get('angle')||0 とします。
          // 翻訳
          コンソールログ(1111);
          console.log(開始角度);
        });
  //回転 transform.on('rotating', function (e) {
          コンソールログ(2222);
          console.log("回転: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2));
          コンソールログ(e);
        });
 //移動 transform.on('translating', function (e){
          コンソールログ(3333);
          コンソールログ(e.delta);
          コンソールログ(e);
 
        });
 //ドラッグイベント transform.on('scaling', function (e){
          コンソールログ(4444);
          console.log(e.scale);
          コンソールログ(e);
        });
  //イベント終了 transform.on(['rotateend', 'translateend', 'scaleend'], function (e) {
          コンソールログ(5555);
        });
 
},

グラフィックスのドラッグと回転変形効果を実現するための Vue+Openlayer に関するこの記事はこれで終わりです。Vue Openlayer に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはOpenLayersを使用してTiandi MapとAmapを読み込み
  • vue+openlayer をベースにマップの集約と散乱効果を実現
  • Openlayers が Vue プロジェクトに行政区画を描く
  • Vue+Openlayers カスタムトラックアニメーション
  • VueはOpenLayersを使用して移動するポイントアニメーションを実装します

<<:  MySQL DEFINER の使用方法の詳細な説明

>>:  Linux の操作とメンテナンスの基本システムディスク管理チュートリアル

推薦する

MySQLデータベースインデックスの詳細な紹介

目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...

いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる

目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...

Windows Server 2008 R2 マルチユーザー リモート デスクトップ接続ライセンス

仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...

モバイルブラウザが位置をサポートしない場合の解決策: 修正

具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...

MySQL パラメータ関連の概念とクエリ変更方法

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...

JavaScript関数におけるこのポイントの問題の詳細な説明

このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクト...

HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...

JSで画面録画機能を作成する

OBS studioかっこいいですが、 JavaScriptもっとかっこいいです。では、 JavaS...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

React Hooksを使用する際のよくある落とし穴

React Hooks は React 16.8 で導入された新しい機能で、クラスを使用せずに状態や...

VUEはFlappy Birdゲームのサンプルコードを実装します

Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...