使用高德Web JS api 展示海量点数据和海量线数据

使用高德web 地图 JS API来展示点数据和线数据，

数据量小的时候，

可以使用点标记的方法来展示点数据，

使用覆盖物群组的方法来展示线数据；

数据量大的时候(目前只测试了10w条以下数据)，

可以使用海量点展示来展示点数据，

使用轨迹展示来展示线数据。

海量数据展示非常迅速，高德还是好厉害的，记录一下。

<!--使用高德WEB JS API的海量点展示和轨迹展示需要引用-->
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<script type="text/javascript">
//海量点展示----展示海量点数据
//定义和引用
var pointSimplifierIns = null;
AMapUI.loadUI(['misc/PointSimplifier'], function(PointSimplifier) {
    if (!PointSimplifier.supportCanvas) {
		alert('当前环境不支持 Canvas！');
		return;
	}
	//创建组件实例
	pointSimplifierIns = new PointSimplifier({
	    map: map, //关联的map
		getPosition: function(dataItem) {
			return dataItem.position;
		},
		renderOptions: {
		    //点的样式
			pointStyle: {
				fillStyle: 'blue' ,//蓝色填充
				width: 6,
				height: 6
			},
		}
	});
});
//示例数据（重点是数据格式，自己从数据库请求到的数据要按照如下格式组织）
var data=[{
            position: [
                113.864691,22.942327
            ]
        }{
            position: [
                120.412618,36.382612
            ]
        }{
            position: [
                113.001181,23.120518
            ]
}];
//展示海量点
pointSimplifierIns.setData(data);
</script>

<script type="text/javascript">
//轨迹展示---可以用来展示海量线数据
//定义和引用
var pathSimplifierIns = null;
AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {
    if (!PathSimplifier.supportCanvas) {
		alert('当前环境不支持 Canvas！');
		return;
	}
	//创建组件实例
	pathSimplifierIns = new PathSimplifier({
		zIndex: 100,
		autoSetFitView: true,
		map: map, //所属的地图实例
		getPath: function(pathData, pathIndex) {
			return pathData.path;
		},
		renderOptions: {
			//线的样式
			pathLineStyle: {
				strokeStyle: 'red',
				lineWidth: 2,
			},
			tartPointStyle: {
				radius: 0,
				fillStyle: 'red',
				strokeStyle: 'red',
				lineWidth: 0
			},
			endPointStyle: {
				radius: 0,
				fillStyle: 'red',
				strokeStyle: 'red',
				lineWidth: 0
			}
		}
	});
});
//示例数据（重点是数据格式就是这样滴）
var data=[{
        name: '轨迹0',
        path: [
            [100.340417, 27.376994],
            [108.426354, 37.827452],
            [113.392174, 31.208439],
            [124.905846, 42.232876]
        ]
    }, {
        name: '大地线',
        //创建一条包括500个插值点的大地线
        path: PathSimplifier.getGeodesicPath([116.405289, 39.904987], [87.61792, 43.793308], 500)
}];
//构建轨迹
pathSimplifierIns.setData(data);
</script>