- 首页 > 睿知 > it技术 > >
高德地图|vue高德地图实现海量点分组（用icon图标替换海量点）动态循环出groupStyleMap集合
高德地图vuevue.jsjavascript
async created () {
// 已载入高德地图API，则直接初始化地图需要注意高德地图引入的版本，版本太低可能会导致地图不加载，MapKey需要自己去申请
await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&plugin=AMap.DistrictSearch`);
await remoteLoad(`https://webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/`);
await remoteLoad('http://webapi.amap.com/ui/1.1/main.js');
},
methods: {
//_point是海量点数据，数据格式为
//[{id: "s1",latitude: 40.2487,longitude: 113.3646,nodeIds: "1",nodeNames: "",stationName: ""},
//{id: "s2",latitude: 40.2484,longitude: 113.3643,nodeIds: "2",nodeNames: "",stationName: ""}]
//注意海量点的id和经纬度是必需的，其他属性根据具体情况而定
initPoint(_point) {
let AMap = this.AMap = window.AMap;
//创建地图
let map = new AMap.Map('container', {
center: [112.548093,37.874332],
zoom: 6.5,
mapStyle: 'amap://styles/whitesmoke',
});
this.map = map;
//用this是为了全局变量
// 需要引入PointSimplifier
AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
let data = https://www.it610.com/article/_point;
//点数据
//下边是点的逻辑
let pointSimplifierIns, groupStyleMap, dataItems;
groupStyleMap = {};
//高德的示例这里我改了一下，高德里是直接列出来了，太长了（高德原示例具体参考下边的链接：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pointsimplifier/multi-icons）我这里写了循环
//loop数组中数据是为了下边groupStyleOptions方法中id去对应不同样式
let loop = ['03034010200203', '03034010200205', '03034010200201', '030001', '030002', '030003', '030004']
loop.forEach((arr) => {
let result = getStyle(arr);
groupStyleMap[arr] = {
pointStyle: {
//绘制点占据的矩形区域注意require路径的引入方式
content: PointSimplifier.Render.Canvas.getImageContent(
require('@/assets/imgs/' + result.url), onIconLoad, onIconError),
//宽度
width: result.width,
//高度
height: result.height,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
}
}
})
pointSimplifierIns = new PointSimplifier({
zIndex: 115,//层级
map: that.map, //所属的地图实例
getPosition: function (item) {//获取电的坐标
return item.lngLatLine;
},
getHoverTitle: function (dataItem, idx) {//点的悬浮方法
return dataItem.stationName;
},
//使用GroupStyleRender
renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
renderOptions: {
//点的样式 我都设置为0是怕点的宽高数据太大会盖过图标的大小，这里可以随意设置
pointStyle: {
width: 0,
height: 0,
fillStyle: '#A2D0FA'
},
pointHoverStyle: {
width: 0,
height: 0,
content: '',
fillStyle: null,
lineWidth: 0,
strokeStyle: null
},
getGroupId: function (item, idx) {
return item._fullType;
},
groupStyleOptions: function (gid) {
return groupStyleMap[gid];
},
}
});
//鼠标移入事件
pointSimplifierIns.on('pointMouseover', function (e, record) {});
//鼠标移出事件
pointSimplifierIns.on('pointMouseout', function (e, record) {});
// 地图右键事件
that.map.on('rightclick', function (e) {});
window.pointSimplifierIns = pointSimplifierIns;
//点的单击事件
pointSimplifierIns.on('pointClick', function (e, record) {}
//图标渲染事件
function onIconLoad() {
pointSimplifierIns.renderLater();
}
function onIconError(e) {
console.log(e, 'e')
}
})
},
function getStyle (gid) {
let url = '';
let width = parseInt('');
let height = parseInt('');
if (gid == '03034010200203') {
url = '1.png';
width = 20;
height = 20;
} else if (gid == '03034010200205') {
url = '2png';
width = 20;
height = 20;
}
return {url, width, height};
}
}
推荐阅读
