1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <!--App.vue-->
| <template>
| <div :class="state.copyright ? '' : 'hide-copyright'" class="mapDiv">
| <tdt-map :center="state.center" :controls="state.controls" :zoom="state.zoom" :loadConfig="loadConfig">
| <tdt-control :visible="state.visible" position="topright">
| </tdt-control>
| </tdt-map>
| </div>
| </template>
|
| <script lang="ts" setup>
| import { reactive } from "vue";
| import { TdtMap, type LngLat } from "vue-tianditu2";
|
| const loadConfig = { v: "4.0", tk: "51915011aa0997aa2ddd7e38504fa8bc" };
| const state = reactive({
| center: [121.280637, 32.125178] as LngLat,
| zoom: 12,
| visible: true,
| copyright: false,
| controls: [
| "Zoom",
| "Scale",
| {
| name: "MapType",
| position: "topright",
| mapTypes: [
| {
| title: "地图", //地图控件上所要显示的图层名称
| icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小 80x80）
| layer: "TMAP_NORMAL_MAP" //地图类型，在原天地图api中以window.TMAP_NORMAL_MAP表示，此处为字符串
| },
| {
| title: "卫星",
| icon: " https://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
| layer: "TMAP_SATELLITE_MAP"
| },
| {
| title: "卫星混合",
| icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
| layer: "TMAP_HYBRID_MAP"
| }
| // {
| // title: "地形",
| // icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
| // layer: "TMAP_TERRAIN_MAP"
| // },
| // {
| // title: "地形混合",
| // icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
| // layer: "TMAP_TERRAIN_HYBRID_MAP"
| // }
| ]
| },
| {
| name: "OverviewMap",
| isOpen: true,
| anchor: "bottomright"
| },
| {
| name: "Copyright",
| id: "custom",
| content: `<div style="height:40px"><button class="demo-button">自定义的版权控件</button></div>`,
| position: "bottomleft",
| bounds: [
| [113.52791, 23.21989],
| [113.03352, 23.03045]
| ]
| }
| ]
| });
| </script>
|
| <style>
| .mapDiv {
| width: 100%;
| height: 100%;
| padding: 0%;
| }
|
| .hide-copyright :deep(.tdt-control-copyright.tdt-control > div:not(.tdt-control-copyright)) {
| display: none;
| }
| </style>
|
|
