vue-amap

The AmapLabelMarker component is used to place markers on the map that include both an icon and text content.

To display specific text on the marker, do not use the name attribute (which is used as an internal identifier); instead, configure the text object's content property.

The AmapLocaPulseLink component is a Loca layer used to render pulse link maps (flying lines). It supports features such as curvature, line width, transition colors, and pulse animations to represent data directionality.

Data can be provided via a sourceUrl (pointing to a GeoJSON endpoint) or directly via a sourceData object containing GeoJSON data. If both are provided, sourceUrl takes precedence.

The AmapLayerHeatMap component provides heat map visualization based on heatmap.js (v2.0). It displays data density using color gradients to intuitively show where data points are concentrated. It is compatible with Chrome, Firefox, Safari, and IE9+.

<!-- Example usage concept -->
<amap-layer-heat-map 
  :data-set="{ data: points, max: 100 }"
  :radius="30"
  :gradient="{ 0.4: 'rgb(0, 255, 255)', 0.85: 'rgb(100, 0, 255)' }"
/>

The AmapLocaGrid component is used to visualize point data by dividing the map into a grid of regions. Each grid cell contains the information of the points falling within it.

Key features include:

• Customization: Each grid cell can have its own custom height and color.
• Uniformity: All grid cells must share the same size (radius) and spacing (gap).
• Lighting: If acceptLight is set to true and lighting is configured in the loca object, 3D grids will exhibit light reflection effects.
• Performance: Use the cullface attribute to improve performance by culling faces (e.g., back to cull back faces).

The AmapLocaScatter component is used to display points on a large-scale ground surface. It supports three types of visual representations: colored circles, icons, and animated icons.

Important: To enable animations for icons, you must explicitly call loca.animate.start();.

// To enable animations for animated icons
loca.animate.start();

The AmapControlGeolocation component is a wrapper for the AMap.Geolocation plugin. It provides features such as obtaining current accurate positions, retrieving city information, and continuous positioning (via browser geolocation).

Users can handle positioning results in two ways:

1. Passing a callback function to getCurrentPosition.
2. Listening to the complete event.

It integrates multiple positioning methods including browser geolocation, high-precision IP geolocation, and Android SDK assistance.

<!-- Example usage concept -->
<amap-control-geolocation 
  :pan-to-location="true" 
  @complete="onGeolocationComplete" 
/>

The AmapLocaHexagon component is used to create hexagonal grid maps. It partitions point data into several hexagonal regions, where each region contains the point data falling within it.

Key features include:

• Customization: Each hexagonal cell can have its own custom height and color information.
• Uniformity: All cells in a single layer must share the same size (radius) and spacing (gap).
• Lighting Effects: If acceptLight is set to true and lighting is configured in the loca object, the 3D hexagonal grids will exhibit light reflection effects.
• Performance: You can use cullface to cull the back or front faces to improve rendering performance.