Vue Tianditu

https://soullyoko.github.io/vue-tianditu
Admin
Vue Tianditu is a Vue component library for integrating Tianditu maps, supporting both Vue 3 and Vue...
Tokens:19,629
Snippets:100
Trust Score:8.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install vue-tianditu

Source: https://soullyoko.github.io/vue-tianditu

Install the vue-tianditu package using npm or yarn.

```bash
npm i vue-tianditu
# or
yarn add vue-tianditu
```

--------------------------------

### Basic Map Usage

Source: https://soullyoko.github.io/vue-tianditu/map/map

Demonstrates the basic setup of the TdtMap component. Ensure `center` and `zoom` properties are correctly provided for the map to display properly.

```APIDOC
## Basic Map Configuration

### Description
This section shows a basic example of how to use the `tdt-map` component. The map will only display correctly if the `center` and `zoom` properties are set.

### Component Usage
```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```
```

--------------------------------

### Custom Control Example

Source: https://soullyoko.github.io/vue-tianditu/map/control

Demonstrates how to display and manage custom and default map controls using Vue Tianditu components.

```APIDOC
## Custom Control Example

This example shows how to use the `tdt-control` component to add custom controls to the map. It also demonstrates how to toggle the visibility of custom controls and the default copyright control.

### Component Usage

```html
<template>
  <button @click="state.visible = !state.visible">显示自定义控件:{{ state.visible }}</button>
  <button @click="state.copyright = !state.copyright">显示默认版权控件:{{ state.copyright }}</button>
  <div class="mapDiv" :class="state.copyright ? '' : 'hide-copyright'">
    <tdt-map :center="state.center" :zoom="state.zoom" :controls="state.controls">
      <tdt-control position="topright" :visible="state.visible">
        <button>自定义控件</button>
      </tdt-control>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  controls: [
    "Zoom",
    "Scale",
    {
      name: "MapType",
      position: "topright",
      mapTypes: [
        {
          title: "地图",
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png",
          layer: "TMAP_NORMAL_MAP"
        },
        {
          title: "卫星",
          icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
          layer: "TMAP_SATELLITE_MAP"
        },
        {
          title: "卫星混合",
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: "TMAP_HYBRID_MAP"
        }
      ]
    },
    {
      name: "OverviewMap",
      isOpen: true,
      anchor: "bottomright"
    },
    {
      name: "Copyright",
      id: "custom",
      content: `<div style=\"height:40px\"><button>自定义的版权控件</button></div>`,
      position: "bottomleft",
      bounds: [
        [113.52791, 23.21989],
        [113.03352, 23.03045]
      ]
    }
  ],
  visible: true,
  copyright: true
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
::v-deep.hide-copyright .tdt-control-copyright.tdt-control > div:not(.tdt-control-copyright) {
  display: none;
}
</style>
```
```

--------------------------------

### TDT Tile Layer Usage

Source: https://soullyoko.github.io/vue-tianditu/tilelayer/tilelayer-tdt

This example demonstrates how to implement a TDT Tile Layer on a map. It shows the basic setup for adding a custom tile layer that will be overlaid on the base map.

```APIDOC
## TDT Tile Layer

### Description
Allows for the implementation of custom tile layers on the map, which will be overlaid on the base map.

### Component
`<tdt-tilelayer-tdt>`

### Properties
- **minZoom** (Number) - Optional - The minimum zoom level for this layer. Defaults to 0.
- **maxZoom** (Number) - Optional - The maximum zoom level for this layer. Defaults to 18.
- **errorTileUrl** (String) - Optional - The URL of the error image to display when a tile is missing. Defaults to "".
- **attribution** (String) - Optional - Description of the layer information. Defaults to "".
- **opacity** (Number) - Optional - Sets the opacity of the layer (0.0-1.0). Defaults to 1.0 (fully opaque).
- **zIndex** (Number) - Optional - The display order of the layer.
- **bounds** (Array) - Optional - Sets the tiles to be displayed within a specified range.
- **url** (String) - Required - The URL of the tile layer service.

### Events
- **loading**: Triggered when the tile layer starts loading tiles. Parameters: ({type, target}).
- **load**: Triggered after the tile layer has loaded visible tiles. Parameters: ({type, target}).
- **tileloadstart**: Triggered when a tile request starts loading. Parameters: ({type, target, coords, tile}).
- **tileload**: Triggered during tile loading. Parameters: ({type, target, coords, tile}).
- **tileunload**: Triggered when a tile is removed (e.g., when `unloadInvisibleTiles` is enabled). Parameters: ({type, target, coords, tile}).
- **tileerror**: Triggered when a tile fails to load. Parameters: ({type, target, coords, tile}).

### Example
```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-tilelayer-tdt :url="state.url" :zIndex="1"></tdt-tilelayer-tdt>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  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=7f013d0186775b063d6a046977bbefc6"
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```
```

--------------------------------

### TdtTilelayer Component Usage

Source: https://soullyoko.github.io/vue-tianditu/tilelayer/tilelayer

This example demonstrates how to implement a custom tile layer on a Tianditu map using the TdtTilelayer component. It shows the basic setup within a Vue template and the reactive state management for the map and layer.

```APIDOC
## TdtTilelayer Component

### Description

The `tdt-tilelayer` component allows you to add custom tile layers to your map. These layers are overlaid on top of the base map, providing additional data or custom map styles.

### Usage

```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-tilelayer :url="state.url" :zIndex="1"></tdt-tilelayer>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  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=7f013d0186775b063d6a046977bbefc6"
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

### Properties

| Property      | Type   | Default | Description                                    |
|---------------|--------|---------|------------------------------------------------|
| `minZoom`     | Number | 0       | The minimum zoom level for this layer.         |
| `maxZoom`     | Number | 18      | The maximum zoom level for this layer.         |
| `errorTileUrl`| String | ""      | URL of the error image to display when no tile is available. |
| `opacity`     | Number | 1.0     | Sets the opacity of the layer (0.0-1.0). Default is 1.0 (opaque). |
| `zIndex`      | Number |         | Determines the display order of the layer.     |
| `bounds`      | Array  |         | Sets the bounds within which tiles should be displayed. |
| `url`         | String |         | The URL of the tile layer service.             |

### Events

| Event        | Parameters              | Description                                                                 |
|--------------|-------------------------|-----------------------------------------------------------------------------|
| `loading`    | `({type,target})`       | Triggered when the tile layer starts loading tiles.                         |
| `load`       | `({type,target})`       | Triggered after the tile layer has finished loading visible tiles.          |
| `tileloadstart`| `({type,target,coords,tile})` | Triggered when a tile request starts loading.                               |
| `tileload`   | `({type,target,coords,tile})` | Triggered during the process of loading a tile.                             |
| `tileunload` | `({type,target,coords,tile})` | Triggered when a tile is removed (e.g., when `unloadInvisibleTiles` is enabled). |
| `tileerror`  | `({type,target,coords,tile})` | Triggered when an error occurs while loading a tile.                        |
```

--------------------------------

### Vue Tianditu Marker Clusterer Example

Source: https://soullyoko.github.io/vue-tianditu/overlay/marker-clusterer

Demonstrates how to implement marker clustering with TdtMarkerClusterer. Configure markers, styles, and event handlers for click and clusterclick events.

```vue
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-marker-clusterer
        :markers="state.markers"
        :styles="state.styles"
        @click="onClick"
        @clusterclick="onClusterClick"
      ></tdt-marker-clusterer>
      <tdt-infowindow v-model:target="state.target" :content="state.content"></tdt-infowindow>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";
import { withBase } from "vitepress";

const state = reactive({
  center: [116.40969, 37.43997],
  zoom: 3,
  markers: Array.from({ length: 500 }, (e, i) => {
    return {
      icon: {
        iconUrl: withBase("/marker_blue.png"),
        iconAnchor: [10, 41]
      },
      position: [Math.random() * 40 + 85, Math.random() * 30 + 21],
      extData: "cluster-" + i
    };
  }),
  styles: [
    {
      url: withBase("/cluster0.png"),
      size: [30, 30], //图片大小
      offset: [0, 0], //显示图片的偏移量
      textColor: "#000000", //显示数字的颜色
      textSize: 8, //显示文字的大小
      range: [0, 50] //显示该图标的范围
    },
    {
      url: withBase("/cluster1.png"),
      size: [40, 40],
      offset: [0, 0],
      textColor: "#000000",
      textSize: 10,
      range: [50, 400]
    },
    {
      url: withBase("/cluster2.png"),
      size: [50, 50],
      offset: [0, 0],
      textColor: "#000000",
      textSize: 12,
      range: [400, 500]
    }
  ],
  target: null,
  content: ""
});

function onClick(e: any) {
  console.log("onClick", e);
  state.target = e.layer;
  state.content = `${e.layer.extData}<br>[${e.lnglat.lng}, ${e.lnglat.lat}]`;
}
function onClusterClick(e: any) {
  console.log("onClusterClick", e);
}
</script>

<script lang="ts">
export default { name: "demo-marker-clusterer" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 600px;
}
</style>
```

--------------------------------

### Vue Tianditu Polyline Example

Source: https://soullyoko.github.io/vue-tianditu/overlay/polyline

Demonstrates how to use the TDT polyline component with editable and visible toggles. Ensure the TDT map and polyline components are correctly registered.

```vue
<template>
  <button @click="state.edit = !state.edit">editable:{{ state.edit }}</button>
  <button @click="state.visible = !state.visible">visible:{{ state.visible }}</button>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-polyline
        :path="state.path"
        color="black"
        :opacity="1"
        :edit="state.edit"
        :visible="state.visible"
      ></tdt-polyline>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  path: [
    [113.32839, 23.14352],
    [113.280637, 23.125178],
    [113.3332, 23.11889]
  ],
  edit: false,
  visible: true
});
</script>

<script lang="ts">
export default { name: "demo-polyline" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

--------------------------------

### Basic InfoWindow Usage

Source: https://soullyoko.github.io/vue-tianditu/overlay/infowindow

This example demonstrates how to use the TDT InfoWindow component with markers. It shows how to bind the infowindow to a marker's position and display custom content. Ensure the `tdt-map` and `tdt-marker` components are set up correctly.

```vue
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-marker
        v-for="marker in markers"
        :position="marker.position"
        :extData="marker"
        @click="openInfowindow"
      ></tdt-marker>
      <tdt-infowindow v-model:target="state.currentMarker.position" :minWidth="150" :offset="[0, -30]">
        <div>
          <strong>{{ state.currentMarker.title }}</strong>
          <div>{{ state.currentMarker.position }}</div>
        </div>
      </tdt-infowindow>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const markers = [
  { title: "这是第一个标记点", position: [113.280637, 23.125178] },
  { title: "这是第二个标记点", position: [113.300637, 23.125178] },
  { title: "这是第三个标记点", position: [113.320637, 23.125178] },
  { title: "这是第四个标记点", position: [113.340637, 23.125178] }
];

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  currentMarker: {} as typeof markers[0]
});

function openInfowindow({ extData }: { extData: typeof markers[0] }) {
  state.currentMarker = { ...extData };
}
</script>

<script lang="ts">
export default { name: "demo-infowindow" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

--------------------------------

### Vue Tianditu Polygon Example

Source: https://soullyoko.github.io/vue-tianditu/overlay/polygon

Demonstrates how to use the TdtPolygon component within a TdtMap. Includes controls to toggle editability and visibility. Ensure the TdtMap component is correctly configured with center and zoom.

```vue
<template>
  <button @click="state.edit = !state.edit">editable:{{ state.edit }}</button>
  <button @click="state.visible = !state.visible">visible:{{ state.visible }}</button>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-polygon
        :path="state.path"
        color="black"
        :opacity="1"
        :edit="state.edit"
        :visible="state.visible"
      ></tdt-polygon>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  path: [
    [113.22716, 23.14162],
    [113.26973, 23.14225],
    [113.27316, 23.105],
    [113.23265, 23.11131]
  ],
  edit: false,
  visible: true
});
</script>

<script lang="ts">
export default { name: "demo-polygon" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

--------------------------------

### Using Native API with Component Initialization Event

Source: https://soullyoko.github.io/vue-tianditu

Listen for the `@init` event on the `tdt-map` component to get the map instance. This allows you to interact with native TDT APIs after the map has been initialized.

```html
<template>
  <tdt-map @init="mapInit"></tdt-map>
</template>

<script>
function mapInit(map){
  // 此时原生API中的T已存在window中
  const marker = new T.Marker({...})
  map.addOverlay(marker);
}
</script>
```

--------------------------------

### TDT WMS Tile Layer Component

Source: https://soullyoko.github.io/vue-tianditu/tilelayer/tilelayer-wms

Demonstrates how to implement a WMS tile layer in a Vue.js application using the TDT map component. This example shows how to configure the layer's URL, version, layers, and other properties to overlay custom map data.

```APIDOC
## TDT WMS Tile Layer Component

### Description
This component allows you to add a Web Map Service (WMS) layer to your map. It supports various configuration options to customize the appearance and behavior of the WMS layer.

### Properties

- **layers** (String) - Required - A comma-separated list of layers to request from the WMS service.
- **styles** (String) - Optional - A comma-separated list of styles to apply to each requested layer.
- **format** (String) - Optional - The image format for the output tiles (e.g., "image/png", "image/jpeg"). Defaults to "image/jpeg".
- **transparent** (Boolean) - Optional - Whether the output image background should be transparent. Defaults to `false`.
- **version** (String) - Optional - The version of the WMS service to request. Defaults to "1.1.1".
- **srs** (String) - Optional - The map projection type (e.g., "EPSG:900913").
- **crs** (String) - Optional - The map projection type.
- **opacity** (Number) - Optional - The opacity of the tile layer, ranging from 0.0 (fully transparent) to 1.0 (fully opaque). Defaults to 1.0.
- **zIndex** (Number) - Optional - The display order of the tile layer.
- **url** (String) - Required - The URL of the WMS tile layer service.

### Events

- **loading**: Triggered when the tile layer starts loading tiles. Parameters: `({type, target})`.
- **load**: Triggered after the tile layer has finished loading visible tiles. Parameters: `({type, target})`.
- **tileloadstart**: Triggered when a tile request starts loading. Parameters: `({type, target, coords, tile})`.
- **tileload**: Triggered during the tile loading process. Parameters: `({type, target, coords, tile})`.
- **tileunload**: Triggered when a tile is removed (e.g., when `unloadInvisibleTiles` is enabled). Parameters: `({type, target, coords, tile})`.
- **tileerror**: Triggered when a tile fails to load. Parameters: `({type, target, coords, tile})`.

### Example Usage

```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-tilelayer-wms v-bind="state.option"></tdt-tilelayer-wms>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [116.40769, 39.89945],
  zoom: 6,
  option: {
    url: "http://gisserver.tianditu.com/tiandituService/wms",
    version: "1.1.1",
    layers: "demo_city,demo_road,demo_anno",
    transparent: true,
    styles: "",
    format: "image/png"
  }
});
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 600px;
}
</style>
```
```

--------------------------------

### Initialize and Use Mousetool Component

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Demonstrates how to initialize the TDT map and mousetool component, and how to use buttons to open and clear different drawing tools. It also shows how to handle the mark-mouseup event.

