高德地图之海量点展示

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.好像有点简单，以后如果用到点击事件什么的再加上...