1、环境搭建npminstall-Scesium(必须加-S参数,否则会出现引用错误)2、导入文件2.1首先将/node_modules/cesium/Build/Cesium文件夹复制到/public/static目录下和下面的buildModuleUrl结合,否则静态文件不会显示(比如图片等)2.2文件介绍importbuildModuleUrlfrom"cesium/Source/Core/buildModuleUrl";import{Viewer}from"cesium/Source/Cesium";import*asCesiumfrom"cesium/Source/Cesium";import"cesium/Source/Widgets/widgets.css";buildModuleUrl.setBaseUrl("static/");上面:1和5是导入buildModuleUrl,设置cesium静态文件路径2导入cesium类使用的核心3是cesium库4是cesium样式文件(一定要参考)3引入一个3D球体this.viewer=newViewer("cesiumContainer",{//数据源集合需要可视化animation:false,//是否显示动画控件shouldAnimate:true,homeButton:true,//是否显示Home按钮fullscreenButton:false,//是否显示全屏按钮baseLayerPicker:false,//是否显示图层选择控件geocoder:false,//是否显示地名搜索控件timeline:false,//是否显示时间轴控件sceneModePicker:false,//是否显示投影模式控件navigationHelpButton:false,//是否显示帮助信息控件infoBox:false,//是否显示点击元素后显示informationrequestRenderMode:true,//启用请求渲染模式scene3DOnly:false,//每个几何实例只会以3D方式渲染以节省GPU内存sceneMode:3,//初始场景模式12D模式22D循环模式33D模式Cesium.SceneModefullscreenElement:document.body,//全屏渲染的HTML元素暂时找不到有用的imageryProvider:newCesium.UrlTemplateImageryProvider({url:"gis2d/terrain/{z}/{x}/{y}.jpg"//地图瓦片})});this.viewer._cesiumWidget._creditContainer.style.display="none";//去除版权信息4.设置相机缩放范围//相机高度的最小值this.viewer.scene.screenSpaceCameraController.minimumZoomDistance=250000;//相机高度的最大值this.viewer.scene.screenSpaceCameraController.maximumZoomDistance=12000000;//设置相机缩小时的速度this.viewer.scene.screenSpaceCameraController._minimumZoomRate=30000;//设置相机放大时的速率this.viewer.scene.screenSpaceCameraController._maximumZoomRate=5906376272000;5.定位this.viewer.camera.setView({//Cesium的坐标以地心为基准,始终指向南美洲,始终指向亚洲,始终指向北极状态//fromDegrees()方法,将纬度、经度和海拔转换为世界坐标destination:Cesium.Cartesian3.fromDegrees(108.78,31.04,9000000)orientation:{//指向航向:Cesium.Math.toRadians(90,0),//视角pitch:Cesium.Math.toRadians(-90),roll:0.0}});6、添加一张中国地图,并划分为五大区域,并以不同颜色显示//使用GeoJsonDataSource加载json格式的数据vargeojsonOptions={clampToGround:true,//必须添加,否则添加实体对象将被阻止覆盖};vardataSource=Cesium.GeoJsonDataSource.load("json/province.json",geojsonOptions);dataSource.then(data=>{this.viewer.dataSources.add(data);varentities=data.entities.values;varcolorHash={};for(vari=0;i
