cesuim 之点聚合

class polymerization{
	constructor() {
		this.viewer = null
		this.init()
	}

	init() {
		//初始化地图
		this.initMap()
		
		//处理聚合
		this.polymerization()		
	}

	initMap() {
		this.viewer = new Cesium.Viewer('cesiumContainer',{
			geocoder: false,
			baseLayerPicker: false,
			sceneModePicker: false,
			fullscreenButton: false,
			navigationHelpButton: false,
			sceneMode: Cesium.SceneMode.SCENE3D,
			shouldAnimate: true,
			animation: false,
			timeline: false,
			imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
				url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=1a7ec240fc2783062616cc53caac5514",
				layer: "tdtBasicLayer",
				style: "default",
				format: "image/jpeg",
				tileMatrixSetID: "GoogleMapsCompatible",
				maximumLevel: 18,
				show: false,
		   })
		});
						 
		this.viewer.camera.flyTo({
			destination : Cesium.Cartesian3.fromDegrees(115.16743519182551,22.575871697376243, 100000.0)
		});
	}

	polymerization() {
		let _this = this;
		let options = {
			camera: _this.viewer.scene.camera,
			canvas: _this.viewer.scene.canvas,
		};

		let dataSourcePromise = this.viewer.dataSources.add(
			Cesium.KmlDataSource.load(
			"./kml/facilities/facilities.kml",
			options
			)
		);

		dataSourcePromise.then((dataSource) => {
			const pixelRange = 80;
			const minimumClusterSize = 2;
			const enabled = true;
		
			dataSource.clustering.enabled = enabled;
			dataSource.clustering.pixelRange = pixelRange;
			dataSource.clustering.minimumClusterSize = minimumClusterSize;
		
			dataSource.entities.values.forEach(entity => {
				entity.billboard.image = `./assets/img/localtion.png`
				entity.type = "cluser";
			}); 

			this.dealStyle(dataSource)
		})
	}

	dealStyle(dataSource) {	
		let removeListener;
		if (Cesium.defined(removeListener)) {
			removeListener();
			removeListener = undefined;
		} else {
		  removeListener = dataSource.clustering.clusterEvent.addEventListener(
			(clusteredEntities, cluster) => {
			  let len = clusteredEntities.length;
	  
			  cluster.billboard.show = true;
			  cluster.billboard.id = cluster.label.ids;
	  
			  cluster.label.horizontalOrigin =
				Cesium.HorizontalOrigin.CENTER;
			  cluster.label.verticalOrigin =
				Cesium.VerticalOrigin.CENTER;
			  
			  cluster.label.font = '14pt Source Han Sans CN'
	  
			  if (len < 4) {
				widHei(0)
			  } else if (len < 8) {
				widHei(1)
			  } else if (len < 12) {
				widHei(2)
			  } else if (len < 16) {
				widHei(3)
			  } else {
				widHei(4)
			  }
	  
			  function widHei(num){
				cluster.billboard.image = `./assets/img/round${num}.png`
				cluster.billboard.width = 60
				cluster.billboard.height = 60
			  }
			}
		  );
		}
	}
}

new polymerization()

kml文件

<?xml version="1.0" encoding="utf-8"?>

<kml>
  <Document>
    <Placemark>
      <Point>
        <coordinates>114.41555649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.41556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.52556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.51967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.91927331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.32556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42576649491575,22.92967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>114.41555649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.41556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.52556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.51967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.91927331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.32556649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42576649491575,22.92967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>114.41555649491575,22.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.41552649491575,22.91267331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42554649491575,22.91267331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.52556641491575,22.91267331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.22556649491575,22.51967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42556649491575,22.01927331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.31556649491575,23.91967331218551</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <Point>
        <coordinates>115.42576649491575,22.92967331218551</coordinates>
      </Point>
    </Placemark>
    
  </Document>
</kml>

效果如下：

20210430