Vue2项目中使用高德地图自定义（Marker）标记点和创建（MassMarks）海量标记点
前言
本篇文章就是单独分享一下在Vue2项目中如何自定义创建marker标记点和针对要创建庞大数量标记点时所采用的API，能够快速创建数量庞大的marker，不至于在浏览器渲染时产生卡顿的现象。需要了解如何在Vue2项目中引入高德地图请参照这篇文章===>Vue2项目引入高德地图。下面开始分享。
一、自定义Marker标记点的创建
1. 初始化地图
//初始化地图
initMap() {
this.map = new window.AMap.Map("map", {
resizeEnable: true,//是否监控地图尺寸变化
center: [116.397428, 39.90923],//地图中心点，按自己项目需要进行定位
zoom: 10,//地图缩放级别
});
/** 下面是初始化地图时给地图绑定的一些事件，有需要可以添加并补充自己的逻辑不需要可以不用添加 */
//鼠标在地图中移动事件
this.map.on("mousemove", (res) => {
});
//鼠标在地图中离开事件
this.map.on("mouseleave", (res) => {
});
//地图双击事件
this.map.on("dblclick", (res) => {
});
//地图移动结束后的事件
this.map.on("moveend", (res) => {
});
this.map.setDefaultCursor("pointer"); // 使用CSS默认样式定义地图上的鼠标样式
},2.创建marker
//1.创建Marker对象
let marker = new window.AMap.Marker({
position: [经度,纬度],//要展示marker的经度、纬度。数据格式就是数组里放入经纬度数据
icon: require("../../../public/img/bg/site.png"), //显示的图标
offset: [-16, -32],//图标偏移量，展示时会默认以图标的左上角为原点，不设置偏移量会导致地图放大缩小时造成图标偏移的情况，偏移量设置为图标宽度的负一半，负整个高度。
});3.将marker添加到地图上
this.map.add(marker); //添加marker至此一个标记点就在地图中显示啦。
二、创建海量点标记（MassMarks 类）
叙述：当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。通过此方法渲染标记点确实很快。
1.创建样式对象
这个步骤主要是为了给海量点标记创建统一的样式对象，如果只需要渲染一个样式直接创建一个对象即可，如果需要给海量点添加多种样式，可以通过数组创建多个样式对象。
//单个样式对象
let style = {
url: require("../../../public/img/bg/site.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor:new AMap.Pixel(20, 30);, // 偏移量
}
//多个样式对象 我这里使用的多种样式图标
let styleObjArr = [
{
url: require("../../../public/img/bg/site.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
zIndex: publicZindex,//每种样式图标的叠加顺序，数字越大越靠前
},
{
url: require("../../../public/img/bg/one.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/two.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/three.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/other.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: 500,
},
];
2.请求回来的数据处理成MassMarks 类需要的数据格式
zhy = zhy.map((m) => {
return {
id: m.siteId,//数据id
name: m.name,//数据名称
monthInNum:m.monthInNum,//这是我自己需要的数据
// lnglat: [m.lon, m.lat],//经纬度数据
lnglat: wgs84togcj02(m.lon, m.lat),//这里我是转化一下，数据返回的是84坐标系需要转成高德坐标系否则会有偏差
style: 0,//渲染的样式下标，关联第一步创建的样式对象数组的数据
};
});3.创建海量点对象，并填充数据
that.massSiteMarks = new AMap.MassMarks(zhy, {
zIndex: publicZindex,//图层的层级
zooms: publicZooms,//所显示的缩放级别，格式为[3,18],看自己项目需要进行设置
style: styleObjArr,//图标样式
opacity: 1,//透明度
});
let siteMarker = new AMap.Marker({ content: " ", map: that.map });
that.massSiteMarks.on("click", (res) => {
//给海量点绑定点击事件，res里面有你自己填充的数据
});
that.massSiteMarks.on("mouseover", (res) => {
//鼠标移入事件
});
that.massSiteMarks.on("mouseout", (res) => {
//鼠标移出事件
});4.将 massMarks 添加到地图实例
that.massSiteMarks.setMap(that.map);以上就是添加海量点的步骤了，下面放完整代码~~
let anchor = new AMap.Pixel(20, 30);
let publicZindex = 999;
let styleObjArr = [
{
url: require("../../../public/img/bg/site.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/one.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/two.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/three.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: publicZindex,
},
{
url: require("../../../public/img/bg/other.png"), // 图标地址
size: new AMap.Size(30, 30), // 图标大小
anchor, // 偏移量
// zIndex: 500,
},
];
let publicZooms = [3, 20];
let zhy = data.data.filter((f) => f.isCnooc == 1);
if (zhy.length) {
//处理数据
zhy = zhy.map((m) => {
return {
id: m.siteId,
name: m.name,
monthInNum:m.monthInNum,
// lnglat: [m.lon, m.lat],
lnglat: wgs84togcj02(m.lon, m.lat),
style: 0,
};
});
this.$nextTick(() => {
//此代码是为了防止数据量过大渲染marker会造成卡顿，使用批量添加
that.massSiteMarks = new AMap.MassMarks(zhy, {
zIndex: publicZindex,
zooms: publicZooms,
style: styleObjArr,
opacity: 1,
});
let siteMarker = new AMap.Marker({ content: " ", map: that.map });
that.massSiteMarks.on("click", (res) => {
});
that.massSiteMarks.on("mouseover", (res) => {
});
that.massSiteMarks.on("mouseout", (res) => {
});
that.massSiteMarks.setMap(that.map);
});
}