Massive Annotation LabelMarker
When there is a need to display a large number of point markers, you can use the massive annotation AMap.LabelMarker to replace AMap.Marker. AMap.LabelMarker can not only draw icons, but also add text information, style configurations, etc. to the icons.
Massive Annotation Example
Compared to Marker, LabelMarker supports avoidance function, it not only supports avoidance between LabelMarkers, but the JS API 2.0 version also supports map basemap annotation avoidance, making your Marker more prominent.
1、Massive Annotation LabelMarker
To create an annotation object, first set the position of the annotation, and you can also set the icon and text through the icon and text properties (which can also be omitted).
1.1 Create Map
const map = new AMap.Map("container", {
zoom: 10,
center: [100.491422, 13.749313],
showOversea: true, //Enable world Map
mapStyle: "amap://styles/whitesmoke",
viewMode: "2D",
});1.2 Create LabelsLayer
The LabelsLayer is a layer used to carry LabelMarker labels, so all created LabelMarkers need to be added to the LabelsLayer to eventually be displayed on the map.
const labelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //Whether the labels in this layer should avoid collision
allowCollision: true, //Whether collision avoidance is enabled between different label layers
});The collision property controls whether LabelMarker within the same LabelsLayer avoid each other.
The allowCollision property controls whether LabelMarker in different LabelsLayer avoid each other, and JS API 2.0 can also control whether LabelMarker avoid the labels on the base map layer.
1.3 Set an icon object
const icon = {
type: "image", //Icon type, currently only supports image type
image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //Accessible image URL
size: [64, 30], //Image size
anchor: "center", //Anchor point of the image relative to position, default is bottom-center
};1.4 Set text object
//Set text object
const text = {
content: "express delivery", //The text content to be displayed
direction: "right", //Text direction, when there is an icon, it is the direction around the text; when there is no icon, it is the position relative to the position
offset: [-20, -5], //Offset based on direction
//Text style
style: {
fontSize: 12,
fillColor: "#22886f",
strokeColor: "#fff",
strokeWidth: 2,
},
};1.5 Create LabelMarker
const labelMarker = new AMap.LabelMarker({
name: "Annotation", //This property is not for drawing text content, it is only used for identification
position: [100.338987, 13.876669],
zIndex: 16,
rank: 1, //Avoidance priority
icon: icon, //Annotate icon, pass the icon object to the icon property
text: text, //Annotate text, pass the text object to the text property
});If you do not need to display both the icon and text at the same time, you can omit the corresponding parameters as needed. However, at least one of either the “icon” or “text” must be uploaded.
When the collision avoidance (collision:true) of the LabelsLayer is enabled, if two LabelMarker overlap, the LabelMarker with a higher rank will be displayed, while the one with a lower rank will be hidden.
1.6 Add the LabelMarker to the LabelsLayer
Add the LabelMarker object created in the fourth step above to the LabelsLayer created in the third step
//Add a labelMarker
labelsLayer.add(labelMarker);- Bulk Add labelMarker
labelsLayer.add([labelMarker1, labelMarker2])- Remove LabelMarker
labelsLayer.remove(labelMarker)- Bulk Remove labelMarker
labelsLayer.remove([labelMarker1, labelMarker2])1.7 Add the LabelsLayer to the map instance
map.add(labelsLayer);1.8 Add events to the LabelMarker
LabelMarker adds events in the same way as other overlays, using the on() method to add events
labelMarker.on('click', function(e){
labelMarker.setOpacity(0.5);
});