（二）关于cesium地图的使用：常见功能实现及API使用

1、接（一）的flyTo方法实现，coord：经纬度，height：相机高度，time：动画事件，单位秒

flyTo(coord = [116.405285, 40.123456], height = 450000,time = 0) {
	window.viewer.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(
			coord[0],
			coord[1],
			height
		),
		orientation: {
			heading: Cesium.Math.toRadians(0.0),
			roll: 0.0,
		},
		duration: time,
	});
},        

2、cesium上图和下图

// 地图上点
setResourceToMap(resourceList){
	if (!window.dataSourceForCluster) {
		//定义聚合类
		window.dataSourceForCluster = new Cesium.CustomDataSource(
			"clusterSurrounding"
		);  
	}
	// marker点的聚合效果实现
	this.getDataSource();
	// 把数据上点
	let data = resourceList;
	console.log(data)
	if (data && data.list && data.list.length > 0){
		data.list.forEach((item, i) =>{
			// 创建上点对象
			let billboard = {};
			billboard = {
				position: Cesium.Cartesian3.fromDegrees(
					Number(item.longitude),
					Number(item.latitude)
				),
				ids: item.id,
				database: item,
				billboard:{
					image: xxx,// 上图的icon图片
					show: true,
					pixelOffset: Cesium.Cartesian2.ZERO,
					eyeOffset: Cesium.Cartesian3.ZERO,
					heightReference: Cesium.HeightReference.NONE,
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					disableDepthTestDistance: Number.POSITIVE_INFINITY,
				},
			};
			//资源上点
			let a = window.dataSourceForCluster.entities.add(billboard);
			this.entityMarkerList.push(a);// entityMarkerList存储上图的实体对象，下图用window.viewer.entities.remove(entity实体对象)
		});
	}
},

3、聚合效果实现，需要监听地图高度变化，从而动态改变聚合效果。聚合效果如下显示。

// 点位聚合方法
getDataSource(){
	let options = {
		camera: window.viewer.scene.camera,
		canvas: window.viewer.scene.canvas,
	};
	let dataSourcePromise = window.viewer.dataSources.add(
		window.dataSourceForCluster
	);
	// 聚合类dataSourceCollection
	if (!this.dataSourceCollection) {
		this.dataSourceCollection = new Cesium.DataSourceCollection(
			"dataSourceCollection"
		);
	}
	this.dataSourceCollection.add(dataSourcePromise);
	dataSourcePromise.then(function (dataSource) {
		var pixelRange = 50;
		var minimumClusterSize = 2;
		var enabled = false;

		dataSource.clustering.enabled = enabled;
		dataSource.clustering.pixelRange = pixelRange;
		dataSource.clustering.minimumClusterSize = minimumClusterSize;

		var removeListener;

		function customStyle() {
			if (Cesium.defined(removeListener)) {
				removeListener();
				removeListener = undefined;
			} else {
				removeListener = dataSource.clustering.clusterEvent.addEventListener(
					function (clusteredEntities, cluster) {
						let len = clusteredEntities.length;

						cluster.billboard.show = true;
						cluster.billboard.id = cluster.label.ids;

						// cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
						cluster.billboard.image = require("../assets/image/numberbg.png");// 聚合效果的背景
						cluster.billboard.width = 90;
						cluster.billboard.height = 90;

						cluster.label.show = true;
						cluster.label.text = len + "";
						cluster.label.style = Cesium.LabelStyle.FILL;
						cluster.label.fillColor = Cesium.Color.WHITE;
						cluster.label.outlineWidth = 4;
						cluster.label.horizontalOrigin =
							Cesium.HorizontalOrigin.CENTER;
						cluster.label.verticalOrigin =
							Cesium.VerticalOrigin.CENTER;
						cluster.label.disableDepthTestDistance =
							Number.POSITIVE_INFINITY;

						cluster.label.pixelOffset = new Cesium.Cartesian2(0,3);
						cluster.label.eyeOffset = new Cesium.Cartesian3(0,0,-10);

						if (len < 10) {
							cluster.label.font =
								"normal 32px MicroSoft YaHei";
						} else if (len < 100) {
							cluster.label.font =
								"normal 28px MicroSoft YaHei";
						} else if (len < 1000) {
							cluster.label.font =
								"normal 24px MicroSoft YaHei";
						} else if (len < 10000) {
							cluster.label.font =
								"normal 20px MicroSoft YaHei";
						} else {
							cluster.label.font =
								"normal 16px MicroSoft YaHei";
						}
					}
				);
			}
			// force a re-cluster with the new styling
			// var pixelRange = dataSource.clustering.pixelRange;
			// dataSource.clustering.pixelRange = 0;
			// dataSource.clustering.pixelRange = pixelRange;
		}

		// start with custom style
		customStyle();
	});
},

4、监听地图高度变化（地图事件一般定义在地图初始化中）

// 监听地图相机高度-达到相对小的高度聚合打开
addCarmeraListener(){
	let that = this;
	window.viewer.scene.camera.moveEnd.addEventListener(function () {
		if (
			that.dataSourceCollection &&
			that.dataSourceCollection.length > 0
		) {
			var currentMagnitude = window.viewer.camera.getMagnitude();
			// 6373248.307914881
			// 6373578.596961181
			let length = that.dataSourceCollection.length;
			if (currentMagnitude < 6373578.596961181) {
				for (let i = 0; i < length; i++) {
					that.dataSourceCollection.get(
						i
					).clustering.enabled = false;
				}
			} else {
				for (let i = 0; i < length; i++) {
					that.dataSourceCollection.get(
						i
					).clustering.enabled = true;
				}
			}
		}
	});
},

5、画点、线、面具体参考官方案例即可。如果区域需要立体效果可采用走廊实现（后面说）