cesium介绍

cesium

Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。

导入

// package.json
"cesium": "1.79.1",
"cesium-navigation-es6": "1.1.7",
"copy-webpack-plugin": "5.1.2",

首先就是使用npm或者yarn安装这两个依赖包，第一个是cesium的js全量包。第二个用于使用es6的语法，第三个是将cesium的静态文件映射到工程文件中。

声明

// main.ts
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css';

这是将cesium中的样式文件导入到项目中。

配置

// vue.config.js
    chainWebpack: config => {
        // 将cesium的资源拷贝至本项目中
        // eslint-disable-next-line @typescript-eslint/no-var-requires
        config.plugin('copy').use(require('copy-webpack-plugin'), [[
            {
                from: path.resolve('node_modules/cesium/Build/Cesium'),
                to: './cesium'
            },
            {
                from: path.resolve('./public'),
                to: './cesium/public'
            }
        ]]);
    },

将cesium的资源拷贝至本项目中，使用模型的时候不会导致出现路径找不到的问题

使用

在需要使用的页面进行配置即可。

初始化

<!--        地球本体-->
<div id="cesiumContainer" class="fullSize"></div>
<div class="mouse-detail">
	<div> 经度：{{ positionDetail.longitude }}</div>
    <div> 纬度：{{ positionDetail.latitude }}</div>
    <div> 高程：{{ positionDetail.altitude }}</div>
    <div> 视高：{{ positionDetail.height }}</div>
</div>

.fullSize {
    width: 100%;
    height: 100%;
}
.mouse-detail {
    position: absolute;
    bottom: 0px;
    left: 5px;
    display: flex;
    color: white;
}

interface positionInfo {
    longitude: string;
    latitude: string;
    altitude: string;
    height: string;
}
import {Viewer} from 'cesium';
 /** 地图容器 */
viewer: Viewer;
/** 鼠标悬浮经纬度信息 */
positionDetail: positionInfo = {
	longitude: '',
    latitude: '',
    altitude: '',
    height: ''
};
mounted() {
	/** 地图初始化 */
	this.mapInit('cesiumContainer');
    //@ts-ignore 去除左下角版权信息图标
    this.viewer._cesiumWidget._creditContainer.style.display = 'none';
    //@ts-ignore 去除右上角小地图图标
    this.viewer._toolbar.style.display = 'none';
    }
  /**
     * 地图初始化
     * @param id 地图容器的id选择器
     */
    mapInit(id) {
        this.viewer = new Viewer(id, {
            animation: false, // 隐藏左下方时间动画控件
            geocoder: false, // 隐藏右上角搜索图标
            homeButton: false, // 隐藏右上角home图标
            sceneModePicker: false, // 隐藏右上角二三维切换图标
            navigationHelpButton: false, //  隐藏右上角帮助图标
            timeline: false, // 是否显示时间线控件
            baseLayerPicker: true, // 是否显示图层选择控件
            infoBox: false,  // 是否显示要素点击提示信息
            selectionIndicator: false, // 是否显示点击实体时的选中图标
            fullscreenButton: false, // 是否显示切换全屏模式的图标
            shouldAnimate: true // 是否开启模型动画
        });
        //  设置地图默认数据源
        this.viewer.baseLayerPicker.viewModel.selectedImagery = this.viewer.baseLayerPicker.viewModel.imageryProviderViewModels[12];
        // 设置显示罗盘
        this.viewer.extend(viewerCesiumNavigationMixin);
        // 背景旋转速度
        this.viewer.clock.multiplier = 200;
        this.viewer.clock.shouldAnimate = true;
        // 更改默认视角
        Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
        const eventHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas);
        // 鼠标移动监听
        eventHandler.setInputAction((movement) => {
            // 捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
            const cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
            if (cartesian) {
                // 将笛卡尔三维坐标转为地图坐标（弧度）
                const cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                // 将地图坐标（弧度）转为十进制的度数
                const longitude = Math.toDegrees(cartographic.longitude).toFixed(6);
                const latitude = Math.toDegrees(cartographic.latitude).toFixed(6);
                const altitude = this.viewer.scene.globe.getHeight(cartographic); // 粗略的
                const strAltitude = altitude ? altitude.toFixed(2) : '0';
                const height = this.viewer.camera.positionCartographic.height.toFixed(2); // 米

                this.positionDetail.longitude = longitude + '\u00B0'; //度
                this.positionDetail.latitude = latitude + '\u00B0'; //度
                this.positionDetail.altitude = strAltitude + '米';
                this.positionDetail.height = height + '米';
            }
        }, ScreenSpaceEventType.MOUSE_MOVE);
    }