Cesium

笔记

Posted by zhangyingji on December 10, 2018

前言

参考来源:

  1. http://blog.sina.com.cn/s/blog_15e866bbe0102xu2f.html

  2. 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;
}