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 の操作とメンテナンスの基本システムディスク管理チュートリアル

ブログ    

推薦する

Vueのv-onパラメータの問題についてお話しましょう

Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...

Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

序文WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方...

Linux CRM デプロイメント コードの詳細な説明

Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...

jsプロキシの原理の詳細な説明

目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...

Mysql トランザクションで Update を実行するとテーブルがロックされますか?

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...

TLS暗号化通信を使用してDockerにリモート接続する詳細な例

デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...

Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

HTML の ReadOnly と Enabled の違い

ReadOnly 属性を持つ TextBox は、クライアント上で次のマークアップとして表示されます...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

Datagrip2020 が MySQL ドライバーのダウンロードに失敗する

「downloadlaod」を直接クリックしてもダウンロードできない場合は、ここからダウンロードす...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

MySQL インデックス プッシュダウン (ICP) の簡単な理解と例

序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...

Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールするとサービスが起動できない問題を解決します

今日、mysql の公式サイトから mysql-5.7.18-winx64.zip をダウンロードし...

ウェブデザインにおけるグリッドシステム

グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...