mars3D引用模型库以及图标配置

一、icon

引入基本场景后 还差几个样式引入

mars3D图标用的 https://fontawesome.dashgame.com/

引入对应的

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

现在图标有了

还有mars3D的样式排版 也可以从远端下载下本地引入 更稳妥一点

<link rel="stylesheet" href="http://mars3d.cn/temp/css/style.css">

效果图

二、加载mars3d的模型库

列表json数据地址

data.mars3d.cn/gltf/list.json

加载后放置在页面上

配合 mapWork.startDrawModel(style)方法 进行绘制模型

// 绘制模型
const showModel = (style: any) => {
  mapWork.startDrawModel(style);
};

搭配style属性进行修改模型的详细属性

三、开场动画

搭配openFlyAnimation方法设置对应属性实现动画效果

export function startAnimation() {
    map.flyHome({ duration: 0 })
    // 开场动画
    map.openFlyAnimation({
        // duration1:4,
        // easingFunction1: Cesium.EasingFunction.QUINTIC_IN_OUT,
        callback: function () {
            // 动画播放完成后回调
        }
    })
}
=========================
const startAnimation = () => {
  mapWork.startAnimation();
};

四、暂停动画

// 暂停动画
export function stopAnimation() {
    map.camera.cancelFlight()
}

五、清空场景模型

//清空
export function deleteAll() {
    graphicLayer.clear()
}

六、导出为json

// 保存文件
export function saveGeoJSON() {
    if (graphicLayer.length === 0) {
        // globalMsg("当前没有标注任何数据，无需保存！")
        ElMessage({
            message: '当前没有标注任何数据，无需保存！',
            type: 'warning',
        })
        return
    }
    const geojson = graphicLayer.toGeoJSON()
    mars3d.Util.downloadFile("模型标绘.json", JSON.stringify(geojson))
}

七、导入json

export function openGeoJSON(file) {
    const fileName = file.name
    const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()

    if (fileType === "json" || fileType === "geojson") {
        const reader = new FileReader()
        reader.readAsText(file, "UTF-8")
        reader.onloadend = function (e) {
            const json = this.result
            graphicLayer.loadGeoJSON(json, {
                flyTo: true
            })
        }
    } else if (fileType === "glb" || fileType === "gltf") {
        graphicLayer.clear()
        const reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onloadend = function (e) {
            const arrayBuffer = this.result
            const graphic = new mars3d.graphic.ModelPrimitive({
                position: [117.221674, 31.823752, 34.7],
                style: {
                    url: new Uint8Array(arrayBuffer),
                    scale: 1,
                    minimumPixelSize: 50
                },
                hasEdit: false
            })
            graphicLayer.addGraphic(graphic)

            graphic.flyTo({ radius: 1000 })
        }
    } else {
        globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
    }
}