当前位置：首页 > article >正文

基于VUE3集成天地图

article 2024/12/2 3:09:05

1.在项目中添加了天地图的JavaScript API。

<!-- 在你的index.html或者相应的模板文件中 -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>

2.创建一个Vue 3组件，并在组件中添加地图的初始化逻辑。

<template>
  <div class="tiandituMap">
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>
<script lang='ts' setup>
    const mapContainer = ref(null);
    onMounted(() => {
        initMap()
    });
    let zoom = ref(12) //层级
    let allPoints: any = []; //所有点
    const initMap = () => {
        let T = window.T; //这里T指向天地图对象
        if (T) {
            //初始化地图，创建一个新的地图实例
            //其中 `T.Map` 接收的第一个参数是在html中天地图标签的ID
            //第二个参数是天地图的参考系，我这里设置的是 `EPSG:4326`，也就是WGS84 坐标参考系。
            //map = new T.Map("mapContainer","EPSG:4326");
            const map = new T.Map(mapContainer.value);
            
            //这一步调用了天地图的setMapType方法，用来设置天地图的图层类型，我这里设置的是卫星图图层
            map.setMapType(window.TMAP_HYBRID_MAP );

            //这一步设置的是地图的初始化后的中心点坐标以及缩放级别
            //做完这一步，天地图就以及能在地图上显示出来了
            map.centerAndZoom(new T.LngLat(116.404, 39.915), zoom.value); // 设置中心点和缩放等级
            
            // //创建缩放平移控件对象(H5)
            // const control = new T.Control.Zoom();
            // // //添加缩放平移控件(H5)
            // map.addControl(control);
           
            // 监听地图点击事件
            map.addEventListener("click",function(e){
                // 获取点击位置的经纬度
                const lngLat = e.lnglat
                console.log("经度:", lngLat.lng, "纬度:", lngLat.lat);
            })
        }
    }
</script>
<style lang='less' scoped>
    .tiandituMap{
        width: 100%;
        height: 100%;
    }
    
    .map-container {
        width: 100%;
        height: 100%;
    }
</style>