前端使用cesium加载地球
首先需要安装cesium
npm i cesium -save
需要在node_modules中找到cesium然后把Build下面中的Cesium文件拷到项目中public下面
在项目中引入cesium
window.CESIUM_BASE_URL = '../Cesium';
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
书写dom
<template>
<div id="container" class="box">
<div id="cesiumContainer"></div>
</div>
</template>
加载cesium
init () {
const viewer = new Cesium.Viewer('cesiumContainer',{
shouldAnimate: false,
animation: false, // 是否创建动画小器件,左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: true, // 是否显示3D/2D选择器
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
navigationHelpButton: false, // 是否显示右上角的帮助按钮
scene3DOnly: false, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels:
Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels:
Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
}),
terrainProvider: Cesium.createWorldTerrain(),
fullscreenElement: document.body, // 全屏时渲染的HTML元素,
useDefaultRenderLoop: true, // 如果需要控制渲染循环,则设为true
targetFrameRate: undefined, // 使用默认render loop时的帧率
showRenderLoopErrors: false, // 如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
contextOptions: undefined, // 传递给Scene对象的上下文参数(scene.options)
sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式为三维
mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
dataSources: new Cesium.DataSourceCollection()
// 需要进行可视化的数据源的集合
});
viewer.scene.globe.depthTestAgainstTerrain = false; //开启地形深度检测 解决鼠标指针和点不重合
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
;
viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
}
最后页面中展示的效果如下