Vue+Openlayerはグラフィックスのドラッグと回転変形効果を実現します

npm i ol --save

npm をインストール --save-dev [email protected]

npm インストール ol-ext --save

npm をインストール --save [email protected]

<テンプレート>
  <div id="map" class="map"></div>
</テンプレート>

"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/interaction/Transform' から ExtTransform をインポートします。

データ（） {
      戻る {
        マップ: 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,
          }）、
        });
      },

マウント() {
 この.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({
            特徴: [ポリゴン],
          }）、
        }))
      },
 
}

マウント() {
  この.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);
        });
 
},