Vueプロジェクトはスカイマップメソッドを使用します（Vueはスカイマップを導入し、マップインスタンスを作成します

最近、Vueプロジェクトに導入する必要のある星図を使用する必要があります。公式サイトには関連資料がないため、ここでは使用した導入方法を記録します。あまり良くないかもしれません。もっと良い方法があります。クリックしてください。

まず、このアプリケーションタイプの
キー
アプリケーションタイプに適用するキーを取得します。ブラウザ側を選択することを忘れないでください

最初のステップは、Sky Map APIJSファイルをVueプロジェクトフォルダーpublicの下のindex.htmlエントリファイルに追加することです。

Tiantu JavaScriptAPIファイルを紹介します

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

2. VUEファイルを作成し、最初のページをインストールします

<template>
  <div>
    <header>天地图</header>
    <div id="yzMap" style="position: absolute; width: 85%; height: 80%"></div>
  </div>
</template>
<script>
export default {
  name: 'tianditu',
  data() {
    return {
    };
  },
  mounted: () => {
    const a = new Promise((resolve, reject) => {
      console.log(reject);
      // 如果已加载直接返回
      if (window.T) {
        console.log('地图脚本初始化成功...');
        resolve(window.T);
      }
    });
    // 第一种方式显示
    // a.then((T) => {
    //   const imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=5228a6fb6f451e191672532de0a03ad6';
    //   const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
    //   const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
    //   const map = new T.Map('yzMap', config);
    //   const ctrl = new T.Control.MapType();
    //   map.addControl(ctrl);
    //   const map = new T.Map('yzMap');
    //   map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);
    // }).catch();
    // 第二种方式显示
    const map = new window.T.Map('yzMap');
    map.centerAndZoom(new window.T.LngLat(116.401003, 39.903117), 12);
    console.log(a);
  },
  methods: {
  },
};
 
</script>
<style scoped>
</style>