VueはOpenLayersを使用してTiandi MapとAmapを読み込み

npm i --save ol

 Vue は OpenLayers を使用して Tiandi Map と Amap <template> を読み込みます。
  <div class="wrapper">
    <div>世界地図</div>
    <div class="map" id="olMap"></div>
  </div>
</テンプレート>
<スクリプト>
"ol/ol.css"をインポートします。
輸入 {
  "ol/layer" から Tile を TileLayer として変換します。
「ol/source/XYZ」からXYZをインポートします。
輸入 {
  デフォルトは defaultControls } で、"ol/control" から取得されます。
「ol/Map.js」からマップをインポートします。
「ol/View.js」から View をインポートします。
エクスポートデフォルト{
  データ（） {
   戻る {
      マップ: null、
      パーサー: null、
    };
  },
  マウント() {
    このメソッドは、次のとおりです。
  },
  メソッド: {
    initMap() {
     定数マップ = 新しいマップ({
       ターゲット: "olMap",
        ビュー: 新しいビュー({
 
          center: [0, 0], //中心点の緯度と経度 zoom: 4, //レイヤーのスケーリング投影: "EPSG:4326",
        }）、
        コントロール: defaultControls({
          ズーム: 真、
          帰属: 誤り、
          回転: false、
        }）、
      });
      this.map = マップ;
      // マップを追加 let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      url = `${
   url}&T=vec_c&tk=キーを置き換えます`;
      constソース = 新しいXYZ({
     URL: URL、
        投影: "EPSG:4326",
      });
      const tdtLayer = 新しい TileLayer({
        出典: 出典、
      });
      this.map.addLayer(tdtLayer);
      // アノテーションを追加 url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      url = `${
   url}&T=cva_c&tk=キーを置き換えます`;
      const ソースCVA = 新しい XYZ({
        URL: URL、
        投影: "EPSG:4326",
      });
      const tdtcvaLayer = 新しい TileLayer({
        出典: sourceCVA、
      });
      マップにレイヤーを追加します。
    },
  },
};
</スクリプト>
<スタイルスコープ>
.map {
  幅: 100%;
  高さ：100vh;
}
</スタイル>

<テンプレート>
  <div class="wrapper">
    <div>アマップ</div>
    <div id="マップ"></div>
  </div>
</テンプレート>
<スクリプト>
輸入 {
 マップ、ビュー、機能} 'ol' から

'ol/proj' から olProj として * をインポートします
輸入 {
 'ol/geom' から {Point}
輸入 {
  Style、Fill、Stroke、Circle を sCircle として追加します } from "ol/style";
// レイヤーを追加 import Tilelayer from 'ol/layer/Tile'
輸入 {
 'ol/layer' から Vector を VectorLayer として変換します
輸入 {
 'ol/source' から、XYZ、Vector を VectorSource として取得します。
//スタイルファイルをインポートする import "ol/ol.css"
エクスポートデフォルト{
  データ（） {
  戻る {
    マップ:null
    }
  },
  マウント() {
  これを初期化します。
   マーカーを設定します。
  },
  メソッド: {
    初期化(){
       this.map = 新しいマップ({
         ターゲット: 'マップ',
         レイヤー:[新しいタイルレイヤー({
           ソース: 新しいXYZ({
               url:'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
           })
         })
         ]、
        ビュー:新しいビュー({

            // 西安を地図の中心とする // olProj.fromLonLat メソッドは経度と緯度を対応する座標に変換します。中心: olProj.fromLonLat([108.945951, 34.465262]),
          ズーム:2
        }）、
       })
    },
    setMarker(){
        _style = 新しいスタイル({
            イメージ:新しいsCircle({
                半径:10,
                ストローク:新しいストローク({
                    色:"#fff",
                }）、
                塗りつぶし: 新しい塗りつぶし({
                    色:'#3399CC',
                }）、
            }）、
        });
        _feature = 新しいFeature({
 
            ジオメトリ:新しいポイント(olProj.fromLonLat([108.945951, 34.465262]))、
        });
        _feature.setStyle(_style);
        _marker = 新しい VectorLayer({

            ソース: 新しい VectorSource({
               機能:[_feature],
            }）、
        });
        マップにレイヤーを追加します(_marker);
    },
  },
}
</スクリプト>
<スタイルスコープ>
  ＃地図{
      /* 画面の幅と高さ */
    幅：100vw;
    高さ：100vh;
  }
</スタイル>