先上效果，将城市白模数据和影像数据重合，可以对白模数据进行编写后显示。
1，将倾斜摄影OSGB文件通过cesiumleb工具转成3dtiles文件
2、加载白模和倾斜影像 直接上代码 其中用到的白模数据和大雁塔数据点击下载
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="xian/jquery.min.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.layui-card {
position: absolute;
top: 10px;
left: 5px;
background-color: #ffffff6b;
box-shadow: inset 1px 2px 2px 0 #f2f6fc;
color: white
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<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
//西安白模加载模型
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'xian/tileset.json',
//classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
}));
//根据自定义属性设置颜色
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('rgba(255,255,255,0.01)')",
/* color: {
conditions: [
['${floor} > 20', 'color("cyan", 1)'],
['${floor} > 10', 'rgba(150, 150, 150, 1)'],
['true', 'color("blue")']
]
} */
});
//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);
changeHeight(0);
viewer.zoomTo(tileset2);
}).otherwise(function(error) {
throw (error);
});
//大雁塔数据
var tileset2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'dayanta/tileset.json',
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
}));
//调整大雁塔高度
function changeHeight(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(tileset2.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset2.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
//单体选择
/* 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); */
</script>
</body>
</html>
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
