Cesium基本使用，包括加载影像，地形，模型等，设置地图样式

加载球体

1、下载cesium包https://download.youkuaiyun.com/download/weixin_39150852/20303629，在html里引入

<link href="static/Cesium-1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="static/Cesium-1.82/Build/Cesium/Cesium.js" type="text/javascript"></script>

2、定义公共方法，全局引入

Array.prototype.filter = Array.prototype.filter || function (func) {
    var arr = this;
    var r = [];
    for (var i = 0; i < arr.length; i++) {
        if (func(arr[i], i, arr)) {
            r.push(arr[i]);
        }
    }
    return r;
}

Array.prototype.firstOrDefault = Array.prototype.firstOrDefault || function (func) {
    var arr = this;
    var r=null ;
    for (var i = 0; i < arr.length; i++) {
        if (func(arr[i], i, arr)) {
            r=arr[i];
            break;
        }
    }
    return r;
}

Array.prototype.where = Array.prototype.where || function (func) {
    var arr = this;
    var r = [];
    for (var i = 0; i < arr.length; i++) {
        if (func(arr[i], i, arr)) {
            r.push(arr[i]);
        }
    }
    return r;
}

3、初始化地图

<template>
    <div>
		<div id='cesiumContainer'></div>
    </div>
</template>

<script>
	var viewer = null;
    export default {
        components: {},
        data() {
            return {

            }
        },
		mounted(){
        	this.initMap();
		},
		methods: {
			initMap(){
				viewer = new Cesium.Viewer('cesiumContainer', {
					geocoder: false,//地名查找,默认true
					homeButton: false,//主页按钮，默认true
					sceneModePicker: false,// 2D,3D和Columbus View切换控件
					baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true
					navigationHelpButton: false,// 帮助提示控件
					animation: false, //视图动画播放速度控件，默认true
					timeline: false,//时间线,默认true
					fullscreenButton: false,//全屏按钮,默认显示true
					infoBox: false,//点击要素之后显示的信息,默认true
					selectionIndicator: false,//选中元素显示,默认true
					scene3DOnly: true, // 仅3D渲染，节省GPU内存
					//若未设置imageryProvider属性，将默认加载一个影像
					//若未设置terrainProvider属性，将默认加载一个地形
				});
				viewer.scene.globe.depthTestAgainstTerrain = true; //解决垂直视角时点击报错的问题
      			viewer.cesiumWidget.creditContainer.style.display = "none";// 隐藏Logo，水印
				viewer.imageryLayers.removeAll(); //删除默认影像
			}
		}
    }
</script>

<style lang="scss" scoped>
	//设置地图宽高，不设置的话canvas的高会一直增加
	#cesiumContainer {
		width: 98%;
		height: 87%;
		position: absolute
	}
</style>

隐藏水印也可通过css方法实现：

.cesium-viewer-timelineContainer,
.cesium-viewer-animationContainer,
.cesium-viewer-bottom {
	display: none !important;
}

加载影像（可叠加多层影像）

		addImagery() {
			var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
				if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
			});
			if (_lyr) return;
			//天地图影像、arcgis的本地切片服务、arcgis发布的imageServer、麒麟地图、发布的zxy形式的地图服务
			/*let imageryProvider = new Cesium.UrlTemplateImageryProvider({
				url: "http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f",
				//url: "http://117.176.159.208:48021/全国影像/{z}/{x}/{y}.png",
				tileWidth: 512,
				tileHeight: 512,
				maximumLevel: 18,
			})*/
			//arcgisserver发布的底图服务，目前仅支持4326和3857坐标系的切片地图加载
			let imageryProvider = new ArcGisMapServerImageryProvider({
		        url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
       		})
			//wmts服务
			/*let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
		        url: "http://t{s}.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=0911bd7d5242feed8ec0fa67f3d47afd",
		        layer: "tdtBasicLayer",
		        style: "default",
		        format: "image/jpeg",
		        tileMatrixSetID: "GoogleMapsCompatible",
		        subdomains: ["0", "1", "2"]
		    })*/
		    //背景图
	        /* let baseImagery = new Cesium.SingleTileImageryProvider({
	          url: "/imgs/home/world.jpg",
	        });*/
			let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
			layer["lyr_ID"] = "baseImageLayerID";
			layer["lyr_NAME"] = "影像底图";
		}

移除影像

	removeImagery() {
        var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
            if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
        });
        if (_lyr) viewer.imageryLayers.remove(_lyr, true);
    }

