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

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

import { Modify } from "ol/interaction";

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

機能を直接変更する

コアコード:

 // 機能コアコードを変更する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 を応援していただければ幸いです。

以下もご興味があるかもしれません: