### Install vue-tianditu Library

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Instructions for installing the vue-tianditu library using npm or yarn package managers.

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

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

### Install VueTianditu Library

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

Instructions for installing the VueTianditu library using npm or yarn package managers.

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

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

### On-Demand Import of VueTianditu Components

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

Illustrates how to import specific VueTianditu components on demand to optimize bundle size. This example shows passing map configuration via the `loadConfig` prop directly to the `tdt-map` component.

```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom" :loadConfig="loadConfig"></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>
```

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

### Globally Import VueTianditu in Vue 3

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

Demonstrates how to globally import and initialize VueTianditu in a Vue 3 application's main entry file. It also includes a basic example of using the TdtMap component in a Vue template with reactive state.

```ts
// 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>
```

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

### Vue Circle Component Usage Example

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/overlay/circle.md

Demonstrates how to integrate and use the Circle component in a Vue application. This example shows how to define a circle's center, radius, and customize its visual properties like color and fill, while also attaching an event listener for user interaction.

```Vue
<!-- Example usage of the Circle component -->
<template>
  <t-circle
    :center="[116.404, 39.915]"
    :radius="5000"
    color="#FF0000"
    fillColor="#00FF00"
    :weight="5"
    :opacity="0.8"
    :fillOpacity="0.4"
    lineStyle="solid"
    :edit="true"
    @click="handleCircleClick"
  />
</template>

<script setup>
const handleCircleClick = (event) => {
  console.log('Circle clicked:', event);
  // event object contains: type, target, lnglat, containerPoint, extData
};
</script>

<style scoped>
/* Optional styling for the component or its container */
</style>
```

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

### Vue Mousetool Component Usage Example

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

This snippet shows a basic usage of the `mousetool` component. It can be used with default configurations or by passing specific configuration objects for each tool as props, and demonstrates how to handle events.

```Vue
<template>
  <mousetool
    :markTool="{ icon: 'path/to/icon.png', follow: true }"
    :polygonTool="{ color: '#FF0000', showLabel: true }"
    @mark-mouseup="handleMarkEvent"
    @polygon-draw="handlePolygonEvent"
  ></mousetool>
</template>

<script setup>
import { ref } from 'vue';
// import mousetool from 'vue-tianditu/components/mousetool'; // Example import path

const handleMarkEvent = (data) => {
  console.log('Mark placed:', data.currentLnglat);
};

const handlePolygonEvent = (data) => {
  console.log('Polygon drawn, area:', data.currentArea);
};

// Example of accessing methods via ref
// const mousetoolRef = ref(null);
// const openMarkerTool = () => {
//   if (mousetoolRef.value) {
//     mousetoolRef.value.open('markTool');
//   }
// };
</script>
```

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

### Use TdtMap Component with Global Import

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Example of using the TdtMap component in a Vue template after global import, demonstrating reactive state for center and zoom properties to display a map.

```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";
  import { TdtMap } from "vue-tianditu";
  const state = reactive({
    center: [113.280637, 23.125178],
    zoom: 12
  });
</script>

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

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

### Use VueTianditu as an API Loader

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

Demonstrates using the `useApiLoader` function to dynamically load the Tianditu map API and specified plugins. This allows for flexible initialization of map instances and extensions after the API is loaded.

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

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

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

### Import Helper Functions from vue-tianditu

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Shows how to import various utility functions like `toLngLat`, `toBounds`, `toPoint`, and `toIcon` from the vue-tianditu library for data conversion.

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

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

### vue-tianditu Helper Functions API Reference

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Detailed API documentation for helper functions provided by vue-tianditu, including their parameters, return types, and descriptions for converting various geographic data types.

```APIDOC
toLngLat(lnglat:[number,number]): T.LngLat
  description: Converts to a longitude-latitude object.
  parameters:
    lnglat: [number,number] - Longitude-latitude array.

toBounds(bounds:[[number,number],[number,number]]): T.Bounds
  description: Converts to a geographic bounds object.
  parameters:
    bounds: [[number,number],[number,number]] - Geographic bounds array.

toPoint(point:[number,number]): T.Point
  description: Converts to a pixel coordinate point object.
  parameters:
    point: [number,number] - Pixel coordinate point array.

toIcon(icon:IconOption|string): T.Icon
  description: Converts to an icon object.
  parameters:
    icon: string - Image URL.
    icon: {iconUrl:string, iconSize:[number,number], iconAnchor:[number,number]} - Icon configuration object.
      iconUrl: string - Image URL.
      iconSize: [number,number] - Image size.
      iconAnchor: [number,number] - Offset.
