El proyecto Vue utiliza el método del mapa del cielo (Vue presenta el mapa del cielo, crea una instancia de mapa

Recientemente, el proyecto necesita usar el mapa del cielo, que debe introducirse en el proyecto Vue. Dado que el sitio web oficial no tiene documentación relevante, aquí registraré el método de introducción que utilicé. Puede que no sea muy bueno. Espero hay una forma mejor. Haz clic en mí.

Primero obtenga la clave para
solicitar el
tipo de aplicación clave en este tipo de aplicación, recuerde elegir el lado del navegador

El primer paso es agregar el archivo JS de la API de Sky Map al archivo de entrada index.html en la carpeta pública del proyecto Vue.

Presentar el archivo API de JavaScript de Tiantu

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

2. Cree un archivo VUE e instale la primera página

<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>