Cesium加载3Dtiles白模shp文件数据

Cesium加载3Dtiles白模shp文件数据

1、将带有高度的区域建筑shp数据通过cesiumlab2转换成3Dtiles文件

2

2、cesium加载3Dtiles

<script>
			var viewer = new Cesium.Viewer('cesiumContainer', {
				imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
					url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
				}),
				/*  animation: false, //是否显示动画控件
				  shouldAnimate : true,
				  homeButton: false, //是否显示Home按钮
				  fullscreenButton: false, //是否显示全屏按钮
				  baseLayerPicker: false, //是否显示图层选择控件
				  geocoder: false, //是否显示地名查找控件
				  timeline: false, //是否显示时间线控件
				  sceneModePicker: true, //是否显示投影方式控件
				  navigationHelpButton: false, //是否显示帮助信息控件
				  infoBox: false, //是否显示点击要素之后显示的信息
				  requestRenderMode: true, //启用请求渲染模式
				  scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
				  sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
				  fullscreenElement: document.body, //全屏时渲染的HTML元素 */
			});
        //开启深度检测
        viewer.scene.globe.depthTestAgainstTerrain = false; 
		//去除logo信息
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印 或 css
			//2加载模型
			var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
				url: 'xian/tileset.json'
			}));

			//根据自定义属性设置颜色
			tileset.style = new Cesium.Cesium3DTileStyle({
				color: {
					conditions: [
						['${floor} > 20', 'color("cyan", 1)'],
						['${floor} > 10', 'rgba(150, 150, 150, 1)'],
						['true', 'color("blue")']
					]
				}
			});
			//单体选择
			var nameOverlay = document.createElement('div');
			viewer.container.appendChild(nameOverlay);
			nameOverlay.className = 'backdrop';
			nameOverlay.style.display = 'none';
			nameOverlay.style.position = 'absolute';
			nameOverlay.style.bottom = '0';
			nameOverlay.style.left = '0';
			nameOverlay.style['pointer-events'] = 'none';
			nameOverlay.style.padding = '4px';
			nameOverlay.style.backgroundColor = 'yellowgreen';
			// Information about the currently selected feature
			var selected = {
				feature: undefined,
				originalColor: new Cesium.Color()
			};
			// An entity object which will hold info about the currently selected feature for infobox display
			var selectedEntity = new Cesium.Entity();

			// Get default left click handler for when a feature is not picked on left click
			var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

			// Change the feature color.
			// Information about the currently highlighted feature
			var highlighted = {
				feature: undefined,
				originalColor: new Cesium.Color()
			};

			// Color a feature yellow on hover.
			viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
				// If a feature was previously highlighted, undo the highlight
				if (Cesium.defined(highlighted.feature)) {
					highlighted.feature.color = highlighted.originalColor;
					highlighted.feature = undefined;
				}
				// Pick a new feature
				var pickedFeature = viewer.scene.pick(movement.endPosition);
				if (!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
					nameOverlay.style.display = 'none';
					return;
				}
				// A feature was picked, so show it's overlay content
				nameOverlay.style.display = 'block';
				nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
				nameOverlay.style.left = movement.endPosition.x + 'px';
				var name = pickedFeature.getProperty('name');
				if (!Cesium.defined(name)) {
					name = pickedFeature.getProperty('id');
				}
				nameOverlay.textContent = name;
				// Highlight the feature if it's not already selected.
				if (pickedFeature !== selected.feature) {
					highlighted.feature = pickedFeature;
					Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
					pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
				}
			}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

			// Color a feature on selection and show metadata in the InfoBox.
			viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
				// If a feature was previously selected, undo the highlight
				if (Cesium.defined(selected.feature)) {
					selected.feature.color = selected.originalColor;
					selected.feature = undefined;
				}
				// Pick a new feature
				var pickedFeature = viewer.scene.pick(movement.position);
				if (!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
					clickHandler(movement);
					return;
				}
				// Select the feature if it's not already selected
				if (selected.feature === pickedFeature) {
					return;
				}
				selected.feature = pickedFeature;
				// Save the selected feature's original color
				if (pickedFeature === highlighted.feature) {
					Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
					highlighted.feature = undefined;
				} else {
					Cesium.Color.clone(pickedFeature.color, selected.originalColor);
				}
				// Highlight newly selected feature
				pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5);
				// Set feature infobox description
				var featureName = pickedFeature.getProperty('name');
				selectedEntity.name = featureName;
				selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
				selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>';
				var propertyNames = pickedFeature.getPropertyNames();
				var length = propertyNames.length;
				for (var i = 0; i < length; ++i) {
					var propertyName = propertyNames[i];
					selectedEntity.description += '<tr><th>' + propertyName + '</th><td>' + pickedFeature.getProperty(propertyName) +
						'</td></tr>';
				}
				selectedEntity.description += '</tbody></table>';
				viewer.selectedEntity = selectedEntity;
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
			//viewer.scene.globe.enableLighting =false 
			tileset.readyPromise.then(function() {
				//开启影子模式
				viewer.shadows = true;
				var boundingSphere = tileset.boundingSphere;
				viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
				viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
			}).otherwise(function(error) {
				throw (error);
			});
		</script>

原始数据文件下载地址https://download.csdn.net/download/qq_34200979/14301132