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の初期化インストールパスワードをインストールする方法

推薦する

VMware kali仮想マシン環境の設定方法

1|0 カーネルをコンパイルする(1)uname -rコマンドを実行してカーネルバージョンを表示しま...

Vueデータ双方向バインディング実装方法

目次1. はじめに2. コードの実装2.1 目的分析2.2 実装プロセス2.2.1 エントリーコード...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

VueでTypeScriptを使用する方法

導入近年、TypeScript を求める声がますます高まり、TypeScript はフロントエンドに...

CentOS での Docker の詳細なインストール チュートリアル

DockerにはCEとEEがあり、CE版はコミュニティ版(無料)、EE版はセキュリティを重視したエン...

地域のカスタムカラーのためのechars 3Dマップソリューション

目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異な...

Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有していま...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

MySQL無料インストール版を解凍した後にパスワードが見つからない問題を解決する方法

1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

geo モジュールを使用して Nginx でホワイトリストを設定する例

元の構成: http { ...... limit_conn_zone $binary_remote...

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...