mapbox-gl 展示 cluster圖層

基本流程是：

1.添加 geojson數據源，設置cluster的參數

2.添加cluster layer，採用step expressions，設置顏色和大小

3.添加標註symbol layer，在cluster圖標裏面顯示數字

4.添加沒有 cluster layer，設置顏色和大小

5.添加點擊事件

6.添加鼠標移動事件

map.on('load', function() {
	// Add a new source from our GeoJSON data and
	// set the 'cluster' option to true. GL-JS will
	// add the point_count property to your source data.
	map.addSource('spjks', {
		type: 'geojson',
		// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
		// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
		data:
		'http://192.168.1.7: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'],
		layout:{ 'visibility' :'none' },
		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
			]
		}
	});

	var link = document.createElement('a');
	link.href = '#';
	link.className = '';
	link.textContent = '室';	 
	link.onclick = function(e) {
		//var clickedLayer = this.textContent;
		e.preventDefault();
		e.stopPropagation();
		 
		var visibility = map.getLayoutProperty('clusters', 'visibility');		 
		// toggle layer visibility by changing the layout object's visibility property
		if (visibility === 'visible') {
			map.setLayoutProperty('clusters', 'visibility', 'none');
			map.setLayoutProperty('cluster-count', 'visibility', 'none');
			map.setLayoutProperty('unclustered-point', 'visibility', 'none');
			this.className = '';
		} else {
			this.className = 'active';
			map.setLayoutProperty('clusters', 'visibility', 'visible');
			map.setLayoutProperty('cluster-count', 'visibility', 'visible');
			map.setLayoutProperty('unclustered-point', 'visibility', 'visible');
		}
	};	 
	var layers = document.getElementById('menu');
	layers.appendChild(link);
	 
	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,
		'visibility' :'none'
		}
	});
	 
	map.addLayer({
		id: 'unclustered-point',
		type: 'circle',
		source: 'spjks',
		filter: ['!', ['has', 'point_count']],
		layout:{ 'visibility' :'none' },
		paint: {
			'circle-color': '#11b4da',
			'circle-radius': 4,
			'circle-stroke-width': 1,
			'circle-stroke-color': '#fff'
		}
	});
	 
	// 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;
		var tsunami;
		 
		if (e.features[0].properties.tsunami === 1) {
			tsunami = 'yes';
		} else {
			tsunami = 'no';
		}
		 
		// 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 = '';
	});
});