记录超图SuperMap Iclient3D for Cesium初使用

公司要做三维项目，以前没有接触过，记录一下自己学习的这几天。

一、创建vue项目

二、从超图官网下载SuperMap iClient3D for Cesium离线包，我下载的是这个

三、将离线包里的Cesium文件夹放在项目的public文件夹下面

四、在index.html里引入cesium.js和css

五、在页面中进行开发，首先需要创建地图容器，并在mounted（）调用初始化地图的方法。其中我使用的是天地图图层作为底图，需要去天地图官网申请token。

<template>
    <div class="home">
        <div id="cesiumContainer"></div> //地图容器
    </div>
</template>

<script>
// @ is an alias to /src

export default {
    name: "HomeView",
    components: {},
    data() {
        return {};
    },
    mounted() {
        // eslint-disable-next-line no-undef
        this.initMap();
    },
    methods: {
        initMap() {
            /* eslint-disable */
            var viewer = new Cesium.Viewer("cesiumContainer");
            viewer.imageryLayers.addImageryProvider(
                new Cesium.TiandituImageryProvider({
                    credit: new Cesium.Credit(
                        "天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局"
                    ),
                    token: "xxx",
                })
            );
            var imageryLayers = viewer.imageryLayers;
            //初始化天地图全球中文注记服务，并添加至影像图层
            var labelImagery = new Cesium.TiandituImageryProvider({
                mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
                token: "xxx",
            });

            imageryLayers.addImageryProvider(labelImagery);
            //相机视角
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    118.21692,
                    37.19481,
                    800
                ), //fromDegrees将经纬度坐标转换为笛卡尔
            });

        },

    },
};
</script>
<style>
#cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
}
</style>