视频5751|粉丝0
分享视频地址：
本页面地址：
播放器swf地址：
html地址：Cesium 相机控制场景中的视野。操作相机的方法有很多，如旋转，缩放，平移和飞到目的地。Cesium具有默认的鼠标和触摸事件处理程序与相机进行交互，还有一个API以编程方式操纵相机。
我们可以使用该setView功能设置相机的位置和方向。目的地可以是一个实例Cartesian3或Rectangle，方向可以是航向/俯仰/卷或方向/向上
Cartesian 方式
&div id="cesiumDemo"&&/div&
&script type="text/javascript"&
var view = new Cesium.Viewer('cesiumDemo',{
baseLayerPicker: false,
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: '/ArcGIS/rest/services/World_Street_Map/MapServer'
// Cartesian 方式确定位置
view.camera.setView({
destination :
Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
orientation: {
heading : Cesium.Math.toRadians(20.0), // 方向
pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
Rectangle 方式
// rectangle 方式
view.camera.setView({
destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),
orientation: {
heading : Cesium.Math.toRadians(20.0), // 方向
pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
通过调用Camera这个方法可以跳转镜头到指定位置。具体用法和上面类似.
view.camera.flyTo({
destination :
Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0),
lookAt(target, offect)
名称类型描述
Cartesian3
目标位置在世界坐标。
Cartestian 或 HeadingPitchRange
以目标为中心的当地东北向参考系中的目标的偏移量。
var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0)
lookAt会将视角固定在设置的点上
官网Demo笔记
var viewer = new Cesium.Viewer('cesiumDemo',{
baseLayerPicker: false,
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: '/ArcGIS/rest/services/World_Street_Map/MapServer'
var scene = viewer.
var canvas = viewer.
阅读(...) 评论()Cesium 概述 (二) 空间数据可视化 - CSDN博客
Cesium 概述 (二) 空间数据可视化
& & & & & & & & & & & & & & & & & & & & & & & & & & & 空间数据可视化
Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。
Entity API简介
Cesium提供两类API：
（1）面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识
（2）高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用Primitive API
下面是Entity API的简单例子，用红色半透明区域标记出美国怀俄明州：
var viewer = new Cesium.Viewer('cesiumContainer'); //创建一个查看器（Viewer widget）
var wyoming = viewer.entities.add({
//添加一个实体，仅需要传递一个简单JSON对象，返回值是一个Entity对象
name : 'Wyoming',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([//一组地理坐标
-109..002073,
-104..996596,
-104..002989,
-104..003906,
-105..998429,
-107..003906,
-111..998429,
-111..000709,
-111..476286,
-111.073]),
material : Cesium.Color.RED.withAlpha(0.5), //材质
outline : true, //是否显示轮廓
outlineColor : Cesium.Color.BLACK //轮廓的颜色
viewer.zoomTo(wyoming);//缩放、平移视图使实体可见
形状与立体（Shapes and Volumes）
支持的形状与立体列表
（1）&立方体(Boxes)：
var blueBox = viewer.entities.add({
name : 'Blue box',
//中心的位置
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, ),
dimensions : new Cesium.Cartesian3(, , ),
material : Cesium.Color.BLUE
var redBox = viewer.entities.add({
name : 'Red box with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, ),
dimensions : new Cesium.Cartesian3(, , ),
material : Cesium.Color.RED,
outline : true, //显示轮廓
outlineColor : Cesium.Color.BLACK
var outlineOnly = viewer.entities.add({
name : 'Yellow box outline',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, ),
dimensions : new Cesium.Cartesian3(, , ),
fill : false,
//不显示填充
outline : true,
outlineColor : Cesium.Color.YELLOW
（2）圆和椭圆(Circles&Ellipses)
var viewer = new Cesium.Viewer('cesiumContainer');
//浮空的绿色圆形
var greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, ),
name : 'Green circle at height',
ellipse : {
semiMinorAxis : ,
semiMajorAxis : ,
height: , //浮空
material : Cesium.Color.GREEN
//红色椭圆形，位于地表，带轮廓
var redEllipse = viewer.entities.add({
//不带高度
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
name : 'Red ellipse on surface with outline',
ellipse : {
semiMinorAxis : ,
semiMajorAxis : ,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.RED
//蓝色椭圆柱，旋转了角度
var blueEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, ),
name : 'Blue translucent, rotated, and extruded ellipse',
ellipse : {
semiMinorAxis : ,
semiMajorAxis : ,
extrudedHeight : ,
rotation : Cesium.Math.toRadians(45), //旋转
material : Cesium.Color.BLUE.withAlpha(0.7),
outline : true
viewer.zoomTo(viewer.entities);
(3)走廊(Corridor)
var redCorridor = viewer.entities.add({
name : 'Red corridor on surface with rounded corners and outline',
corridor : {
positions : Cesium.Cartesian3.fromDegreesArray([
-100.0, 40.0,
-105.0, 40.0,
-105.0, 35.0
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.RED
var greenCorridor = viewer.entities.add({
name : 'Green corridor at height with mitered corners',
corridor : {
positions : Cesium.Cartesian3.fromDegreesArray(
-90.0, 40.0,
-95.0, 40.0,
-95.0, 35.0
cornerType: Cesium.CornerType.MITERED,
material : Cesium.Color.GREEN
var blueCorridor = viewer.entities.add({
name : 'Blue extruded corridor with beveled corners and outline',
corridor : {
positions : Cesium.Cartesian3.fromDegreesArray(
80.0, 40.0,
-85.0, 40.0,
-85.0, 35.0
height : ,
extrudedHeight : ,
cornerType: Cesium.CornerType.BEVELED,
material : Cesium.Color.BLUE.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLUE
(4)圆柱和圆锥(Cylinder
var greenCylinder = viewer.entities.add({
name : 'Green cylinder with black outline',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, ),
cylinder : { //圆柱
length : ,
topRadius : ,
bottomRadius : ,
material : Cesium.Color.GREEN,
outline : true,
outlineColor : Cesium.Color.DARK_GREEN
var redCone = viewer.entities.add({
name : 'Red cone',
position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, ),
cylinder : {//圆锥
length : ,
topRadius : 0.0,
bottomRadius : ,
material : Cesium.Color.RED
(5)&多边形(Polygons)
var redPolygon = viewer.entities.add({
name : '贴着地表的多边形',
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
var greenPolygon = viewer.entities.add({
name : '绿色拉伸多边形',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
-100.0, 42.0,
-104.0, 40.0]),
extrudedHeight: ,
material : Cesium.Color.GREEN
var orangePolygon = viewer.entities.add({
name : '每个顶点具有不同拉伸高度的橘色多边形',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(
[-108.0, 25.0, 100000,
-100.0, 25.0, 100000,
-100.0, 30.0, 100000,
-108.0, 30.0, 300000]),
extrudedHeight: 0,
perPositionHeight : true,
material : Cesium.Color.ORANGE,
outline : true,
outlineColor : Cesium.Color.BLACK
var bluePolygon = viewer.entities.add({
name : '具有挖空效果的蓝色多边形',
polygon : {
hierarchy : {
positions : Cesium.Cartesian3.fromDegreesArray(
[-99.0, 30.0,
-85.0, 30.0,
-85.0, 40.0,
-99.0, 40.0]),
holes : [{
positions : Cesium.Cartesian3.fromDegreesArray([
-97.0, 31.0,
-97.0, 39.0,
-87.0, 39.0,
-87.0, 31.0
holes : [{
positions : Cesium.Cartesian3.fromDegreesArray([
-95.0, 33.0,
-89.0, 33.0,
-89.0, 37.0,
-95.0, 37.0
holes : [{
positions : Cesium.Cartesian3.fromDegreesArray([
-93.0, 34.0,
-91.0, 34.0,
-91.0, 36.0,
-93.0, 36.0
material : Cesium.Color.BLUE,
outline : true,
outlineColor : Cesium.Color.BLACK
（6）多段线(Polylines)
var redLine = viewer.entities.add({
name : '沿着地球表面的红线',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(
-125, 35]),
width : 5,
material : Cesium.Color.RED
var glowingLine = viewer.entities.add({
name : '具有发光效果的线',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(
[-75, 37, -125, 37]
width : 10,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.2,
color : Cesium.Color.BLUE
var orangeOutlined = viewer.entities.add({
name : '具有一定高度的线',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-75, 39, 5, 39, 250000]
width : 5,
material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 2,
outlineColor : Cesium.Color.BLACK
var yellowLine = viewer.entities.add({
name : '不贴着地表的线',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-75, 43, 5, 43, 500000]
width : 3,
followSurface : false,
//是否贴着地表
material : Cesium.Color.PURPLE
});（7）多段线体(Polyline
var viewer = new Cesium.Viewer('cesiumContainer');
function computeCircle(radius) {
var positions = [];
for (var i = 0; i & 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(new Cesium.Cartesian2(
radius * Math.cos(radians), radius * Math.sin(radians)));
function computeStar(arms, rOuter, rInner) {
var angle = Math.PI /
var length = 2 *
var positions = new Array(length);
for (var i = 0; i & i++) {
var r = (i % 2) === 0 ? rOuter : rI
positions[i] = new Cesium.Cartesian2(
Math.cos(i * angle) * r, Math.sin(i * angle) * r);
var redTube = viewer.entities.add({
name : 'Red tube with rounded corners',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArray(
[-85.0, 32.0,
-85.0, 36.0,
-89.0, 36.0]),
shape : computeCircle(60000.0),
material : Cesium.Color.RED
var greenBox = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-90.0, 32.0, 0.0,
-90.0, 36.0, ,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(5),
new Cesium.Cartesian2(-5)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN,
outline : true,
outlineColor : Cesium.Color.BLACK
var blueStar = viewer.entities.add({
name : 'Blue star with mitered corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-95.0, 32.0, 0.0,
-95.0, 36.0, ,
-99.0, 36.0, ]),
shape : computeStar(7, 7),
cornerType : Cesium.CornerType.MITERED,
material : Cesium.Color.BLUE,
outline : true,
outlineColor : Cesium.Color.BLACK
viewer.zoomTo(viewer.entities);
（8）矩形(Rectangles)
&strong&//红色矩形
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle with outline',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.RED
//绿色旋转、拉伸的矩形
var greenRectangle = viewer.entities.add({
name : 'Green translucent, rotated, and extruded rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
material : Cesium.Color.GREEN.withAlpha(0.5),
rotation : Cesium.Math.toRadians(45),
extrudedHeight : ,
height : ,
outline : true,
outlineColor : Cesium.Color.GREEN
});&/strong&
（9）球和椭球(Spheres
Ellipsoids)
&pre name=&code& class=&javascript&&var blueEllipsoid = viewer.entities.add({
name : 'Blue ellipsoid',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, ),
ellipsoid : {
//可以指定三个轴的半径
radii : new Cesium.Cartesian3(, , ),
material : Cesium.Color.BLUE
var redSphere = viewer.entities.add({
name : 'Red sphere with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, ),
ellipsoid : {
radii : new Cesium.Cartesian3(, , ),
material : Cesium.Color.RED,
outline : true,
outlineColor : Cesium.Color.BLACK
var outlineOnly = viewer.entities.add({
name : 'Yellow ellipsoid outline',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, ),
ellipsoid : {
radii : new Cesium.Cartesian3(, , ),
fill : false,
outline : true,
outlineColor : Cesium.Color.YELLOW,
slicePartitions : 24, //横向切割线
stackPartitions : 36
//纵向切割线
(10)&墙(Walls)
//东西方向的横墙
var redWall = viewer.entities.add({
name : 'Red wall at height',
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-115.0, 44.0, ,//坐标点
-90.0, 44.0, ]
minimumHeights : [, ], //按坐标点的最小高度数组
material : Cesium.Color.RED
//四边围墙
var greenWall = viewer.entities.add({
name : 'Green wall from surface with outline',
positions : Cesium.Cartesian3.fromDegreesArrayHeights(
[-107.0, 43.0, ,
-97.0, 43.0, ,
-97.0, 40.0, ,
-107.0, 40.0, ,
-107.0, 43.0, ]),
material : Cesium.Color.GREEN,
outline : true,
outlineColor : Cesium.Color.BLACK
//曲折的墙
var blueWall = viewer.entities.add({
name : 'Blue wall with sawtooth heights and outline',
//坐标点，不指定高度
positions : Cesium.Cartesian3.fromDegreesArray(
[-115.0, 50.0,
-112.5, 50.0,
-110.0, 50.0,
-107.5, 50.0,
-105.0, 50.0,
-102.5, 50.0,
-100.0, 50.0,
-97.5, 50.0,
-95.0, 50.0,
-92.5, 50.0,
-90.0, 50.0]),
maximumHeights : [ //上高
minimumHeights : [
0, 100000,
material : Cesium.Color.BLUE,
outline : true,
outlineColor : Cesium.Color.BLACK
材质（Material）与轮廓（Outline）
多数形状均支持通过一致的方式来设置属性、控制外观：
（1）fill：布尔型，用于指定目标形状是否被填充
（2）outline：布尔型，用于指定是否绘制形状的边缘
（3）material：如果fill为true，该属性可以控制填充的材质类型
一个例外是多段线，可以设置outlineWidth 、outlineColor、glowPower 等属性。
高度与拉伸（Extrusion）
所有的形状均默认均是沿着地表的，目前圆形、椭圆、矩形可以在一定高度浮空显示，或者拉伸为Volume。
需要注意：Cesium总是使用米、弧度、秒为度量单位。下面是一个例子：
wyoming.polygon.height = 200000;
//设置高度
wyoming.polygon.extrudedHeight = 250000; //设置拉伸高度
在Viewer中可用的Entity特性
除非显式禁用，点击实体后会显示SelectionIndicator小器件，以及一个信息框。通过设置Entity.description，可以在信息框中显示任何HTML内容。
zoomTo方法可以立即定位到某个位置，而flyTo则是通过动画方式转移到某个位置，这两个方法均可以传递EntityCollection对象，并且均是异步方法，返回一个Promises对象
默认情况下，镜头是朝北、45度倾斜查看地球。下面的代码可以让镜头朝东、倾斜三十度查看：
//镜头顺时针旋转九十度，即东向
var heading = Cesium.Math.toRadians(90);
//镜头倾斜30度俯视
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch)).then(function(result){
//执行完毕后，进行的动作
if (result) { //如果镜头切换成功，则result=true
viewer.selectedEntity =
有时需要镜头跟踪某个实体（使居中）而不是地球，可以使用如下代码：
wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity =
//跟踪某个实体。如果调用zoomTo、flyTo自动取消跟踪
管理Entity
EntityCollection对象是一个从Entity Id到Entity的关联数组，其提供例如add、remove、removeAll之类的常规函数，用于添加或者删除某个Entity：
//添加一个实体，并且提供ID
viewer.entities.add({
id : '182bdba4-2b3e-47ae-bf0b-83f6fde285fd'
//获取一个实体
var entity = viewer.entities.getById('uniqueId')
//获取一个实体，如果不存在则创建之
var entity = viewer.entities.getOrCreateEntity('uniqueId');
//当添加、删除、修改EntityCollection中的Entity时，可以获得事件通知
function onChanged(collection, added, removed, changed){
//add、removed、changed是增删改的Entity数组
for(var i = 0; i & added. i++) {
viewer.entities.collectionChanged.addEventListener(onChanged);
//大批量操作时，临时禁用事件可以提高性能
viewer.entities.suspendEvents();
//执行各种Entity操作
viewer.entities.resumeEvents();
点、图标和标签
添加一个点、标签或者图标很简单：
var viewer = new Cesium.Viewer( 'cesiumContainer' );
var citizensBankPark = viewer.entities.add( {
name : 'Citizens Bank Park',
position : Cesium.Cartesian3.fromDegrees( -75..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 )
billboard : { //图标
image : 'http://localhost:81/images//Philadelphia_Phillies.png',
width : 64,
height : 64
viewer.zoomTo( viewer.entities );
Cesium支持glTF格式的3D模型，glTF是WebGL、&OpenGL ES、 OpenGL的一种运行时模型格式，在Cesium中创建3D模型很简单：
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123..0503706),
uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
scale : 1,//和原始大小相比的缩放比例
minimumPixelSize :100 //最小尺寸，防止太小而看不见
viewer.trackedEntity =
默认情况下，模型竖直放置、并且面向东面。可以指定四元组（Quaternion）给Entity.orientation属性，以改变放置的方向：
var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123..0503706); //位置
var heading = Cesium.Math.toRadians(45.0);//绕垂直于地心的轴旋转
var pitch = Cesium.Math.toRadians(15.0);
//绕纬度线旋转
var roll = Cesium.Math.toRadians(0.0);
//绕经度线旋转
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
position : position,
orientation : orientation,
uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
viewer.trackedEntity =例子中的heading（yaw）、pitch、roll对应了绕Z（垂直轴）、Y（维度方向）、X（经度方向）进行旋转，正数表示顺时针旋转（由于相对运动，在浏览器上看起来是地球在逆时针旋转），可以参考下图理解（人面向北面，摇头heading、点头pitch、歪头roll）：
& & & & & & & & & & & & & &&
Cesium提供了一些快捷方式来设置属性，例如outline:true，但是尝试使用e.polygon.outline这样的形式来获取轮廓时，会得到一个ConstantProperty对象，如果不使用快捷方式，则需要编写更多的代码，例如：
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
所有属性的实例均是Property的子类型，引入属性类层次而不是使用基本类型的原因是，某些属性是随着时间而变化的。
要得到属性的原始值，需要调用Property.getValue()方法，例如：
//获取当前时间点，多边形轮廓是否存在
polygon.outline.getValue(viewer.clock.currentTime)
本文已收录于以下专栏：
相关文章推荐
一、一个文件夹下查询获取多种后缀的文件
/// 读取文件夹
public void ReadFolde...
Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。
WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来...
如何让地图变得更有吸引力
　　制图员在编制地图和构建页面布局时，会应用到许多设计原则。其中，有五个主要的设计原则：易读性、视觉对比、图形背景组织、层次组织和平衡。综合这些原则形成一个系统，有助于观...
Cesium提供了以下默认鼠标行为：
（1）单击并拖拽球体：旋转地球，镜头俯角不变
（2）单击并拖拽空间：滚动roll、俯仰pitch镜头
（3）右击并拖拽、中键滚动：缩放镜...
Cesium中提供了三维模型加载API，但是很显然一般三维场景的模型成千上万，如果单纯采用默认的三维模型加载方案会出现浏览器吃不消致使崩溃或者高延迟低帧率等影响正常可视化交互的问题。诚然官方团队已经开...
摘要: cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系。
cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系。我们平时常用的以经纬度来指明一个地点就是...
GitHub在前端用到的一系列工具基本上都是开源的。现简单地整理如下。
1. HTML / CSS / JavaScript
1.1. HTML模板
GitHub的标记 & 模板风格...
一. Git介绍
1.分布式 : Git版本控制系统是一个分布式的系统, 是用来保存工程源代码历史状态的命令行工具;
2.保存点 : Git的保存点可以追踪源码中的文件, 并能得到某一个时...
他的最新文章
讲师：何宇健
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)javascript（8）
cesium（9）
webgis（8）
首先先说一下，这个Demo是沙盒里面的，所以如果你想在本地运行的话需要改一下html
这里是html
&!DOCTYPE html&
lang="en"&
charset="utf-8"&
http-equiv="X-UA-Compatible" content="IE=edge"&
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&
&Hello World!&
src="../Build/Cesium/Cesium.js"&&
src="../Apps/Sandcastle/Sandcastle-header.js"&&
rel="stylesheet" href="Sandcastle/templates/bucket.css"&
@import url(../Build/Cesium/Widgets/widgets.css);
id="cesiumContainer" class="fullSize"&&
id="toolbar"&
class="infoPanel"&
&Click on the 3D window then use the keyboard to change settings.&
id="heading"&&°&
&← to left/→ to right&
id="pitch"&&°&
&↑ to up/↓ to down&
id="roll"&&°&
&← + ? left/→ + ? right&
id="speed"&&m/s&
&↑ + ? to speed up/↓ + ? to speed down&
&following aircraft
id="fromBehind" type="checkbox"&
src="你的js文件"&&
这是js代码
var canvas = viewer.
canvas.setAttribute('tabindex', '0');
canvas.addEventListener('click', function() {
canvas.focus();
canvas.focus();
var pathPosition = new Cesium.SampledPositionProperty();
var entityPath = viewer.entities.add({
position : pathPosition,
name : 'path',
show : true,
leadTime : 0,
trailTime : 60,
width : 10,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
color : Cesium.Color.PALEGOLDENROD
var camera = viewer.
var controller = scene.screenSpaceCameraC
var r = 0;
var center = new Cesium.Cartesian3();
var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var speed = 10;
var deltaRadians = Cesium.Math.toRadians(3.0);
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
var speedVector = new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
url : '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
minimumPixelSize : 128
planePrimitive.readyPromise.then(function(model) {
model.activeAnimations.addAll({
speedup : 0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
hpRange.heading =
hpRange.pitch =
hpRange.range = r * 50.0;
camera.lookAt(center, hpRange);
document.addEventListener('keydown', function(e) {
switch (e.keyCode) {
if (e.shiftKey) {
speed = Math.max(--speed, 1);
hpRoll.pitch -= deltaR
if (hpRoll.pitch & -Cesium.Math.TWO_PI) {
hpRoll.pitch += Cesium.Math.TWO_PI;
if (e.shiftKey) {
speed = Math.min(++speed, 100);
hpRoll.pitch += deltaR
if (hpRoll.pitch & Cesium.Math.TWO_PI) {
hpRoll.pitch -= Cesium.Math.TWO_PI;
if (e.shiftKey) {
hpRoll.roll += deltaR
if (hpRoll.roll & Cesium.Math.TWO_PI) {
hpRoll.roll -= Cesium.Math.TWO_PI;
hpRoll.heading += deltaR
if (hpRoll.heading & Cesium.Math.TWO_PI) {
hpRoll.heading -= Cesium.Math.TWO_PI;
if (e.shiftKey) {
hpRoll.roll -= deltaR
if (hpRoll.roll & 0.0) {
hpRoll.roll += Cesium.Math.TWO_PI;
hpRoll.heading -= deltaR
if (hpRoll.heading & 0.0) {
hpRoll.heading += Cesium.Math.TWO_PI;
var headingSpan = document.getElementById('heading');
var pitchSpan = document.getElementById('pitch');
var rollSpan = document.getElementById('roll');
var speedSpan = document.getElementById('speed');
var fromBehind = document.getElementById('fromBehind');
viewer.scene.preRender.addEventListener(function(scene, time) {
headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
speedSpan.innerHTML = speed.toFixed(1);
speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
pathPosition.addSample(Cesium.JulianDate.now(), position);
Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, planePrimitive.modelMatrix);
if (fromBehind.checked) {
Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, planePrimitive.boundingSphere.center, center);
hpRange.heading = hpRoll.
hpRange.pitch = hpRoll.
camera.lookAt(center, hpRange);
如上就是这个Demo的源码了，具体运行我就不展示了（csdn上传不了这么大的gif），还是很有趣的
我觉得注释已经很详细了，就不多说了，不清楚或者发现错误的请留言，大家一起学习
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12033次
排名：千里之外
原创：23篇
(4)(14)(2)(2)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}