vue3+Cesium添加影像地图、自定义集合体、标签以及3Dtiles三维模型实践

定义容器：

初始化

const viewer = new Cesium.Viewer('map', {
                homeButton: true,
                sceneModePicker: true,
                baseLayerPicker: false, // 影像切换
                animation: false, // 是否显示动画控件
                infoBox: false, // 是否显示点击要素之后显示的信息
                selectionIndicator: false, // 要素选中框
                geocoder: true, // 是否显示地名查找控件
                timeline: true, // 是否显示时间线控件
                fullscreenButton: true,
                shouldAnimate: false,
                navigationHelpButton: true, // 是否显示帮助信息控件
            });

添加高德影像注记地图

viewer.imageryLayers.addImageryProvider(
                new Cesium.UrlTemplateImageryProvider({
                    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=6",
                })
            );

设置视图显示初始中心位置

const boundingSphere = new Cesium.BoundingSphere(
                Cesium.Cartesian3.fromDegrees(114.26538, 30.49532, 0),
                15000
            );
            // 定位到初始位置
viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: 1,
            });

添加几何实体

viewer.entities.add({
                name: "box2",
                position: Cesium.Cartesian3.fromDegrees(114.26538, 30.49532, 0),
                box: {
                    dimensions: new Cesium.Cartesian3(40.0, 100.0, 150.0),
                    material: Cesium.Color.fromAlpha(Cesium.Color.RED, 1), // 配置颜色透明度
                },
            });
viewer.entities.add({
                name: "ellipse",
                position: Cesium.Cartesian3.fromDegrees(114.27538, 30.49532, 0),
                ellipse: {
                    semiMinorAxis: 100,
                    semiMajorAxis: 200,
                    height: 0,
                    material: Cesium.Color.fromAlpha(Cesium.Color.RED, 0.5), // 配置颜色透明度
                },
                label : {
                    text : 'Citizens Bank Park',
                    font : '14pt monospace',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineWidth : 2,
                    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset : new Cesium.Cartesian2(0, -9)
                }
            });

加载外部GLTF模型

viewer.entities.add({
       id: 'myEntity',
       position: Cesium.Cartesian3.fromDegrees(114.26538, 30.49532, 0), //模型的位置
       // orientation: orientation_air,
       model: {
                    uri: require('模型地址'),
                    minimumPixelSize: 500,
                    maximumScale: 10000,
                    show: true,
                },
            });

通过CZML添加几何体

let czml = [{
                "id" : "document",
                "name" : "box",
                "version" : "1.0"
            },{
                "id" : "shape2",
                "name" : "Red box with black outline",
                "position" : {
                    "cartographicDegrees" : [114.26538, 30.48532, 0]
                },
                "box" : {
                    "dimensions" : {
                        "cartesian": [40.0, 300.0, 50.0]
                    },
                    "material" : {
                        "solidColor" : {
                            "color" : {
                                "rgba" : [255, 0, 0, 188]
                            }
                        }
                    },
                    "outline" : true,
                    "outlineColor" : {
                        "rgba" : [0, 0, 0, 255]
                    }
                }
            }];

let dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);

加载3D Tiles模型并进行贴地操作

// 加载3Dtiles数据
const tileset = await Cesium.Cesium3DTileset.fromUrl('http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json');
            
//创建平移矩阵
const translation = Cesium.Cartesian3.fromArray([200,-456,-20]);
let m = Cesium.Matrix4.fromTranslation(translation);

//设置模型矩阵
tileset.modelMatrix = m;

//添加模型
viewer.scene.primitives.add(tileset);
viewer.flyTo(tileset)