mapbox-gl 展示 cluster图层

基本流程是：

1.添加 geojson数据源，设置cluster的参数

2.添加cluster layer，采用step expressions，设置颜色和大小

3.添加标注symbol layer，在cluster图标里面显示数字

4.添加无法的 cluster layer，设置颜色和大小

5.添加点击事件，点击事件回调函数里面添加和删除数据和图层

6.添加鼠标移动事件

//获取图层列表的父元素
var layers = document.getElementById('menu');
//添加图层列表 ,设置图层列表的样式
var link_spjks_jh = document.createElement('a');
link_spjks_jh.href = '#';
link_spjks_jh.className = '';
link_spjks_jh.textContent = '-聚合';

//通过点击事件来启动和关闭图层，这可以实现切换地图style的时候，都可以显示图层，不过，都需要点击多一次。
link_spjks_jh.onclick = function(e) {
	//阻止默认事件
	e.preventDefault();
	e.stopPropagation();
	//返回undefined 或者object，object.id就是图层的ID。
	var layerID = map.getLayer('clusters');  

	if (layerID === undefined){
		map.addSource('spjks', {
			type: 'geojson',
			data: 'http://192.168.10.103:8080/spjks.geojson',
			cluster: true,
			clusterMaxZoom: 16, // Max zoom to cluster points on
			clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
		});	
		 
		map.addLayer({
			id: 'clusters',
			type: 'circle',
			source: 'spjks',
			filter: ['has', 'point_count'],			
			paint: {
			// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
			// with three steps to implement three types of circles:
			//   * Blue, 20px circles when point count is less than 100
			//   * Yellow, 30px circles when point count is between 100 and 750
			//   * Pink, 40px circles when point count is greater than or equal to 750
				'circle-color': [
					'step',
					['get', 'point_count'],
					'#51bbd6',
					100,
					'#f1f075',
					750,
					'#f28cb1'
				],
				'circle-radius': [
					'step',
					['get', 'point_count'],
					20,
					100,
					30,
					750,
					40
				]
			}
		});	
		 
		map.addLayer({
			id: 'cluster-count',
			type: 'symbol',
			source: 'spjks',
			filter: ['has', 'point_count'],
			layout: {
			'text-field': '{point_count_abbreviated}',
			'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
			'text-size': 12			
			}
		});
		 
		map.addLayer({
			id: 'unclustered-point',
			type: 'circle',
			source: 'spjks',
			filter: ['!', ['has', 'point_count']],
			paint: {
				'circle-color': '#11b4da',
				'circle-radius': 4,
				'circle-stroke-width': 1,
				'circle-stroke-color': '#fff'
			}
		});	
		//设置a的样式
		this.className = 'active';
		 
		// inspect a cluster on click
		map.on('click', 'clusters', function(e) {
			var features = map.queryRenderedFeatures(e.point, {
				layers: ['clusters']
			});
			var clusterId = features[0].properties.cluster_id;
			map.getSource('spjks').getClusterExpansionZoom(
				clusterId,
				function(err, zoom) {
					if (err) return;				 
					map.easeTo({
						center: features[0].geometry.coordinates,
						zoom: zoom
					});
				}
			);
		});
		 
		// When a click event occurs on a feature in
		// the unclustered-point layer, open a popup at
		// the location of the feature, with
		// description HTML from its properties.
		map.on('click', 'unclustered-point', function(e) {
			var coordinates = e.features[0].geometry.coordinates.slice();
			var sl = e.features[0].properties.sl;
			var name = e.features[0].properties.name;
			 
			// Ensure that if the map is zoomed out such that
			// multiple copies of the feature are visible, the
			// popup appears over the copy being pointed to.
			while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
				coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
			}
			 
			new mapboxgl.Popup()
			.setLngLat(coordinates)
			.setHTML(
			'数量: ' + sl + '<br>名称: ' + name
			)
			.addTo(map);
		});
		 
		map.on('mouseenter', 'clusters', function() {
			map.getCanvas().style.cursor = 'pointer';
		});
		map.on('mouseleave', 'clusters', function() {
			map.getCanvas().style.cursor = '';
		});
	} else {
		//再次点击，清除图层和源。
		map.removeLayer('clusters');
		map.removeLayer('cluster-count');
		map.removeLayer('unclustered-point');
		map.removeSource('spjks');
		this.className = '';
	} 
	
};
//把这个'a'元素添加到menu
layers.appendChild(link_spjks_jh);