1、环境构建
npm install -S cesium (必须加-S参数，否则呈现援用谬误)
2、引入文件
2.1首先将/node_modules/cesium/Build/Cesium 文件夹复制到 /public/static目录下 与下述buildModuleUrl 相结合，否则动态文件不会显示（比方图片等）
2.2文件引入
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";import { Viewer } from "cesium/Source/Cesium";import * as Cesium from "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 = new Viewer("cesiumContainer", { // 须要进行可视化的数据源的汇合 animation: false, //是否显示动画控件 shouldAnimate: true, homeButton: true, //是否显示Home按钮 fullscreenButton: false, //是否显示全屏按钮 baseLayerPicker: false, //是否显示图层抉择控件 geocoder: false, //是否显示地名查找控件 timeline: false, //是否显示工夫线控件 sceneModePicker: false, //是否显示投影形式控件 navigationHelpButton: false, //是否显示帮忙信息控件 infoBox: false, //是否显示点击因素之后显示的信息 requestRenderMode: true, //启用申请渲染模式 scene3DOnly: false, //每个几何实例将只能以3D渲染以节俭GPU内存 sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode fullscreenElement: document.body, //全屏时渲染的HTML元素 临时没发现用途 imageryProvider: new Cesium.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: { // 指向 heading: Cesium.Math.toRadians(90, 0), // 视角 pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); 6、增加中国地图，并以五大战区进行划分，用不同的色彩进行显示
//应用GeoJsonDataSource加载json格局的数据 var dataSource = Cesium.GeoJsonDataSource.load("json/province.json"); dataSource.then(data => { this.viewer.dataSources.add(data); var entities = data.entities.values; var colorHash = {}; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; //通过theater判断属于哪个区块并且附上色彩 var theater = entity.properties._theater._value; var name = entity.name; var color = colorHash[name]; if (!color) { color = theater == "east" ? Cesium.Color.fromCssColorString("rgba(240,221,15,0.5)") : theater == "west" ? Cesium.Color.fromCssColorString("rgba(155,41,143,0.5)") : theater == "north" ? Cesium.Color.fromCssColorString("rgba(0,161,255,0.5)") : theater == "south" ? Cesium.Color.fromCssColorString("rgba(6,64,229,0.5)") : theater == "middle" ? Cesium.Color.fromCssColorString("rgba(42,171,25,0.5)") : Cesium.Color.fromCssColorString("rgba(241,3,24,0.5)"); entity.polygon.material = color; } } });7、增加实体类，显示名称及图标
//申请获取要增加的实体数据 this.$http.get("/json/assetsAll.json", {}).then(res => { res.data.forEach(item => { let labelInfo = this.viewer.entities.add(new Cesium.Entity());//增加实体类 labelInfo.position = Cesium.Cartesian3.fromDegrees(//实体的地位 parseInt(item.X), parseInt(item.Y), -100 ); labelInfo.label = {//实体展现的文字 show: true, showBackground: false,//是否展现背景色 fillColor: Cesium.Color.fromCssColorString("#000"),//设置字体色彩 // backgroundColor: Cesium.Color.fromCssColorString("#000"),//设置字体背景色 scale: 0.5, //这里十分奇妙的先将字体大小放大一倍在放大一倍 font: "normal 28px MicroSoft YaHei", text: item.stationName, pixelOffset: new Cesium.Cartesian2(-40, 25),//偏移量 horizontalOrigin: Cesium.HorizontalOrigin.LEFT }; labelInfo.billboard = {//实体图标 image: item.hasFaultAsset ? require("@/assets/img/location-blue-sm.png") : item.hasTask ? require("@/assets/img/location-red-sm.png") : require("@/assets/img/flag-red-sm.png"), heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }; }); });