Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。
機能を直接変更する コアコード: // 機能コアコードを変更する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() を通じてアクティブ化ステータスを取得できます。 まずフィーチャを選択し、次にそれを修正しますコアコード:
機能を変更する() { 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Centos7でmysql6の初期化インストールパスワードをインストールする方法
目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...
1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...
この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...
この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...
背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...
よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...
1. 現在のスクリプトの実際のパスを取得します。 #!/bin/bash if [[ $0 =~ ^...
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...