cesium vue大屏 全套代码查看_vue2+cesium+天地图

安装 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,
 
                    },
                });