Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。

import { Modify } from "ol/interaction";

  1. 自動キャプチャ
  2. 点、線、面を変更できます。変更する要素の型を自分で宣言する必要はありません

機能を直接変更する

コアコード:

 // 機能コアコードを変更するmodifyFeature() {
      this.modify = 新しいModify({
        ソース: this.lineStringLayer.getSource(),
      });
      this.map.addInteraction(this.modify);
    },

完全なコード:

<テンプレート>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map, View, Feature } をインポートします。
"ol/source" から { OSM、Vector を VectorSource としてインポートします。
「ol/layer」から { Vector を VectorLayer として、 Tile を TileLayer として } をインポートします。
 
"ol/geom" から { Point、LineString、Polygon } をインポートします。
import { Modify } from "ol/interaction";
エクスポートデフォルト{
  データ() {
    戻る {
      マップ: {},
      ラインストリングレイヤー: {},
      修正する: {}、
    };
  },
  作成された() {},
  マウント() {
    このメソッドは、次のとおりです。
    レイヤーを追加します。
    これを変更してください。
  },
  計算: {},
  メソッド: {
    initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          })、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.2979180563, 30.528298024],
          ズーム: 18,
        })、
      });
    },
    レイヤーを追加します(){
      this.lineStringLayer = 新しいVectorLayer({
        ソース: 新しい VectorSource()、
      });
      this.lineStringLayer.getSource().addFeature() 関数は、
        新機能({
          ジオメトリ: 新しい LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ])、
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    // 機能コアコードを変更するmodifyFeature() {
      this.modify = 新しいModify({
        ソース: this.lineStringLayer.getSource(), //ここでソースが使用されます
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</スクリプト>

さらに、 this.modify.setActive(false)を通じて変更オブジェクトを無効にし、 this.modify.getActive() を通じてアクティブ化ステータスを取得できます。

まずフィーチャを選択し、次にそれを修正します

コアコード:

注意: ここではソースではなく、必ず features 属性を使用してください。 ! ! !

機能を変更する() {
      this.modify = 新しいModify({
        //注: ここではソースではなく、必ず features 属性を使用してください。 ! ! !
        機能: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },

完全なコード:

<テンプレート>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</テンプレート>
 
<スクリプト>
"ol/ol.css"をインポートします。
「ol」から { Map, View, Feature } をインポートします。
「ol/source」から { OSM、Vector を VectorSource、XYZ としてインポートします。
「ol/layer」から { Vector を VectorLayer として、 Tile を TileLayer として } をインポートします。
 
「ol/interaction/Select」からSelectをインポートします。
 
"ol/geom" から { Point、LineString、Polygon } をインポートします。
import { Modify } from "ol/interaction";
エクスポートデフォルト{
  データ() {
    戻る {
      マップ: {},
      ラインストリングレイヤー: {},
      描く: {}、
      修正する: {}、
      選択: {},
    };
  },
  作成された() {},
  マウント() {
    このメソッドは、次のとおりです。
    this.pointerMove();
    レイヤーを追加します。
    this.selectFeature();
    これを変更してください。
  },
  計算: {},
  メソッド: {
    initMap() {
      this.map = 新しいマップ({
        ターゲット: "マップ"、
        レイヤー:
          新しいタイルレイヤー({
            ソース: 新しい OSM()、
          })、
        ]、
        ビュー: 新しいビュー({
          投影: "EPSG:4326",
          中心: [104.2979180563, 30.528298024],
          ズーム: 18,
        })、
      });
    },
    ポインタ移動() {
      this.map.on("ポインタ移動", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "ポインター" : "";
      });
    },
    レイヤーを追加します(){
      this.lineStringLayer = 新しいVectorLayer({
        ソース: 新しい VectorSource()、
      });
      this.lineStringLayer.getSource().addFeature() 関数は、
        新機能({
          ジオメトリ: 新しい LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ])、
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    選択フィーチャ() {
      this.select = 新しい Select();
      this.map.addInteraction(this.select);
    },
    機能を変更する() {
      this.modify = 新しいModify({
        //注: ここではソースではなく、必ず features 属性を使用してください。 ! ! !
        機能: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</スクリプト>

ps: Openlayersはベクター機能を変更します

デモの下の例に次のコードを入れて実行します

<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>機能の変更</title>
<link rel="スタイルシート" href="../theme/default/style.css" rel="外部 nofollow" rel="外部 nofollow" type="text/css">
<link rel="スタイルシート" href="style.css" rel="外部 nofollow" rel="外部 nofollow" type="text/css">
<スタイル タイプ="text/css">

</スタイル>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var マップ、ベクター、コントロール。
関数init(){
マップ = 新しい OpenLayers.Map('map');
var wms = 新しい OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?"、{レイヤー: 'basic'});
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

ベクトル = new OpenLayers.Layer.Vector("ベクターレイヤー");

var ジオメトリ = OpenLayers.Geometry.fromWKT(
'ポリゴン((110 20,120 20,120 10,110 10,110 20),(112 17,118 18,118 16,112 15,112 17))'
);

vectors.addFeatures([新しい OpenLayers.Feature.Vector(ジオメトリ)]);

map.addLayers([wms, ベクトル]);
//グラフィックを描画する controls = new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon);

map.addControl(コントロール);
コントロールをアクティブ化します();
map.setCenter(新しいOpenLayers.LonLat(110, 20), 3);
}

関数 update() {
// controls.deactivate() を変更します。
コントロール = 新しい OpenLayers.Control.ModifyFeature(vectors);
map.addControl(コントロール);
コントロールをアクティブ化します();

}

関数を非アクティブ化する(){
コントロールを非アクティブ化します();
}

</スクリプト>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div><input type = "button" value = "Modify" onclick = "update()"/>
<input type = "button" value = "キャンセル" onclick = "deactivate()"/>
</div>
</本文>
</html>

Vue+Openlayer で要素を変更するために、modify を使用する方法についてはこれで終わりです。Vue Openlayer で要素を変更することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  MySQL水平および垂直テーブル変換操作の実装方法

>>:  Centos7でmysql6の初期化インストールパスワードをインストールする方法

推薦する

Vue 親子コンポーネントの相互値の転送と呼び出し

目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...

MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。

1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...

ログインスライダー検証を実装するJavaScript

この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに...

Linux で MySQL 5.7.19 をアンインストールする方法

1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...

指定フィールドによるMySQLカスタムリストのソートの実装

問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

Vue でのスロット配置と使用状況分析

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

JavaScript - Vue でのスロットの使用: スロット

目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...

MySQL 10進数符号なし更新負数を0に変換

今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

スネークゲームのウェブ版を実装するためのJavaScript

この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

Linuxで現在のスクリプトの実際のパスを取得する方法

1. 現在のスクリプトの実際のパスを取得します。 #!/bin/bash if [[ $0 =~ ^...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...