Massive Point Markers MassMarks
When you need to efficiently display massive point markers but do not need to display text information, it is recommended to use AMap.MassMarks. This article describes how to add massive point markers.
Massive Point Example
Prompt
AMap.MassMarks is not an ordinary overlay, it is a map layer composed of massive points.
The difference between MassMarks and LabelMarker is that MassMarks does not support adding text, but it can automatically generate massive point layers, while LabelMarker requires users to manually add LabelsLayer massive point layers.
1、Add Mass Point Markers
1
1.1 Create Map
const map = new AMap.Map("container", {
zoom: 10,
showOversea: true, //Enable world Map
center: [100.491422, 13.749313],
mapStyle: "amap://styles/whitesmoke",
viewMode: "2D",
});2
1.2 Create Mass Point Objects
Style Settings
var style = {
url: "//vdata.amap.com/icons/b18/1/2.png", //Icon address
size: new AMap.Size(11, 11), //Icon size
anchor: new AMap.Pixel(5, 5), //The offset of the icon display position, the reference point is the upper left corner of the icon
};Prompt
If you want to add multiple point styles to massive points, you can place multiple style objects in an array.
//Create a style object, JS API 2.0 supports display setting zIndex, the larger the zIndex the more forward, arranged in order by default
var style = [
{
url: "https://a.amap.com/jsapi_demos/static/images/mass0.png", //Icon address
anchor: new AMap.Pixel(6, 6), //The offset of the icon display position, the reference point is the upper left corner of the icon
size: new AMap.Size(11, 11), //Icon size
zIndex: 3, //The stacking order of each style icon, the larger the number, the more it is placed in front
},
{
url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(7, 7),
zIndex: 2,
},
//, …,{}, …
];Dataset settings
var data = [
{
lnglat: [100.312894,13.804665],
name: "marker1",
},
{
lnglat: [100.834745,13.664593],
name: "marker2",
},
//, …,{}, …
];Prompt
Set different styles based on style index
var data = [
{
lnglat: [100.312894,13.804665],
name: "marker1",
style: 0, //The value of this data is the object index corresponding to the style array
},
{
lnglat: [100.834745,13.664593],
name: "marker2",
style: 1,
},
//, …,{}, …
];Create massive point instance
var massMarks = new AMap.MassMarks(data,{
zIndex: 5, //Order of massive point layer overlay
zooms: [3, 19], //Display massive point layer within specified map zoom level range
style: style, //Set style object
});3
1.3 Add massMarks to the map instance
massMarks.setMap(map);