序文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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux の操作とメンテナンスの基本システムディスク管理チュートリアル
Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...
序文WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方...
Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...
目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...
方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
ReadOnly 属性を持つ TextBox は、クライアント上で次のマークアップとして表示されます...
Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...
「downloadlaod」を直接クリックしてもダウンロードできない場合は、ここからダウンロードす...
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...
今日、mysql の公式サイトから mysql-5.7.18-winx64.zip をダウンロードし...
グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...