```

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

### MarkTool API Reference (Mousetool Sub-component)

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

API documentation for the `markTool` configuration object within the `mousetool` component, used for placing single markers on the map. It details properties for marker appearance and events for user interaction.

```APIDOC
MarkTool Configuration (markTool):
  Properties:
    icon: String/Object - Icon for the marker. Can be a URL or an object {iconUrl: String, iconSize: Array, iconAnchor: Array}.
    follow: Boolean - Default: false. Whether the marker icon follows the mouse cursor.
  Events:
    mark-mouseup: ({type, target, currentLnglat, currentMarker, allMarkers}) - Triggered when the user completes a marker placement.
```

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

### Importing Vue-Tianditu Styles

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/service/search.md

This snippet demonstrates how to import the necessary CSS style file for the `vue-tianditu` components, ensuring proper rendering of UI elements like the `TdtSearch` component. This import is required whether the components are globally or on-demand imported.

```JavaScript
import "vue-tianditu/lib/style.css";
```

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

### Use API Loader for Tianditu API

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Demonstrates using `useApiLoader` to asynchronously load the Tianditu API and its specified plugins (e.g., D3, CarTrack, HeatmapOverlay), then initializing a new T.Map instance after the API is successfully loaded.

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

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

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

### VueTianditu Helper Functions API

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

API documentation for utility functions provided by VueTianditu, designed to convert common data structures (like arrays) into Tianditu map objects (e.g., LngLat, Bounds, Point, Icon).

```APIDOC
toLngLat(lnglat:[number,number]): T.LngLat
  description: Converts to a longitude-latitude object.
  parameters:
    lnglat: [number,number] - Longitude-latitude array.
toLngLats(lnglats:[number,number][]): T.LngLat[]
  description: Converts to an array of longitude-latitude objects.
  parameters:
    lnglats: [number,number][] - Array of longitude-latitude arrays.
toBounds(bounds:[[number,number],[number,number]]): T.Bounds
  description: Converts to a geographical bounds object.
  parameters:
    bounds: [[number,number],[number,number]] - Geographical bounds array.
toPoint(point:[number,number]): T.Point
  description: Converts to a pixel coordinate point object.
  parameters:
    point: [number,number] - Pixel coordinate point array.
toIcon(icon:IconOption|string): T.Icon
  description: Converts to an icon object.
  parameters:
    icon: string - Image URL.
    icon: {iconUrl:string, iconSize:[number,number], iconAnchor:[number,number]} - Icon options object with image URL, size, and anchor.
```

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

### PolygonTool API Reference (Mousetool Sub-component)

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

API documentation for the `polygonTool` configuration object, used for drawing polygons and measuring area. It includes properties for styling the polygon and events for drawing actions.

```APIDOC
PolygonTool Configuration (polygonTool):
  Properties:
    color: String - Default: "#0000FF". Polygon border color.
    weight: Number - Default: 3. Polygon border width in pixels.
    opacity: Number - Default: 0.5. Polygon border transparency (0-1).
    fillColor: String - Default: "#0000FF". Polygon fill color. No fill if empty.
    fillOpacity: Number - Default: 0.2. Polygon fill transparency (0-1).
    lineStyle: String - Default: "solid". Polygon border style ("solid" or "dashed").
    showLabel: Boolean - Default: false. Whether to display the area. If false, acts as a drawing control.
  Events:
    polygon-draw: ({type, target, currentLnglats, currentArea, currentPolygon, allPolygons}) - Triggered when the user completes a polygon drawing by double-clicking.
    polygon-addpoint: ({type, target, currentLnglats, currentArea, currentPolygon, allPolygons}) - Triggered when the user adds a node during polygon drawing.
```

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

### PolylineTool API Reference (Mousetool Sub-component)

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

API documentation for the `polylineTool` configuration object, used for drawing polylines and measuring distance. It includes properties for styling the polyline and events for drawing actions.

```APIDOC
PolylineTool Configuration (polylineTool):
  Properties:
    color: String - Default: "#0000FF". Polyline color.
    weight: Number - Default: 3. Polyline width in pixels.
    opacity: Number - Default: 0.5. Polyline transparency (0-1).
    lineStyle: String - Default: "solid". Polyline style ("solid" or "dashed").
    showLabel: Boolean - Default: false. Whether to display the distance. If false, acts as a drawing control.
  Events:
    polyline-draw: ({type, target, currentLnglats, currentDistance, currentPolyline, allPolylines}) - Triggered when the user completes a polyline drawing.
    polyline-addpoint: ({type, target, currentLnglats, currentDistance, currentPolyline, allPolylines}) - Triggered when the user adds a node during polyline drawing.
