一、概述
套用官网的介绍，CesiumJS是一个开放源代码JavaScript库，用于创建具有最佳性能，精度，视觉质量和易用性的世界一流的3D地球和地图。
其实，就是数据可视化，Cesium支持2D、3D地图地形渲染，它也提供了可以托管3D切片内容的云平台，开发者可以自定义自己的3D数据模型数据上传到该平台来使用渲染。
二、使用
- 去到官网
QQ截图20200529104507.jpg
- 下载资源
QQ截图20200529104650.jpg
- 资源目录
QQ截图20200529105228.jpg
三、简单代码使用
- 引入资源
我的项目使用了vue框架，所以在index.html引入js文件，页面layer.vue中使用inport引入css样式文件
// index.html
<script src="./static/gispage/Source/Cesium.js"></script>
// layer.vue
import "./utils/widgets.css"
layer.vue页面添加一个div id为cesiumContainer
<div id="cesiumContainer"></div>
- js代码也只需要一行就可以初始化一个地图
this.viewer = new Cesium.Viewer('cesiumContainer');
运行项目，就可以看到一个地球呈现
QQ截图20200529112447.jpg
- 接下来就可以修改参数来呈现自己需要的效果了
this.viewer = new Cesium.Viewer('cesiumContainer', {
timeline : false, // 是否显示时间轴
scene3DOnly : true, // 设置为true时，将仅以3D渲染每个几何体实例以节省GPU内存。
animation : false, // 是否创建动画小器件，左下角仪表
homeButton : false, // 是否显示Home按钮
geocoder : false, // 是否显示geocoder小器件，右上角查询按钮
navigationHelpButton : false, // 是否显示右上角的帮助按钮
infoBox : false, // 是否显示信息框
fullscreenButton : false, // 是否显示全屏按钮
selectionIndicator : false, // 是否显示选取指示器组件
sceneMode : Cesium.SceneMode.SCENE3D, // 初始场景模式
baseLayerPicker : false, // 是否显示图层选择器
imageryProvider : new Cesium.UrlTemplateImageryProvider({
url : 'https://yoururl/{z}/{x}/{y}.png', // 加载基础图层
proxy : new Cesium.DefaultProxy('/proxy/')
}),//图像图层提供者，仅baseLayerPicker设为false有意义
});
/**
* 设置镜头视角， 定位经纬度（113.2,23.1） 高度为2千公里
* heading、pitch和roll就是镜头相对于xyz轴的角度
* 以下参数为向下俯视地球
*/
this.viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(113.36824706049,23.127818196783, 2000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}
});
呈现出来的地图就是这样的效果，如果你设置了自己的底图服务，也就是设置了 imageryProvider 参数，就可以看到自己的发布的底图啦
QQ截图20200529113808.jpg
三、图层叠加
addCesiumLayer(){
/**
* 叠加图层 wms图层
*/
this.wms = new Cesium.WebMapServiceImageryProvider({
url: '你的服务地址', // 服务地址
layers : '服务上的图层名称', // 图层名称
proxy : new Cesium.DefaultProxy("/proxy/"), // 跨域代理
parameters : {
CQL_FILTER : "COVERTYPE='室外'", // 图层过滤条件
STYLES : "lte_enodeb_cell_gd_app", // 图层样式
service : 'WMS',
FORMAT : 'image/png', // 图片格式
TRANSPARENT : true // 设置图层背景透明，不设置默认背景为白色
},
tileWidth : 256, // 图层切片的宽度
tileHeight : 256 // 图层切片的高度
});
// this.viewer.imageryLayers.addImageryProvider(this.wms);
// addImageryProvider其实就等同于下面两行代码
this.baseLayer = new Cesium.ImageryLayer(this.wms);
this.viewer.imageryLayers.add(this.baseLayer);
},
可以看到自己添加的图层
微信截图_20200529115224.png
四、图层点击
bindClick(){
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction((e) => {
// 从相机位置到世界坐标中windowPosition处的像素创建光线
var ray = this.viewer.camera.getPickRay(e.position);
// 3D笛卡尔点
var cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
if(cartesian){
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if(cartographic){
var xy = new Cesium.Cartesian2(); // 2D笛卡尔点
// 相机的高度
var cameraHeight = this.viewer.camera.positionCartographic.height;
// 获取当前图层的层级处于哪一级
var level = getLevel(cameraHeight);
// 是否准备就绪
if(this.wms.ready){
// 计算该图块位置的x、y坐标
xy = this.wms.tilingScheme.positionToTileXY(cartographic, level, xy);
var promise = this.wms.pickFeatures(xy.x,xy.y,level,cartographic.longitude,cartographic.latitude);
Cesium.when(promise, function (result) {
// 这个就是当前点击图层的数据
console.log(result[0].properties);
})
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
// 事件也可以移除
unbindClick(){
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 鼠标事件
Cesium.ScreenSpaceEventType.LEFT_CLICK // 左键单击
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK // 双击
Cesium.ScreenSpaceEventType.LEFT_DOWN // 左键按下
Cesium.ScreenSpaceEventType.LEFT_UP // 左键抬起
Cesium.ScreenSpaceEventType.MIDDLE_CLICK // 中键单击
Cesium.ScreenSpaceEventType.MIDDLE_DOWN // 中键按下
Cesium.ScreenSpaceEventType.MIDDLE_UP // 中键抬起
Cesium.ScreenSpaceEventType.MOUSE_MOVE // 移动
Cesium.ScreenSpaceEventType.PINCH_END // 两指事件在触摸面上的结束
Cesium.ScreenSpaceEventType.PINCH_MOVE // 两指移动
Cesium.ScreenSpaceEventType.PINCH_START // 两指开始
Cesium.ScreenSpaceEventType.RIGHT_CLICK // 右键单击
Cesium.ScreenSpaceEventType.RIGHT_DOWN // 右键按下
Cesium.ScreenSpaceEventType.RIGHT_UP // 右键抬起
Cesium.ScreenSpaceEventType.WHEEL // 滚轮
// 获取底图层级
let getLevel = (height) => {
if (height > 48000000) {
return 0;
} else if (height > 24000000) {
return 1;
} else if (height > 12000000) {
return 2;
} else if (height > 6000000) {
return 3;
} else if (height > 3000000) {
return 4;
} else if (height > 1500000) {
return 5;
} else if (height > 750000) {
return 6;
} else if (height > 375000) {
return 7;
} else if (height > 187500) {
return 8;
} else if (height > 93750) {
return 9;
} else if (height > 46875) {
return 10;
} else if (height > 23437.5) {
return 11;
} else if (height > 11718.75) {
return 12;
} else if (height > 5859.38) {
return 13;
} else if (height > 2929.69) {
return 14;
} else if (height > 1464.84) {
return 15;
} else if (height > 732.42) {
return 16;
} else if (height > 366.21) {
return 17;
} else {
return 18;
}
}
五、坐标系及其之间的转换
平面坐标（屏幕坐标）
var position = { x: 113, y: 45 }
// 也可以
var position = new Cesium.Cartesian2(113, 45)
// 也可以通过点击地图，获取坐标为e.position
平面坐标转三维坐标（笛卡尔空间直角坐标系）
var pick = this.viewer.camera.getPickRay(position)
var cartesian3 = this.viewer.scene.globe.pick(pick, this.viewer.scene);
三维坐标转地理坐标（WGS84）
var dl = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3)
地理坐标转经纬度
var point = {
x: dl.longitude / Math.PI * 180,
y: dl.latitude / Math.PI * 180
}
经纬度转地理坐标(弧度坐标系Cartographic)
var cartographic = Cesium.Cartographic.fromDegrees(point.x,point.y)
Cesium入门几天，还是有点收获，期间虽然遇到很多问题，还是写下来啦！欢迎指正。
