CesiumJS是一个基于javascript的浏览器器3d地图引擎
下载 https://cesiumjs.org/downloads/
下载的Cesium-1.56.1，解压后的结构为
1.设置Web服务器
为了运行Cesium的应用，需要一个本地Web服务器的主机文件
下载安装所需要的模块
npm install
启动Web服务器
node server.js
注：
node server.js --port -- public 192.168.1.100
2.helloworld
新建html页面并引用Cesium.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: %; height: %; margin: ; padding: ; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
cesiumContainer为html中的地图显示div的id
用浏览器打开 http://localhost:8080//Apps/HelloWorld.html
3.基本知识
（1）Viewer
Cesium的核心
可以在调用的时候添加参数，设置了地图浏览中某个控件是否显示
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: true, //是否显示动画控件(左下方那个)
baseLayerPicker: true, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: true, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
});
baseLayerPicker——设置图层选择空间是否可见，如果设置不可见，则需要设置自定义图层作为默认图层。设置可见之后也可以更改其中的图层为自定义图层
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, //是否显示动画控件(左下方那个)
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true, //是否显示点击要素之后显示的信息
});
//// 去除左下角的logo
viewer._cesiumWidget._creditContainer.style.display="none";
定义初始化时的镜头、视角
将镜头定位在济南，经纬度为（117.13, 36.68）的地方，高度为1万公里，下面的heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000000),
orientation: {
heading : Cesium.Math.toRadians(),
pitch : Cesium.Math.toRadians(-),
roll : Cesium.Math.toRadians()
}
});
（2）图层
分类：
普通图层，包含影像、线划等普通显示图层；
地形图层，用于真实的模拟地球表面的场景
在基本图层上添加一个图层
A.imageryLayers直接添加
在影像的基础上叠加天地图注记层，高度为10公里
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, ),
orientation: {
heading : Cesium.Math.toRadians(),
pitch : Cesium.Math.toRadians(-),
roll : Cesium.Math.toRadians()
}
});
//加载影像注记
var layer1= new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t7.tianditu.gov.cn/cia_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',
layer:'cia',
style:'default',
tileMatrixSetID:'w',
format:'tiles',
subdomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
maximumLevel:
});
viewer.imageryLayers.addImageryProvider(layer1);
B.scene的imageryLayers
var my_layer = viewer.scene.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url : 'http://{s}.tianditu.gov.cn/img_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',
credit : '@123.',
subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
maximumLevel :
})
);
图层对象：
UrlTemplateImageryProvider
WebMapTileServiceImageryProvider
createTileMapServiceImageryProvider
SingleTileImageryProvider
eg:
Esri ArcGIS 在线服务图层
var layerProvider = new Cesium.WebMapTileServiceImageryProvider({
url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: layerProvider
});
（3）默认图层设置
可以设置baseLayerPicker为false或true来控制图层选择控件是否可见
当设置为false的时候可以在创建viewer时添加一项来设置默认显示的底图，否则仍然显示微软的默认影像
var viewer = new Cesium.Viewer('cesiumContainer',{
baseLayerPicker: false, //是否显示图层选择控件
imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
url: "http://t7.tianditu.gov.cn/vec_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5",
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
})
});
（4）坐标
坐标系
屏幕坐标系——二维
三维空间坐标
new Cesium.Cartesian2(,) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系）
new Cesium.Cartesian3(,,) //表示一个三维笛卡尔坐标系，也是直角坐标系(就是真实世界的坐标系)
二维到三维
var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) //其中pt1为一个二维屏幕坐标。
三维到地理坐标
var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一个Cesium.Cartesian3对象。
地理坐标到经纬度
var point1=[geoPt1.longitude / Math.PI * ,geoPt1.latitude / Math.PI * ]; //其中geoPt1是一个地理坐标。
经纬度转地理坐标
var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米
经纬度转三维
var cartesian = Cesium.Cartesian3.fromDegree(point)
计算距离（三维）
var d = Cesium.Cartesian3.distance(
new Cesium.Cartesian3(pick1.x, pick1.y, pick1.z),
new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z)
); //pick1、pick3都是三维坐标系
（5）加载3D对象（Entity）
通过Cesium将一个三维模型加载到地球中
A.直接添加
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : { uri : '../Apps/SampleData/models/ShadowTester/Shadow_Tester.gltf' }
});
viewer.trackedEntity = entity; // 镜头追踪，将镜头固定在对象上
B.添加primitives
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0745725, 44.0503706));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url: '../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
//以下这些信息也均可在entity中设置
color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),//模型颜色，透明度
silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),//轮廓线
colorBlendMode : Cesium.ColorBlendMode.MIX,//模型样式['Highlight', 'Replace', 'Mix']
modelMatrix: modelMatrix,
minimumPixelSize : , // 最小的缩放尺寸，256个像素，就是一个瓦片的尺寸。
maxiumScale: // 最大的缩放倍数
}));
//添加动画
Cesium.when(model.readyPromise).then(function (model) {
model.activeAnimations.addAll({
loop: Cesium.ModelAnimationLoop.REPEAT,//控制重复
speedup: 0.5, // 速度，相对于clock
reverse: true // 动画反转
})
});
（6）加载矢量数据
当然数据量特别大的时候就需要考虑矢量瓦片
先读取矢量瓦片而后转换成GeoJson进行加载
A.GeoJson是较为通用的一种网络矢量数据传输方案
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson', {
stroke: Cesium.Color.BLUE.withAlpha(0.8),
strokeWidth: 2.3,
fill: Cesium.Color.RED.withAlpha(0.3),
clampToGround : true
}
));
Cesium.GeoJsonDataSource.load函数即为加载geojson数据，并配置相关属性。
通过这种方式就可将数据加载到三维地球中，并设置边线以及填充等，clampToGround用于设置对象是否贴着地形，如为true则对象会随地势起伏而变化。
Cesium.Math.setRandomNumberSeed();
var promise = Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson'); // load完之后即为一个promise对象
promise.then(function(dataSource) { // 此处类似于添加3D对象中的动画。
viewer.dataSources.add(dataSource); // 先添加对象
var entities = dataSource.entities.values; // 获取所有对象
var colorHash = {};
for (var i = ; i < entities.length; i++) { // 逐一遍历循环
var entity = entities[i];
var name = entity.properties.GB1999; // 取出GB1999属性内容
var color = colorHash[name]; // 如果GB1999属性相同，则赋同一个颜色。
if (!color) {
color = Cesium.Color.fromRandom({
alpha : 1.0
});
colorHash[name] = color;
}
entity.polygon.material = color; // 设置polygon对象的填充颜色
entity.polygon.outline = false; // polygon边线显示与否
entity.polygon.extrudedHeight = entity.properties.POPU * ; // 根据POPU属性设置polygon的高度
}
});
viewer.zoomTo(promise);
先load数据，而后逐一设置load后数据的entity
B.KML是Google Earth定义的一种矢量数据组织方式
var promise = Cesium.KmlDataSource.load('SampleData/kml/eiffel-tower-flyto.kml');
使用
dataSource = new Cesium.KmlDataSource();
var kmz = '../Specs/Data/KML/multilevel.kmz';
var promise = dataSource.load(kmz);
promise.then(function(dataSource) { // 此处类似于添加3D对象中的动画。
viewer.dataSources.add(dataSource); // 先添加对象
});
viewer.zoomTo(promise);
c.CZML
CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。
dataSource = new Cesium.CzmlDataSource();
var czml = 'SampleData/ClampToGround.czml';
dataSource.load(czml); viewer.dataSources.add(dataSource);
使用
Cesium.Math.setRandomNumberSeed();
dataSource = new Cesium.CzmlDataSource();
var czml = 'SampleData/ClampToGround.czml';
var promise = dataSource.load(czml);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
});
viewer.zoomTo(promise);
（7）加载3D Tile
3D瓦片可以显示建筑物、地标乃至森林广告牌等等以及其对应的属性信息。
每个3D瓦片就是一个3D对象，具体的数据范围等等信息在tileset.json中定义。
var tileSet = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
// 同样url只定义编号前面的部分，具体的编号（数字或者非数字都有可能）在此URL下的tileset.json文件中定义，包括此3d瓦片图层的范围等等。
url:'SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json'
}));
tileSet.readyPromise.then(function (tileset) {
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(, -0.5, ));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});
