前言
参考来源:
-
http://blog.sina.com.cn/s/blog_15e866bbe0102xu2f.html
-
Cesium API:https://cesiumjs.org/refdoc/
基础
server.js
var http = require("http");
var express = require("express");
const path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, '')));
app.listen(4111, () => {
console.log(`App listening at port 4111`)
})
创建三维场景
var viewer = new Cesium.Viewer('cesiumContainer');
绘制图像:Entity
viewer.entities.add({})
制定name,类型(位置及其他参数)
// 设置初始位置
var homePOsition = [110.20, 34.55, 3000000];
// 点
var citizensBankPark = viewer.entities.add({
name : 'Citizens Bank Park',
position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : 'Citizens Bank Park',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
});
viewer.zoomTo(viewer.entities);
// 线
viewer.entities.add({
name: 'Red line on the surface',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([75, 35, 125, 35]),
width: 5,
material: Cesium.Color.RED
}
});
// 多边形
var redPolygon = viewer.entities.add({
name : 'Red polygon on surface',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : Cesium.Color.RED,
height: 100000,
extrudeHeight: 1000000
}
});
// box
viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(homePOsition[0], homePOsition[1], 0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
绘制图像:Primitive
加载倾斜摄影,点云,单体模型,视频数据
// 单体
var entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000
}
});
viewer.trackedEntity = entity;
}