MassMarks

AMap.MassMarks

Construct a mass point marker object, and set the properties of the point marker object through MassMarkersOptions

new AMap.MassMarks(data: Array<MassData>, opts: Array<MassMarkersOptions>)

Tutorial

Parameter

data (Array<MassData>): Mass Point Data Parameters

Attribute	Type	Description
lnglat	LngLat	The position where the point marker is displayed on the map, supports passing in a longitude and latitude object or a one-dimensional array composed of longitude and latitude, such as: AMap.LngLat(77.19, 28.59) or [77.19, 28.59]
style	number	Style index value, which corresponds to the index of the style array

opts (Array<MassMarkersOptions>): Mass Point Parameters

Attribute		Type	Description
zIndex		number	The order value of layer stacking, 0 represents the bottom layer. Default value: 120
opacity		number	Layer transparency, value range [0 ~ 1], where 1 represents completely opaque and 0 represents completely transparent
zooms		Array	Supported zoom level range
cursor		string	Specifies the style when the mouse hovers over a point marker. Custom styles should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, and Opera does not support custom cursors
style		MassMarkersStyleOptions \| Array<MassMarkersStyleOptions>	Used to set the style of points
	url	string	Required parameter, the address of the icon
	size	Size	Required parameter, the size of the icon; for example: size:new AMap.Size(11,11)
	anchor	Pixel	Required parameter, the offset of the icon display position, with the top-left corner of the icon as the base point (0,0), for example: anchor:new AMap.Pixel(5,5)
	zIndex	number	Point Display Priority, Defaults to the Index Value of the Style
	rotation	number	Rotation Angle

Demo

var data = [
  {
    lnglat: [100.312894,13.804665], 
    name: "marker1",
  },
  //, …,{}, …
];
// 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
};
// Create MassMarks Instance
var massMarks = new AMap.MassMarks(data, {
  opacity: 0.8,
  zIndex: 111,
  cursor: "help",
  style: style,
});
// Add Mass Point Instances to the Map
massMarks.setMap(map);

Method

setMap(Map)

Set the Map Object to Display MassMark

Parameter: Map (Map) Map Object

Demo:

massMarks.setMap(map);

getMap()

Get the map object where the Marker is located

return value: (Map) The map instance where the point marker is located

Demo:

massMarks.getMap();

getData()

Output MassMark's dataset, with the same data structure as the dataset in setDatas

return value: (Array<MassData>) MassMark's dataset

Demo:

massMarks.getData();

setData(data)

Set the dataset displayed by MassMark

Parameter: data (Array<MassData>) Dataset of MassMark, such as: [{lnglat: [116.402394, 39.937182] }, … ]

Demo:

massMarks.setData([
  {
    lnglat: [100.312894,13.804665], 
    name: "marker1",
  },
]);

getStyle()

Get the display style of MassMark

return value: (Array<MassMarkersStyleOptions>) Display style of MassMark

Demo:

massMarks.getStyle();

setStyle(style)

Set the display style of MassMark, you can set a single style or a style list, each piece of data gets the corresponding style through the set style index value, this method will reset the original data

Parameter: style (MassMarkersStyleOptions | Array<MassMarkersStyleOptions>) Single style or style list

Demo:

massMarks.setStyle({
  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), //Icon display position offset, with the top-left corner of the icon as the reference point
});

getOpacity()

Get the opacity of the massive point layer

return value: (number) Opacity of the massive point layer

Demo:

massMarks.getOpacity();

setOpacity(opacity)

Set the opacity of the massive point layer, range [0 ~ 1], 1 means completely opaque, 0 means completely transparent

Parameter: opacity(number) Layer opacity

Demo:

massMarks.setOpacity(0.5);

setzIndex(zIndex)

Set the overlay order of the massive point layer

Parameter: zIndex(number) Set the overlay order

Demo:

massMarks.setzIndex(99);

getzIndex()

Get the opacity of the massive point layer

return value: (number) Overlay Order of Massive Point Layer

Demo:

massMarks.getzIndex()

getZooms()

Get Visible Level Range of Massive Point Layer

return value: (Vector2) Visible Level Range of Massive Point Layer

Demo:

massMarks.getZooms();

setZooms(zooms)

Set Visible Level Range for Massive Point Layer

Parameter: zooms (Vector2) Visible Level Range

Demo:

massMarks.setZooms([5,12]);

show()

Show Massive Points Layer

Demo:

massMarks.show();

hide()

Hide Massive Points Layer

Demo:

massMarks.hide();

clear()

Clear Massive Points

Demo:

massMarks.clear();

Event

Event Name	Description
complete	Massive Points Loading Completion Event
click	Left Mouse Click Event
dblclick	Left Mouse Double Click Event
mousemove	Mouse Movement
mouseover	Event triggered when the mouse moves close to a point marker
mouseout	Event triggered when the mouse moves out of a point marker
mousedown	Event triggered when the mouse is pressed on a point marker
mouseup	Event triggered when the mouse is pressed and then released on a point marker
touchstart	Event triggered when touch starts, only applicable to mobile devices
touchend	Event triggered when touch ends, only applicable to mobile devices

For event object property descriptions, go to:MapsEvent