安装 cesium
npm install cesium
一,加载3d地图
1,加载 3DTiles 数据
let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: '3d地址',
skipLevelOfDetail: true,
baseScreenSpaceError: 1024,
skipScreenSpaceErrorFactor: 1,
skipLevels: 0,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: false,
cullWithChildrenBounds: true,
maximumMemoryUsage: 1024 * 8,
dynamicScreenSpaceError: true,
dynamicScreenSpaceErrorDensity: 0.00278,
dynamicScreenSpaceErrorFactor: 4.0,
dynamicScreenSpaceErrorHeightFalloff: 0.25
}));
tileset.readyPromise.then(function (tileset) {
//高度偏差,正数为向上偏,负数为向下偏,根据真实的模型位置不断进行调整
//计算tileset的绑定范围
var boundingSphere = tileset.boundingSphere;
//计算中心点位置
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
//console.log('cartographic - ' + itm.url, cartographic);
//计算中心点位置坐标
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
//偏移后的三维坐标
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, (cartographic.height * 1 + 高度));
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//tileset.modelMatrix转换
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
如果3d文件特别多,超过几十G,可以设置 内存、最大屏幕空间误差等等。 加载过最大41G的3d文件也没出现奔溃。
2,加载其他的3d文件,如gltf
var position = Cesium.Cartesian3.fromDegrees(
that.gltfLng, that.gltfLat, that.gltfHgt
);
var heading = Cesium.Math.toRadians(that.gltfRotationZ);
var pitch = 0;
var roll = 0;
var headingPositionRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation1 = Cesium.Transforms.headingPitchRollQuaternion(
position,
headingPositionRoll
);
viewer.entities.add({
id: "whole",
position: position,
name: "whole",
orientation: orientation1,
model: {
uri: "gltf",
scale: 0.9,
shadows: Cesium.ShadowMode.ENABLED,
heightReference: Cesium.HeightReference.NONE,
dequantizeInShader: false,
},
});