console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例</title>
<!-- Cesium CDN 官方 -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<style>
body,
html,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
padding: 20px;
position: absolute;
left: 10px;
top: 10px;
z-index: 999;
color: #fff;
background-color: rgba(40, 44, 50, 0.9);
border-radius: 10px;
}
</style>
<body>
<!-- GIS核心 -->
<div id="cesiumContainer"></div>
<script type="module">
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 控制场景动画的播放速度控件
baseLayerPicker: false, // 底图切换控件
fullscreenButton: false, // 全屏控件
geocoder: false, // 地理位置查询定位控件
homeButton: false, // 默认相机位置控件
timeline: false, // 时间滚动条控件
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
navigationHelpButton: false, // 默认的相机控制提示控件
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
shouldAnimate: true, // 开启动画自动播放
shadows: false, //阴影是否被太阳投射
navigationInstructionsInitiallyVisible: false,
showRenderLoopErrors: false, //是否显示渲染错误
orderIndependentTranslucency: false, //设置背景透明
skyAtmosphere: false, //去光圈
fog: true,
fxaa: true,
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
//调用影像中文服务
url: 'https://{s}.tianditu.gov.cn/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=' +
'f5cfbf7ba440a575faff2af0093f4acb',
layer: 'vec_w', //WMTS请求的层名称
style: 'default', //WMTS请求的样式名称
format: 'tiles', //MIME类型，用于从服务器检索图像
tileMatrixSetID: 'GoogleMapsCompatible', // 用于WMTS请求的TileMatrixSet的标识符
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], //天地图8个服务器
minimumLevel: 0, //最小层级
maximumLevel: 18, //最大层级
}),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'https://data.mars3d.cn/terrain',
}),
});
function load3DTilesLayer(url, height) {
const tileSetPromise = new Cesium.Cesium3DTileset({
url: url,
skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
baseScreenSpaceError: 256,
maximumScreenSpaceError: 16, // 【重要】数值加大，能让最终成像变模糊
skipScreenSpaceErrorFactor: 18,
skipLevels: 20,
immediatelyLoadDesiredLevelOfDetail: true,
loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
cullWithChildrenBounds: true,
//cullRequestsWhileMoving: true,
cullRequestsWhileMovingMultiplier: 0.2, //【重要】 值越小能够更快的剔除
preloadWhenHidden: false, //tileset.show是false时，也去预加载数据
preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
maximumMemoryUsage: 1024, // 【重要】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验
progressiveResolutionHeightFraction: 0.5, ////【重要】 数值偏于0能够让初始加载变得模糊
dynamicScreenSpaceErrorDensity: 1, // 数值加大，能让周边加载变快
dynamicScreenSpaceErrorFactor: 4, // 不知道起了什么作用没，反正放着吧先
dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
backFaceCulling: true, // 不剔除 双面渲染
});
viewer.scene.primitives.add(tileSetPromise) // 将倾斜摄影实体加载到地图上
if (Number(Cesium.VERSION) >= 1.92) {
tileSetPromise.readyPromise
.then((tileSet) => {
changeHeight(tileSet, height);
viewer.zoomTo(tileSet); //临时测试用
})
.catch(function(error) {
console.log(error);
});
} else {
tileSetPromise.readyPromise
.then((tileSet) => {
changeHeight(tileSet, height);
viewer.zoomTo(tileSet); //临时测试用
})
}
//修改倾斜的高度
function changeHeight(tileSet, height) {
height = Number(height);
if (isNaN(height)) {
return;
}
const cartographic = Cesium.Cartographic.fromCartesian(
tileSet.boundingSphere.center
);
const surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
cartographic.height
);
const offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
height
);
const translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
}
load3DTilesLayer(
"https://www.hihust.com:20118/3DtilesServer/XinShanXian3DTiles/tileset.json",
315
);
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
-1934151.0133493275,
5102937.639408169,
3297377.8692223644,
),
orientation: {
heading: 6.242615914971332,
pitch: -0.7386823641359883,
roll: 0.000007685437072524337,
},
})
</script>
</html>