序文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 の操作とメンテナンスの基本システムディスク管理チュートリアル
目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...
目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...
提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...
この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...
仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...
具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...
序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...
このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクト...
FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...
OBS studioかっこいいですが、 JavaScriptもっとかっこいいです。では、 JavaS...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...
1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...
React Hooks は React 16.8 で導入された新しい機能で、クラスを使用せずに状態や...
Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...