48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="mapDiv">
|
||
|
|
<tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
|
||
|
|
<!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
|
||
|
|
<!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
|
||
|
|
<tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
|
||
|
|
<tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
|
||
|
|
</tdt-map>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive, onMounted, ref } from 'vue';
|
||
|
|
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
|
||
|
|
import { map_config } from '@/config/map';
|
||
|
|
|
||
|
|
const key = map_config.tianditu.token;
|
||
|
|
|
||
|
|
const state = reactive({
|
||
|
|
center: [100.088, 23.883],
|
||
|
|
zoom: 14,
|
||
|
|
img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||
|
|
cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||
|
|
// 添加其他地图层URL
|
||
|
|
// ...
|
||
|
|
});
|
||
|
|
|
||
|
|
// 确保地图有明确的高度
|
||
|
|
const mapHeight = ref('100vh');
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
console.log('地图组件已挂载');
|
||
|
|
// 检查天地图API是否加载成功
|
||
|
|
if (window.T) {
|
||
|
|
console.log('天地图API已加载:', window.T);
|
||
|
|
} else {
|
||
|
|
console.error('天地图API未加载');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.mapDiv {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh; /* 确保容器有明确高度 */
|
||
|
|
}
|
||
|
|
</style>
|