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
};
});
});