```

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

### Call Native Tianditu API with useApiLoader Only

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Demonstrates how to use the `useApiLoader` to load the Tianditu API and then directly interact with native `T.Map` and `T.Marker` objects after the API is loaded, without relying on 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>
```

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

### Call Native Tianditu API via Component Init Event

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Shows how to access the native Tianditu API (`T` object) by listening to the `init` event of the `tdt-map` component, which provides the map instance and ensures the API is loaded and ready for use.

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

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

### TdtSearch Component Events

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/service/search.md

This section outlines the events emitted by the `TdtSearch` component, enabling developers to react to user interactions such as clicking on search results, suggestions, or the completion of a search operation.

```APIDOC
TdtSearch Component Events (v2.7.6):
  poi-click(poi: LocalSearchPoi)
    Description: 点击搜索结果项或地图上的标点触发
  suggest-click(suggest: LocalSearchSuggest)
    Description: 点击搜索建议项触发
  search-complete(result: LocalSearchResult)
    Description: 搜索完成后触发(包括搜索建议)
```

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

### Configure Type Hinting for VueTianditu Components

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/index.md

Shows how to configure TypeScript for global component type hints by specifying 'vue-tianditu/global' in the `compilerOptions.types` array within `tsconfig.json`. This configuration requires Volar plugin support for proper functionality.

```json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vue-tianditu/global"]
  }
}
```

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

### RectangleTool API Reference (Mousetool Sub-component)

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

API documentation for the `rectangleTool` configuration object, used for drawing rectangular regions on the map. It includes properties for styling the rectangle.

```APIDOC
RectangleTool Configuration (rectangleTool):
  Properties:
    color: String - Default: "#0000FF". Rectangle border color.
    weight: Number - Default: 3. Rectangle border width in pixels.
    opacity: Number - Default: 0.5. Rectangle border transparency (0-1).
    fillColor: String - Default: "#0000FF". Rectangle fill color. No fill if empty.
    fillOpacity: Number - Default: 0.2. Rectangle fill transparency (0-1).
    lineStyle: String - Default: "solid". Rectangle border style ("solid" or "dashed").
```

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

### Globally Import vue-tianditu in Vue 3

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Demonstrates how to globally import and register the vue-tianditu plugin in a Vue 3 application's main.ts file, configuring the map version and token for all components.

```ts
// 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");
```

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

### TdtSearch Component Properties

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/service/search.md

This section details the configurable properties for the `TdtSearch` UI component, allowing customization of its appearance and behavior, such as placeholder text and button visibility.

```APIDOC
TdtSearch Component Properties:
  placeholder: number (Default: "输入关键字搜索")
    Description: 显示在输入框的提示
  searchBtn: boolean (Default: true)
    Description: 是否显示搜索按钮
  routeBtn: boolean (Default: true)
    Description: 是否显示导航按钮
```

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

### Mousetool Component API Reference

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/mousetool/mousetool.md

Detailed API documentation for the `mousetool` Vue component, including its configurable properties for various drawing tools and methods to control their behavior.

```APIDOC
Mousetool Component:
  Properties:
    markTool: Object - Configuration for the marker tool.
    polygonTool: Object - Configuration for the polygon tool.
    polylineTool: Object - Configuration for the polyline tool.
    rectangleTool: Object - Configuration for the rectangle tool.
    circleTool: Object - Configuration for the circle tool.
    paintBrushTool: Object - Configuration for the paintbrush tool.
  Methods:
    open(toolName: string): void - Activates a specific drawing tool.
    close(toolName: string): void - Deactivates a specific drawing tool.
    clear(toolName: string): void - Clears all graphics drawn by a specific tool.
    clearAll(): void - Clears all graphics drawn by all tools.
```

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

### On-Demand Import and Use TdtMap Component

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Shows how to import the TdtMap component on demand in a Vue component, passing load configuration directly to the component for specific map version and token, which also provides type hints.

```html
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom" :loadConfig="loadConfig"></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>
```

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