置顶影像

	TotopTiandituImageMap() {
        var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
            if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
        });
        if (_lyr) viewer.imageryLayers.raiseToTop(_lyr);
    }

加载地形（只能有一个地形服务）

地形地址加载失败会导致看不见球体

		addTerrain() {
			//加载cesium格式的地形数据
			let terrainLayer = new Cesium.CesiumTerrainProvider({
				url: "http://117.175.169.58:48002/",
				requestVertexNormals: true,
				requestWaterMask: true
			});
		
			//arcgis发布的地形数据
			/*let terrainLayer = new Cesium.ArcGISTiledElevationTerrainProvider({
			  	url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
			});*/

			//添加高度为0的地形, cesium默认加载的就是这个地形对象
	    	/*let terrainLayer = new Cesium.EllipsoidTerrainProvider()};*/
			
			viewer.terrainProvider = terrainLayer
			

移除地形

	removeTerrain() {
		if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
            return
        } else {
            viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
        }
	}

加载3dtiles模型

			addModel(){
				//防止重复加载
			    let model = viewer.scene.primitives._primitives.filter(t => {
			        return t && t.id === '3dTilesModel1';
			    });
			    if (model.length) return;
				let primitive = new Cesium.Cesium3DTileset({
					url: 'http://117.175.169.58:48012/%E6%B5%81%E5%9F%9F%E5%AE%89%E5%85%A8%E6%B0%B4%E7%94%B5%E7%AB%99/tileset.json'
				})
				primitive["name"] = 'mainModel_3dtitles';
    			primitive["id"] = '3dTilesModel1';
				viewer.scene.primitives.add(primitive);
				primitive.readyPromise.then(function (argument) {
					viewer.flyTo(argument);//飞至模型
				})
				//模型抬高0.5m
				primitive.readyPromise.then(function(tileset) {
			        viewer.scene.primitives.add(tileset);
			        let boundingSphere = tileset.boundingSphere;
			        let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
			        let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
			        let offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.5);
			        let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
			        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
			    });
			}

加载glb,gltf模型

addModel() {
	//防止重复加载
    let model = viewer.scene.primitives._primitives.filter(t => {
        return t && t.id === "gltfModel1";
    });
    if (model.length) return;
    let position = Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 0);
    let hpRoll = new Cesium.HeadingPitchRoll(
        Cesium.Math.toRadians(90),
        0,
        Cesium.Math.toRadians(0)
    );
    /*let m = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 0)
    );
    let m1 = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-90));
    Cesium.Matrix4.multiplyByMatrix3(m, m1, m); // 矩阵计算*/
    let primitive = Cesium.Model.fromGltf({
        url: "/model/home/mx.glb",
        modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll),
        //modelMatrix: m
    });
	primitive["name"] = 'mainModel_gltf';
    primitive["id"] = 'gltfModel1';
    viewer.scene.primitives.add(primitive)
    //飞至模型视角
    getViewer().camera.flyTo({
        "destination": {"x": -2177813.7852421473, "y": 4362755.897898611, "z": 4097937.821940227},
        "orientation": {"pitch": -0.5192370076293065, "heading": 4.733198787733471, "roll": 6.2793732598153}
    });
}

调整地图颜色

	let layer = viewer.imageryLayers.get(0)
	//图层亮度，1.0使用未修改的图像颜色。小于1.0会使图像更暗，而大于1.0会使图像更亮
    layer.brightness = 1.0;
    //图层对比度，1.0使用未修改的图像颜色。小于1.0会降低对比度，大于1.0会增加对比度。
     layer.contrast = 1.0;
    //图层饱和度，1.0使用未修改的图像颜色。小于1.0会降低饱和度，大于1.0会增加饱和度。
    layer.saturation = 1.0;
    //图层色调，单位为弧度，0表示使用未修改的图像颜色
   	layer.hue = 0;
    //应用于该图层的伽马校正,1.0使用未修改的图像颜色。
    layer.gamma = 1.0;

设置环境光

如果设置环境光后再显示模型阴影，则阴影方向不受时间控制，以环境光的direction方向为准

 viewer.scene.light = new Cesium.DirectionalLight({
            direction: new Cesium.Cartesian3(1, -1, -1),//方向
            color: Cesium.Color.WHITE,//颜色
            intensity: 0.5 //强度
        });

以下map_common_addDatasouce， jsonParse方法参考https://blog.youkuaiyun.com/weixin_39150852/article/details/119676613