```vue
<template>
  <button @click="openTool('markTool')">标点</button>
  <button @click="openTool('polygonTool')">画面</button>
  <button @click="openTool('polylineTool')">画线</button>
  <button @click="openTool('rectangleTool')">画矩形</button>
  <button @click="openTool('circleTool')">画圆</button>
  <button @click="openTool('paintBrushTool')">画笔</button>
  <br />
  <button @click="clearTool('markTool')">清除标点</button>
  <button @click="clearTool('polygonTool')">清除面</button>
  <button @click="clearTool('polylineTool')">清除线</button>
  <button @click="clearTool('rectangleTool')">清除矩形</button>
  <button @click="clearTool('circleTool')">清除圆</button>
  <button @click="clearTool('paintBrushTool')">清除画笔</button>
  <button @click="clearTool()">清除全部</button>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-mousetool ref="mousetoolRef" :markTool="{ follow: true }" @mark-mouseup="onMarkMouseup"></tdt-mousetool>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11
});

const mousetoolRef = ref();
function openTool(toolName: string) {
  mousetoolRef.value?.open(toolName);
}

function clearTool(toolName?: string) {
  toolName ? mousetoolRef.value?.clear(toolName) : mousetoolRef.value?.clearAll();
}

function onMarkMouseup(e: T.MarkToolEvent) {
  console.log(e);
}
</script>

<script lang="ts">
export default { name: "demo-mousetool" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

--------------------------------

### Mark Tool Configuration and Events

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Configuration options and events for the Mark Tool, used for placing markers on the map.

```APIDOC
## Mark Tool

### Properties

- **icon** (String/Object): The icon for the marker. Can be a URL or an object with `iconUrl`, `iconSize`, and `iconAnchor`.
- **follow** (Boolean): Defaults to `false`. If `true`, the marker icon follows the mouse cursor.

### Events

- **mark-mouseup** ({type, target, currentLnglat, currentMarker, allMarkers}): Triggered when the user completes a mark operation.
```

--------------------------------

### Using Native API without Components

Source: https://soullyoko.github.io/vue-tianditu

Load the Tianditu API using `useApiLoader` and then instantiate native TDT objects like `T.Map` and `T.Marker` directly. This is useful when not using the vue-tianditu components.

```html
<template>
  <div id="mapContainer"></div>
</template>

<script>
import { useApiLoader } from "vue-tianditu";
// 加载API
useApiLoader({
  v: "4.0",
  tk: "your map token",
  plugins: ["D3", "CarTrack", "HeatmapOverlay", "BufferTool", "ImageOverLayer"]
}).then(() => {
  const map = new T.Map("mapContainer", {...});
  const marker = new T.Marker({...});
  map.addOverlay(marker);
});
</script>
```

--------------------------------

### API Loader Utility

Source: https://soullyoko.github.io/vue-tianditu

Use the `useApiLoader` hook to load Tianditu API scripts and plugins. This allows you to use native TDT APIs after the scripts have loaded.

```typescript
import { useApiLoader } from "vue-tianditu";

useApiLoader({
  v: "4.0",
  tk: "your map token",
  plugins: ["D3", "CarTrack", "HeatmapOverlay", "BufferTool", "ImageOverLayer"]
}).then(() => {
  new T.Map({...});
});
```

--------------------------------

### Display Custom and Default Controls

Source: https://soullyoko.github.io/vue-tianditu/map/control

Demonstrates how to toggle the visibility of a custom control and the default copyright control. It configures various controls including Zoom, Scale, MapType with custom layers, OverviewMap, and a custom Copyright control with HTML content.

```vue
<template>
  <button @click="state.visible = !state.visible">显示自定义控件:{{ state.visible }}</button>
  <button @click="state.copyright = !state.copyright">显示默认版权控件:{{ state.copyright }}</button>
  <div class="mapDiv" :class="state.copyright ? '' : 'hide-copyright'">
    <tdt-map :center="state.center" :zoom="state.zoom" :controls="state.controls">
      <tdt-control position="topright" :visible="state.visible">
        <button>自定义控件</button>
      </tdt-control>
    </tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11,
  controls: [
    "Zoom",
    "Scale",
    {
      name: "MapType",
      position: "topright",
      mapTypes: [
        {
          title: "地图", //地图控件上所要显示的图层名称
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小 80x80）
          layer: "TMAP_NORMAL_MAP" //地图类型，在原天地图api中以window.TMAP_NORMAL_MAP表示，此处为字符串
        },
        {
          title: "卫星",
          icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
          layer: "TMAP_SATELLITE_MAP"
        },
        {
          title: "卫星混合",
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: "TMAP_HYBRID_MAP"
        }
        // {
        //   title: "地形",
        //   icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
        //   layer: "TMAP_TERRAIN_MAP"
        // },
        // {
        //   title: "地形混合",
        //   icon: "http://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>自定义的版权控件</button></div>`,
      position: "bottomleft",
      bounds: [
        [113.52791, 23.21989],
        [113.03352, 23.03045]
      ]
    }
  ],
  visible: true,
  copyright: true
});
</script>

