PointSimplifier是一个针对海量点展示场景的组件,能够支持较大规模的经纬度数据,以及配置丰富的展示效果。
1.根据高德地图提供的示例实现,效果如图:
2.实现步骤:
a.申请JS API的key
b.创建一个jsp和js文件,顺便引入高德地图需要的JS API (因为海量点展示是属于UI组件库的,所以还有引入UI组件库的JS API ), 引用 js文件
(高德教程里面的海量点标记不是海量点展示,刚开始看到那里,没有引入UI库,JS老是报错... )
c.在jsp页面,写好地图展示的div
d.在JS文件里面编写,在加载JS文件的时候,就创建地图容器,并且实现海量点。
我的createMap()方法是页面加载的时候就执行的,可以用windows.onload();
这里的经纬度点的数据,是捏造的,可以调用方法,获取后台实际数据;
海量点展示的时候,地图容器viewMode不能使用'3D',因为3D会有偏转,经纬度不准确,如果用3D视图就会报错;
如果想要是Map的缩放级别生效,海量点展示必须设置autoSetFitView:false;
var map;//地图容器
var data;//海量点的数据
function createMap{
/**初始化地图容器**/
map = new AMap.Map('container',{
// resizeEnable: true,
zoom : 5,//缩放级别
center : [103.323602,22.722348]//, //中心点坐标
//layers : [new Amap.TileLayer.Satellite()] //使用多图层
//viewMode : '3D' //注:UI库不能使用3D视图
});
//制造出来的数据,可以在这里调用方法,获取后台返回来的数据
data = createPoints(map.getCenter(), 500) ;
AMapUI.loadUI(['misc/PointSimplifier'], function(PointSimplifier) {
//或 : AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
if (!PointSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!');
return;
}
//启动页面,画出海量点展示
initPage(PointSimplifier);
});
}
function initPage(PointSimplifier){
var pointSimplifierIns = new PointSimplifier({
map: map, //所属的地图实例
data : data,//data数组数据
//要让Map的zoom生效,必须修改下面的autoSetFitView
autoSetFitView :false,// 是否在绘制后自动调整地图视野以适合全部点,默认true
compareDataItem: function(a, b, aIndex, bIndex) {
//数据源中靠后的元素优先,index大的排到前面去
return aIndex > bIndex ? -1 : 1;
},
getPosition: function(dataItem) {//返回数据项中的经纬度信息
if (!dataItem) {
return null;
}
return [dataItem.position[0], dataItem.position[1]];
},
getHoverTitle: function(dataItem, index) { //返回鼠标指针浮动在上面的元素时显示的Title内容
return index + ': ' + [dataItem.position[0], dataItem.position[1]];
},
renderOptions: {
pointStyle: { //点的样式
width: 6,
height: 6,
fillStyle: 'red' //填充颜色
},
//鼠标hover时的title信息的位置
hoverTitleStyle: {
position: 'top'
}
}
});
}
/***
* 制造点出来试用,以map的中心点 为中心制造500个点
*/
function createPoints(center, num) {
var data = [];
for (var i = 0, len = num; i < len; i++) {
data.push({
position: [
center.getLng() + (Math.random() > 0.5 ? 1 : -1) * Math.random(),
center.getLat() + (Math.random() > 0.5 ? 1 : -1) * Math.random()
]
});
}
return data;
}
3.好像有点简单,以后如果用到点击事件什么的再加上...