supermap：聚合的使用

点聚合的作用是把一定范围内的点聚合在一起计数，举个例子，中国有100所大学，其中湖北省有40所，湖南省30所，广东省20所，广西省10所，然后往下继续细分到每一所大学的定位，那么我们在地图初始化状态看到一个圆圈，标注数字是100，这是总数，继续放大，一个圆圈变成4个圆圈，上面分别是40,30,20和10，以此类推。

1、安装Leaflet.markercluster

https://github.com/Leaflet/Leaflet.markercluster

还是推荐使用npm install leaflet.markercluster

2、安装完成后，在node_modules里面就有leaflet.markercluster了，我们需要在main.js里引入markercluster的js和css。

import 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'

3、先定义一个聚合图层

resultLayer = L.markerClusterGroup({
					spiderfyOnMaxZoom: false,
					//设置为true时显示聚类所占据的范围
					showCoverageOnHover: false,
					//设置为true时会向低一级聚类缩放
					zoomToBoundsOnClick: false
				});

4、然后往聚合图层里加marker，使用循环，加入很多很多的marker。

this.stations.forEach(element => {
					var lat = element.latitude;
					var lon = element.longitude;
					var markpoint = element.markpoint;
					var myIcon = L.icon({
						iconUrl: iconUrl,
						iconSize: [20, 20]
					});
					
					var marker = L.marker([lat, lon], {
						icon: myIcon
					});
					
					marker.bindPopup(markpoint);
					resultLayer.addLayer(marker);
					
				})

5、再把聚合图层加到map里去面。

this.map.addLayer(resultLayer);

完整代码：

<template>
	<div id="map" style="margin: 20px auto; width:100%;height:500px;"></div>
	<!-- width可以为100%，但是height必须是一个确定的值 -->
</template>

<script>
	import iconUrl from '../assets/gas_station.png';
	export default {
		name: "hello",
		components: {

		},
		data() {
			return {
				map: null,
				stations: [{
					"markpoint": "A加油站xxxx路xx号",
					"latitude": 32.04482,
					"longitude": 112.13546
				}, {
					"markpoint": "B加油站xxxx路x2222号",
					"latitude": 32.359068,
					"longitude": 111.683861
				}, {
					"markpoint": "加油站11路2号",
					"latitude": 32.38887,
					"longitude": 111.903148
				}, {
					"markpoint": "加油站21路3号",
					"latitude": 31.367942,
					"longitude": 110.349102
				}, {
					"markpoint": "加油站31路4号",
					"latitude": 33.736532,
					"longitude": 113.916354
				}, {
					"markpoint": "加油站41路5号",
					"latitude": 33.226085,
					"longitude": 113.533704
				}, {
					"markpoint": "加油站51路6号",
					"latitude": 32.130095,
					"longitude": 111.31492
				}, {
					"markpoint": "加油站61路7号",
					"latitude": 30.27176,
					"longitude": 111.558339
				}, {
					"markpoint": "加油站71路8号",
					"latitude": 31.63134,
					"longitude": 113.645388
				}, {
					"markpoint": "加油站81路9号",
					"latitude": 30.294268,
					"longitude": 113.684845
				}]
			}
		},
		created() {

		},
		destroyed() {
			this.map = null;
		},

		mounted() {
			this.initMap();

		},
		methods: {
			initMap() {
				var resultLayer;
				var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326';
				this.map = L.map('map', {
					preferCanvas: true,
					crs: L.CRS.EPSG4326,
					// center: [0, 0],
					center: [34, 108],
					maxZoom: 18,
					zoom: 3,
					attributionControl: false // 移除右下角leaflet标识
				});
				L.supermap.tiledMapLayer(url).addTo(this.map);
				var markers = [];
				resultLayer = L.markerClusterGroup({
					spiderfyOnMaxZoom: false,
					//设置为true时显示聚类所占据的范围
					showCoverageOnHover: false,
					//设置为true时会向低一级聚类缩放
					zoomToBoundsOnClick: false
				});
				this.stations.forEach(element => {
					var lat = element.latitude;
					var lon = element.longitude;
					var markpoint = element.markpoint;
					var myIcon = L.icon({
						iconUrl: iconUrl,
						iconSize: [20, 20]
					});
					
					var marker = L.marker([lat, lon], {
						icon: myIcon
					});
					
					marker.bindPopup(markpoint);
					// markers.push(marker);
					resultLayer.addLayer(marker);
					//当resultLayer是聚合图层的时候，我们循环产生的marker要一一加入到图层里
					// 而不能将marker放到数组里，最后才把数组加到图层里
					
				})
				// resultLayer.addLayer(markers);
				this.map.addLayer(resultLayer);
				// resultLayer = L.featureGroup(markers).addTo(this.map);
			},
		},
	}
</script>

<style scoped>

</style>

效果图：