<script lang="ts">
export default { name: "demo-control" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
::v-deep.hide-copyright .tdt-control-copyright.tdt-control > div:not(.tdt-control-copyright) {
  display: none;
}
</style>
```

--------------------------------

### Global Import vue-tianditu

Source: https://soullyoko.github.io/vue-tianditu

Globally import the vue-tianditu plugin in your main application file. Ensure to provide your map token and specify the API version.

```typescript
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import VueTianditu from "vue-tianditu";

const app = createApp(App);
app.use(VueTianditu, {
  v: "4.0", //目前只支持4.0版本
  tk: "your map token"
});
app.mount("#app");
```

```html
<!-- App.vue -->
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  import { TdtMap } from "vue-tianditu";
  const state = reactive({
    center: [113.280637, 23.125178],
    zoom: 12
  });
</script>

<style>
  .mapDiv {
    width: 100%;
    height: 100%;
  }
</style>
```

--------------------------------

### Display Basic Map with Center and Zoom

Source: https://soullyoko.github.io/vue-tianditu/map/map

Use this snippet to display a basic map. Ensure the 'center' and 'zoom' properties are correctly set for the map to render properly. The map will automatically adapt to container size changes if 'autoResize' is enabled.

```vue
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue-demi";

const state = reactive({
  center: [113.280637, 23.125178],
  zoom: 11
});
</script>

<script lang="ts">
export default { name: "demo-map" };
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>
```

--------------------------------

### ESLint Configuration for TDT API

Source: https://soullyoko.github.io/vue-tianditu

Configure ESLint to recognize the global `T` object when using Tianditu's native APIs to avoid linting errors.

```json
{
  ...
  globals:
    ...
    T: "readonly"
  
}
```

--------------------------------

### Circle Tool Configuration and Events

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Configuration options and events for the Circle Tool, used for drawing circles on the map.

```APIDOC
## Circle Tool

### Properties

- **color** (String): Defaults to `"#0000FF"`. The color of the circle border.
- **weight** (Number): Defaults to `3`. The width of the circle border in pixels.
- **opacity** (Number): Defaults to `0.5`. The opacity of the circle border (0-1).
- **fillColor** (String): Defaults to `"#0000FF"`. The fill color of the circle. If empty, the circle will not have a fill.
- **fillOpacity** (Number): Defaults to `0.2`. The opacity of the circle fill (0-1).
- **lineStyle** (String): Defaults to `"solid"`. The style of the circle border (`"solid"` or `"dashed"`).

### Events

- **circle-draw** (event): Triggered when the user completes a circle drawing operation. The event object contains details about the drawn circle.
```

--------------------------------

### On-Demand Import vue-tianditu

Source: https://soullyoko.github.io/vue-tianditu

Import the TdtMap component on demand for better type hinting with TypeScript. Configure the API loading directly within the component.

```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom" :loadConfig="loadScript"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  import { TdtMap } from "vue-tianditu";
  const loadConfig = { v: "4.0", tk: "your map token" };
  const state = reactive({
    center: [113.280637, 23.125178],
    zoom: 12
  });
</script>

<style>
  .mapDiv {
    width: 100%;
    height: 100%;
  }
</style>
```

--------------------------------

### Using API Loader with Registered Component

Source: https://soullyoko.github.io/vue-tianditu

If the component is already registered (e.g., globally), you can use `useApiLoader` without parameters to asynchronously wait for the API to load. This ensures native TDT APIs are available.

```typescript
// 不用传参数，异步等待之前注册组件时带参数加载的API加载完成
useApiLoader({}).then(() => {
  const marker = new T.Marker({...});
});
```

--------------------------------

### Polyline Tool Configuration and Events

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Configuration options and events for the Polyline Tool, used for drawing polylines and calculating distance.

```APIDOC
## Polyline Tool

### Properties

- **color** (String): Defaults to `"#0000FF"`. The color of the polyline.
- **weight** (Number): Defaults to `3`. The width of the polyline in pixels.
- **opacity** (Number): Defaults to `0.5`. The opacity of the polyline (0-1).
- **lineStyle** (String): Defaults to `"solid"`. The style of the polyline (`"solid"` or `"dashed"`).
- **showLabel** (Boolean): Defaults to `false`. If `true`, displays the distance of the polyline.

### Events

- **polyline-draw** ({type, target, currentLnglats, currentDistance, currentPolyline, allPolylines}): Triggered when the user completes a polyline drawing operation.
- **polyline-addpoint** ({type, target, currentLnglats, currentDistance, currentPolyline, allPolylines}): Triggered each time the user clicks to add a node during polyline drawing.
```

--------------------------------

### Rectangle Tool Configuration and Events

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Configuration options and events for the Rectangle Tool, used for drawing rectangles on the map.

```APIDOC
## Rectangle Tool

### Properties

- **color** (String): Defaults to `"#0000FF"`. The color of the rectangle border.
- **weight** (Number): Defaults to `3`. The width of the rectangle border in pixels.
- **opacity** (Number): Defaults to `0.5`. The opacity of the rectangle border (0-1).
- **fillColor** (String): Defaults to `"#0000FF"`. The fill color of the rectangle. If empty, the rectangle will not have a fill.
- **fillOpacity** (Number): Defaults to `0.2`. The opacity of the rectangle fill (0-1).
- **lineStyle** (String): Defaults to `"solid"`. The style of the rectangle border (`"solid"` or `"dashed"`).

### Events

- **rectangle-draw** ({type, target, currentBounds, currentRectangle, allRectangles}): Triggered when the user completes a rectangle drawing operation.
```

--------------------------------

### Overview Map Control Properties

Source: https://soullyoko.github.io/vue-tianditu/map/control

Properties for the overview map control, which displays a small overview map.

```APIDOC
## Overview Map Control Properties

| Property | Type | Default | Description |
|---|---|---|---|
| anchor | string | "bottomright" | The docking position of the control, defaults to bottom right. |
| isOpen | boolean | false | The open/closed state of the overview map after it is added to the map, defaults to closed. `true` means displayed, `false` means hidden. |
```

--------------------------------

### Infowindow Properties

Source: https://soullyoko.github.io/vue-tianditu/overlay/infowindow

This section details the configurable properties of the TDT Infowindow component.

```APIDOC
## Infowindow Properties

| Property | Type | Default Value | Description |
|---|---|---|---|
| minWidth | Number | 50 | The minimum width of the popup window. |
| maxWidth | Number | 300 | The maximum width of the popup window. |
| maxHeight | Number | | Sets a scrollable container if the content exceeds the given height. |
| autoPan | Boolean | false | Enables or disables automatic map panning when the infowindow opens (default is off). |
| closeButton | Boolean | true | Controls the visibility of the close button in the popup window. |
| offset | Array | [0,7] | Compensation value for the popup window's position, useful for controlling anchors when opening popups in the same layer. |
| autoPanPadding | Array | [5,5] | The margin between the infowindow and the map view after automatic panning. |
| closeOnClick | Boolean | false | Enables or disables closing the infowindow by clicking on the map (default is off). |
| content | String/HTMLElement | "" | The content of the infowindow, which can be a string or HTML. |
| target | Object/Array | | The overlay object or coordinate array for opening the infowindow. When an array is passed, the offset parameter should be adjusted accordingly. Supports .sync (vue2) and v-model (vue3). |
```

--------------------------------

### Marker Clusterer Styles Configuration

Source: https://soullyoko.github.io/vue-tianditu/overlay/marker-clusterer

Provides an array of style objects to customize the appearance of marker clusters. Each style defines the icon, size, offset, text color, text size, and display range for a cluster.

```javascript
[
  {
    url: "http://api.tianditu.gov.cn/img/map/cluster/heart30.png",
    size: [30, 26], //图片大小
    offset: [-15, -13], //显示图片的偏移量
    textColor: "#000000", //显示数字的颜色
    textSize: 8, //显示文字的大小
    range: [0, 50] //显示该图标的范围
  },
  {
    url: "http://api.tianditu.gov.cn/img/map/cluster/heart40.png",
    size: [42, 36],
    offset: [-20, -17],
    textColor: "#ff0000",
    textSize: 10,
    range: [50, 400]
  },
  {
    url: "http://api.tianditu.gov.cn/img/map/cluster/heart50.png",
    size: [52, 46],
    soffset: [-10, -22],
    textColor: "white",
    textSize: 12,
    range: [400, 500]
  }
];
```

--------------------------------

### Polygon Tool Configuration and Events

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

Configuration options and events for the Polygon Tool, used for drawing polygons and calculating area.

```APIDOC
## Polygon Tool

### Properties

- **color** (String): Defaults to `"#0000FF"`. The color of the polygon border.
- **weight** (Number): Defaults to `3`. The width of the polygon border in pixels.
- **opacity** (Number): Defaults to `0.5`. The opacity of the polygon border (0-1).
- **fillColor** (String): Defaults to `"#0000FF"`. The fill color of the polygon. If empty, the polygon will not have a fill.
- **fillOpacity** (Number): Defaults to `0.2`. The opacity of the polygon fill (0-1).
- **lineStyle** (String): Defaults to `"solid"`. The style of the polygon border (`"solid"` or `"dashed"`).
- **showLabel** (Boolean): Defaults to `false`. If `true`, displays the area of the polygon.

### Events

- **polygon-draw** ({type, target, currentLnglats, currentArea, currentPolygon, allPolygons}): Triggered when the user double-clicks to complete a polygon drawing.
- **polygon-addpoint** ({type, target, currentLnglats, currentArea, currentPolygon, allPolygons}): Triggered each time the user clicks to add a node during polygon drawing.
```

--------------------------------

### Auxiliary Functions for Coordinate Conversion

Source: https://soullyoko.github.io/vue-tianditu

Import and use utility functions like `toLngLat`, `toBounds`, `toPoint`, and `toIcon` for converting data formats to Tianditu's native types.

```typescript
import { toLngLat, toBounds, toPoint, toIcon } from "vue-tianditu";
```

--------------------------------

### Infowindow Slots

Source: https://soullyoko.github.io/vue-tianditu/overlay/infowindow

This section outlines the available slots for customizing the TDT Infowindow component.

```APIDOC
## Infowindow Slots

| Name | Description |
|---|---|
| default | The default slot content is displayed as the infowindow's content. |
```

--------------------------------

### Paintbrush Tool

Source: https://soullyoko.github.io/vue-tianditu/mousetool/mousetool

The Paintbrush Tool allows users to draw freehand on the map.

```APIDOC
## Paintbrush Tool

### Properties

(No specific properties are detailed in the source for the Paintbrush Tool beyond its inclusion as a tool.)

### Events

(No specific events are detailed in the source for the Paintbrush Tool.)
```

--------------------------------

### Zoom Control Properties

Source: https://soullyoko.github.io/vue-tianditu/map/control

Properties for configuring the zoom control, allowing users to zoom in and out of the map.

```APIDOC
## Zoom Control Properties

| Property | Type | Default | Description |
|---|---|---|---|
| position | string | "topleft" | The initial position of the control, defaults to top left. |
| zoomInText | string | "+" | The text displayed on the zoom in button. |
| zoomOutText | string | "-" | The text displayed on the zoom out button. |
| zoomInTitle | string | "放大" | The title displayed on the zoom in button. |
| zoomOutTitle | string | "缩小" | The title displayed on the zoom out button. |
```
Tokens:
Raw