tlbs-map-vue

tlbs-map-vue is a Vue-based component library built on top of the Tencent LBS JavaScript API.

Key features include:

• Reactive Components: Encapsulates Tencent Map APIs into reactive Vue components. You can change map effects by simply modifying data without managing complex API calls.
• Framework Compatibility: Supports both Vue 2 and Vue 3.
• High Extensibility: Provides access to map and layer instances, allowing you to call underlying Tencent Map APIs directly.

The Heatmap component visualizes data density and distribution trends using color gradients. You can pass data points and configure visual properties like radius, height, and opacity directly via props.

<Heat 
  :data="heatData" 
  :radius="50" 
  :height="100" 
  :opacity="0.8" 
  :min="0" 
  :max="100"
/>

The Area component is used to display the outlines of different regions and their data distributions on a map. It allows for custom styling, data binding, and interaction handling like clicks and hovers.

<Area 
  :data="yourAreaData" 
  :styles="yourAreaStyles" 
  :selectOptions="yourSelectOptions" 
  :options="yourAreaOptions" 
/>

Install the library using npm.

Requirement: Node.js version 16 or higher is required to install and use the component library.

npm install --save tlbs-map-vue

The MultiMarker component is used to display multiple annotation points on a map with customizable icons. You can pass point data via geometries, define styles via styles, and configure layer behavior using options.

<template>
  <!-- Example usage of MultiMarker -->
  <MultiMarker
    id="my-layer"
    :geometries="geometries"
    :styles="styles"
    :options="options"
  />
</template>

<script setup>
// geometries: TMap.PointGeometry[]
// styles: { [key: string]: TMap.MarkerStyleOptions }
// options: TMap.MultiMarkerOptions
</script>

The MultiPolyline component is used to display multiple polylines on a map, allowing for custom styling for each individual line. You can pass geometries (the line data) and styles (the visual appearance) via props.

<MultiPolyline
  id="my-polyline-layer"
  :geometries="polylineData"
  :styles="polylineStyles"
  :options="{
    disableInteractive: false,
    isStopPropagation: false
  }"
/>

Install the library using npm. Note that Node.js version 16 or higher is required for installation and usage.

npm install tlbs-map-vue

The MultiCircle component is used to render multiple circles on the map, allowing for custom styling for each circle. You can pass circle data via the geometries prop and define styles using the styles prop.

<CircleDemo/>

<!-- Example usage pattern based on component structure -->
<MultiCircle
  :geometries="[{ id: 'circle1', center: { lat: 22.5, lng: 114.0 }, radius: 1000 }]"
  :styles="{ 'circle1': { fillColor: '#ff0000' } }"
/>

The MarkerClusterOverlay component provides a way to group multiple map markers into clusters based on their proximity. This helps manage map clutter when displaying a large number of points. You can control the clustering behavior using props like gridSize (the distance threshold for clustering) and maxZoom (the zoom level above which clustering stops).

<MarkerClusterOverlay
  :geometries="yourPointGeometries"
  :gridSize="60"
  :maxZoom="20"
/>

To use tlbs-map-vue, you must obtain a developer key from the Tencent Location Based Services (LBS) console.

Application Link: https://lbs.qq.com/dev/console/application/mine

Important: Do not use the test keys provided in example documentation for production environments. Always replace them with your own application key.

The Arc component is used to visualize connections between two points, making it ideal for migration maps or flow direction scenarios.

To use it, provide an array of TMap.visualization.ArcLine data to the data prop. You can control the visual style via pickerStyle or the options prop. The mode prop determines if the arcs are horizontal (clinging to the ground) or vertical (perpendicular to the map plane).

<Arc 
  :data="arcData" 
  mode="vertical" 
  :options="arcOptions" 
/>

The GeometryEditor component allows users to draw and edit circular and polygonal geometries on a map. It supports features like snapping, selection, splitting, and unioning polygons.

To use it, you can pass configuration props for circles and polygons, such as layer IDs, initial geometries, and styles. You can also control the editor's mode (e.g., 'edit' or 'draw') and whether snapping or selection is enabled.

<GeometryEditor 
  circleId="my-circle-layer" 
  polygonId="my-polygon-layer" 
  actionMode="draw" 
  snappable={true} 
/>