高效率点图层
高效率点图层(graphicLayer)，主要是针对前端大数据量的点渲染。graphicLayer支持选取对象事件。
创建 graphicLayer，随机绘制10万个圆形进行可视化的展示：
var colorCount = 10;
var colors = getRandomColors(colorCount);
function addGraphicLayer() {
//生成总圆数
var count = 100000;
var graphics = [];
var e = 45;
var randomCircleStyles = [];
for (var i = 0; i < colorCount; i++) {
//定义样式相关属性，填充色，边框颜色，半径等
randomCircleStyles.push(L.supermap.circleStyle({
color: colors[i],
//不透明度
opacity: 1,
//半径
radius: Math.floor(Math.random() * 15 + 1),
//是否填充
fill: true,
//填充色
fillColor: colors[i],
//填充不透明度
fillOpacity: 1
}));
}
//绘制对象，并添加到图层上
for (var i = 0; i < count; ++i) {
//循环生成随机点坐标
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
//定义图层
graphics[i] = L.supermap.graphic({
latlng: L.latLng(coordinates[0], coordinates[1]),
style: randomCircleStyles[Math.floor(Math.random() * colorCount)].getCanvas()
});
}
//将画出来的点渲染到地图上
L.supermap.graphicLayer(graphics).addTo(map);
}
//生成随机颜色
function getRandomColors(count) {
return randomColor({
luminosity: 'bright',
hue: 'random',
alpha: 0.5,
format: 'rgba',
count: count
});
}