热力图转海量点 | 易学教程

大量坐标点如何在地图上合理的展示，这是个一直困扰我的问题。很多方法和组件都试过，效果并不理想。

地图级别高时，人们往往想看总体效果，地图放大到城市街道级别，又想看详细坐标点。

我按照这个思路实现了一个demo，大致思路是地图级别高时显示热力图，地图级别低时显示坐标点。这样既能规避全局总览时点太多卡慢看不清的问题，也能完整显示所有坐标点。

当然手动实现的并不完美，百度地图api对zoom的属性支持太差，我现在判断条件是拿的getZoom()>7，实际效果是取的上一次的地图级别，不是当前地图级别。要完美实现这样的功能，除非组件有这样的完整功能能直接用，可以期待一下mapv，echart这些。

上效果，开局热力图，滚动鼠标滚轮放大，然后显示成海量点。注意一定是滚轮放大，我只加了滚轮监听，双击放大无效。

本来海量点是可以加一些反显的，但项目决定改用mapd了...嗯baidu地图也就弃了，所以反显我就没加了。

主页面，head引一下百度api

		<script>
			jQuery(document).ready(function() {
				getMap();
				getHeatmap();
			});
		</script>
	</head>

	<body>
		<div id="container"></div>
	</body>

PlusMap.js ，热力图及海量点处理

/*** 地图坐标尺小于8时显示热力图 ***/
var hmap;

function getHeatmap() {

	if(!isSupportCanvas()) {
		alert('您所使用的浏览器不支持热力图，请使用支持canvas的浏览器如谷歌、火狐等');
	}

	/** * 热力图接口调用begin ** */
	hmap = new BMapLib.HeatmapOverlay({
		"radius": 5
	});

	map.addOverlay(hmap);
	hmap.setDataSet({
		data: heatmap_points,
		max: 6
	});
	hmap.show();
	/** * 热力图接口调用end ** */
};

/*** 判断浏览区是否支持canvas ***/
function isSupportCanvas() {
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
};

/*** 海量点加载 ***/
function seaMarker() {

	if(document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
		var points = []; // 添加海量点数据
		for(var i = 0; i < shop_lngs.length; i++) {
			points.push(new BMap.Point(shop_lngs[i], shop_lats[i], ""));
		}
		var options = {
			size: BMAP_POINT_SIZE_SMALLER,
			shape: BMAP_POINT_SHAPE_CIRCLE,
			color: '#d9d919'
		}

		var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
		map.addOverlay(pointCollection); // 添加Overlay
	} else {
		alert('请在chrome、safari、IE8+以上浏览器查看本示例');
	}

};

baseMap.js加载地图

var map;
var MarkerSwitch = 0;

/*** 地图初始化 ***/
function getMap() {

	map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);

	/*** 基本控件begin ***/
	map.enableScrollWheelZoom();
	//map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());
	/*** 基本控件end ***/

	setStyle();
	setLis();
};

/*** 缩放监听***/
function setLis() {
	var scrollFunc = function(e) {

		var zoom = map.getZoom();

		if(zoom >= 7) {
			if(MarkerSwitch == 0) {
				hmap.hide();
				seaMarker();
				MarkerSwitch = 1;
			} else {
				hmap.hide();
				$('#myCanvasElement').show();
			}
		} else {
			$('#myCanvasElement').hide();
			hmap.show();
		}

	}
	/*注册事件*/
	if(document.addEventListener) {
		document.addEventListener('DOMMouseScroll', scrollFunc, false);
	} //W3C
	window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
}

/*** 地图自定义样式 ***/
function setStyle() {

	map.setMapStyle({
		styleJson: [{
			"featureType": "water",
			"elementType": "all",
			"stylers": {
				"color": "#044161"
			}
		}, {
			"featureType": "land",
			"elementType": "all",
			"stylers": {
				"color": "#091934"
			}
		}, {
			"featureType": "boundary",
			"elementType": "geometry",
			"stylers": {
				"color": "#064f85"
			}
		}, {
			"featureType": "railway",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "highway",
			"elementType": "geometry",
			"stylers": {
				"color": "#004981"
			}
		}, {
			"featureType": "highway",
			"elementType": "geometry.fill",
			"stylers": {
				"color": "#005b96",
				"lightness": 1
			}
		}, {
			"featureType": "highway",
			"elementType": "labels",
			"stylers": {
				"visibility": "on"
			}
		}, {
			"featureType": "arterial",
			"elementType": "geometry",
			"stylers": {
				"color": "#004981",
				"lightness": -39
			}
		}, {
			"featureType": "arterial",
			"elementType": "geometry.fill",
			"stylers": {
				"color": "#00508b"
			}
		}, {
			"featureType": "poi",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "green",
			"elementType": "all",
			"stylers": {
				"color": "#056197",
				"visibility": "off"
			}
		}, {
			"featureType": "subway",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "manmade",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "local",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "arterial",
			"elementType": "labels",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "boundary",
			"elementType": "geometry.fill",
			"stylers": {
				"color": "#029fd4"
			}
		}, {
			"featureType": "building",
			"elementType": "all",
			"stylers": {
				"color": "#1a5787"
			}
		}, {
			"featureType": "label",
			"elementType": "all",
			"stylers": {
				"visibility": "off"
			}
		}, {
			"featureType": "poi",
			"elementType": "labels.text.fill",
			"stylers": {
				"color": "#ffffff"
			}
		}, {
			"featureType": "poi",
			"elementType": "labels.text.stroke",
			"stylers": {
				"color": "#1e1c1c"
			}
		}, {
			"featureType": "administrative",
			"elementType": "labels",
			"stylers": {
				"visibility": "on"
			}
		}, {
			"featureType": "road",
			"elementType": "labels",
			"stylers": {
				"visibility": "off"
			}
		}]
	});

}

数据格式这样的自己造一下吧，还有css之类的自己调一下就行

来源：CSDN

作者：ml1658503

链接：https://blog.csdn.net/ml1658503/article/details/78810244

标签

地图

地图api