### Call Native Tianditu API by Async Waiting for Loader

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Illustrates how to asynchronously wait for the Tianditu API to be loaded (if components have already triggered the load) using `useApiLoader({})` without parameters, then access native `T` objects.

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

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

### Vue-Tianditu Custom Tile Layer Events

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/tilelayer/tilelayer.md

This section outlines the events emitted by the custom tile layer component, enabling developers to react to various lifecycle stages and interactions, such as tile loading, errors, and removal.

```APIDOC
Events:
  loading:
    Parameters: ({type,target})
    Description: Triggered when the tile layer starts loading tiles.
  load:
    Parameters: ({type,target})
    Description: Triggered when the tile layer finishes loading visible tiles.
  tileloadstart:
    Parameters: ({type,target,coords,tile})
    Description: Triggered when a tile request starts loading.
  tileload:
    Parameters: ({type,target,coords,tile})
    Description: Triggered when a tile is loaded.
  tileunload:
    Parameters: ({type,target,coords,tile})
    Description: Triggered when a tile is removed (e.g., when unloadInvisibleTiles is enabled).
  tileerror:
    Parameters: ({type,target,coords,tile})
    Description: Triggered when a tile error occurs.
```

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

### Vue-Tianditu Custom Tile Layer Properties

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/tilelayer/tilelayer.md

This section details the configurable properties for the custom tile layer component, allowing developers to control its behavior, appearance, and data source. Properties include zoom levels, error handling, opacity, display order, and the tile service URL.

```APIDOC
Properties:
  minZoom:
    Type: Number
    Default: 0
    Description: Minimum zoom level for this layer.
  maxZoom:
    Type: Number
    Default: 18
    Description: Maximum zoom level for this layer.
  errorTileUrl:
    Type: String
    Default: ""
    Description: URL of the error image displayed when no tile is available.
  opacity:
    Type: Number
    Default: 1.0
    Description: Opacity of the layer (0.0-1.0). Default is 1.0 (opaque).
  zIndex:
    Type: Number
    Default: N/A
    Description: Display order of the layer.
  bounds:
    Type: Array
    Default: N/A
    Description: Sets the display range for tiles.
  url:
    Type: String
    Default: N/A
    Description: Service address of the layer.
```

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

### Configure ESLint for Global Tianditu T Object

Source: https://github.com/soullyoko/vue-tianditu/blob/master/README.md

Provides an ESLint configuration snippet to declare the global `T` object (from Tianditu API) as `readonly`, preventing linting errors when accessing it directly in your project.

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

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

### Circle Component Events

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/overlay/circle.md

Lists the events emitted by the Circle component, allowing for interactive responses to user actions such as clicks, mouse movements, and removal. Each event provides specific parameters related to the interaction.

```APIDOC
Circle Component Events:
  click:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the circle is clicked.
  dblclick:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the circle is double-clicked.
  mousedown:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the mouse button is pressed down on the circle.
  mouseup:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the mouse button is released on the circle.
  mouseout:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the mouse leaves the circle area.
  mouseover:
    Parameters: {type, target, lnglat, containerPoint, extData}
    Description: Triggered when the mouse enters the circle area.
  remove:
    Parameters: {type, target, extData}
    Description: Triggered when the circle is removed.
```

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

### Circle Component Properties

Source: https://github.com/soullyoko/vue-tianditu/blob/master/docs/overlay/circle.md

Defines the configurable attributes for the Circle component, controlling its appearance and behavior on the map. These properties allow customization of the circle's border, fill, position, and interactivity.

```APIDOC
Circle Component Properties:
  color: String (default: "#0000FF")
    Description: Circle border color.
  weight: Number (default: 3)
    Description: Circle border width in pixels.
  opacity: Number (default: 0.5)
    Description: Circle border transparency (range 0-1).
  fillColor: String (default: "#0000FF")
    Description: Circle fill color. If empty, the circle will have no fill effect.
  fillOpacity: Number (default: 0.2)
    Description: Circle fill transparency (range 0-1).
  lineStyle: String (default: "solid")
    Description: Circle border style (solid or dashed).
  center: Array
    Description: Circle center longitude and latitude coordinates.
  radius: Number
    Description: Circle radius in meters.
  edit: Boolean (default: false)
    Description: Whether the circle is editable by the user.
  visible: Boolean (default: true)
    Description: Whether the circle is visible on the map.
  extData: Any
    Description: Custom attributes or data associated with the circle.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.