Cesium基本介绍

初始化地球

const viewer = new Cesium.Viewer('')

Viewer 查看器类

定义的同时需要设定基础部件、图层等的初始化状态

new Cesium.Viewer(cesiumContainer(指定地图主窗口DIV的id),option(可选设置参数))

常见的option

animation:true // 动画小部件提供播放、暂停和反转按钮，以及当前时间和日期，周围有一个“穿梭环”，用于控制动画的速度
timeline: true //时间轴是用于显示和控制当前场景时间的小部件

viewer.imgerLaters == viwer.scene.imgerLaters

Scene 场景类

可以对整个场景环境进行修改

可以通过Scene控制相机对场景进行切换，如：

viewer.scene.camera.setView({destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地
})

相机的使用

setView 通过定义相机飞行目的地的三维坐标和视线方向

viewer.camera.setView({destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地//设定相机视口方向orientation:{heading:Cesium.Math.toRadians(0)//航向，控制视口方向的水平旋转，也就是沿着负z轴旋转pitch:Cesium.Math.toRadians(-90)//俯仰，控制视口的上下旋转，即沿负y轴进行旋转,这里表示俯瞰地面roll:0    //滚动，围绕正x轴的旋转，数值为0 表示不翻转}
})

flyTo 具有空中飞行和逐步切换视域的效果

viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地orientation:{heading:Cesium.Math.toRadians(0)pitch:Cesium.Math.toRadians(-90)roll:0      },duration:5
})

lookAt()一般用于锁定某个场景的视角

const center = Cesium.Cartesian3.fromDegress(116.39,39.91);
const heading = Cesium.Math.toRadians(50);
const pitch = Cesium.Math.toRadians(-90);
const range = 2500;
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

viewBoundingSphere 可以给一个指定的目标点，让我们可以从多个角度更好的观测

Entity 实体类

提供了用于构建复杂的、时间动态可视化的结构、与静态数据自然的结合在一起

const entity = viewer.entities.add({position:Cesium.Cartesian3.fromDegress(116.39,39.91,400),point:{pixelSize: 100,color: new Cesium.Color(0,1,0,1)//绿色的点}
})

坐标转换

参考

经纬度坐标转为世界坐标

Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)

世界坐标转为经纬度

Cesium.Cartographic.fromCartesian(cartesian, ellipsoid, result);var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian3 = new Cesium.cartesian3(x,y,z);
var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
var lat = Cesium.Math.toDegrees(cartograhphic.latitude);
var lng = Cesium.Math.toDegrees(cartograhpinc.longitude);
var alt = cartographic.height;

屏幕坐标和世界坐标互相转换

//世界坐标转为屏幕坐标
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position, result) //屏幕坐标转为世界坐标1. 屏幕坐标转 场景坐标，场景坐标是包含了地形、倾斜、模型的坐标。var cartesian3= viewer.scene.pickPosition(Cartesian2)，2. 屏幕坐标转 地表坐标，地球表面的坐标，包含地形，不包括模型、倾斜摄影表面。var pick1= new Cesium.Cartesian2(0,0);var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick1),viewer.scene);   3. 屏幕坐标转 椭球面坐标，椭球面坐标是参考椭球的坐标，不包含地形、模型、倾斜摄影表面。var cartesian3= viewer.scene.camera.pickEllipsoid(Cartesian2)

弧度和经纬度

//经纬度转弧度：
Cesium.CesiumMath.toRadians(degrees)
//弧度转经纬度：
Cesium.CesiumMath.toDegrees(radians)

屏幕坐标转为经纬度坐标(先转世界坐标，世界坐标再转经纬度)

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {var pick = movement.position;var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);var ellipsoid = viewer.scene.globe.ellipsoid;var cartographic = ellipsoid.cartesianToCartographic(cartesian);var lat = Cesium.Math.toDegrees(cartographic.latitude);var lon = Cesium.Math.toDegrees(cartographic.longitude);var alt = cartographic.height;console.log('经度：' + lon + '\n纬度：' + lat + '\n高度：' + alt);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

DataSourceCollection 数据源集合类

主要用于加载数据

主要有三种调用方法 CzmlDataSource、KmlDataSource、GeoJsonDataSource

//将任意数据转换为EntityCollection
viewer.dataSources.add(Cesium.GeoJsonDataSource.load("url")
)

Cesium坐标系

WGS84经纬度坐标系（没有实际的对象）
WGS84弧度坐标系（Cartographic）

new Cesium.Cartographic(longitude,latitude,height)//三个参数分别为经度、纬度和高度

笛卡尔空间直角坐标系（Cartesian3）
平面坐标系（Cartesian2）

new Cesium.Cartesian2(x,y)

4D笛卡尔坐标系（Cartesian4）

【Cesium】Cesium基本介绍相关推荐

Cesium基础使用介绍
既然给我发了参与方式,不参加似乎有点不给人面子,反正也没多少人看我的博客,那我就试试吧,也欢迎大家自己参与:2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVo ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
cesium粒子系统介绍
文章目录 1.什么是粒子系统 2.粒子系统基础 3.发射器 3.1 盒子发射器 3.2 圆形发射器 3.3 锥形发射器 3.4 球体发射器 4.配置粒子系统 4.1 粒子发射率 4.2 粒子的生命周期 ...
cesium cesium is not defined
博主qq:1125346480 有意者加解决后, 把cesium改成Object试试
vue3.x +Cesium Cesium 鼠标交互，鼠标点击拾取对象等（五）
cesium地图上鼠标点击事件 1.创建屏幕控制实例 var handlClick = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas) ...
vue3.x +Cesium Cesium camera相机的使用（二）
Cesium camera 相机系统 setView flyTo lookAt viewBoundingSphere setView 的使用通过设定目的地的三维坐标和视线方向将视角切换到设定视域范围 ...
vue3.x +Cesium Cesium 如何加载空间数据，如何管理空间数据，加载实体，entities添加几何体，管理集合体等（四）
cesium 通过 viewer.entities.add() 添加空间数据(实体)到地图上 point:点的添加 // 点var position = new Cesium.Cartesian3.f ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
Cesium工作笔记001---地理位置信息js展示框架_Cesium介绍
JAVA技术交流QQ群:170933152 一.Cesium介绍 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎.Cesium支持3D,2D,2.5D形式的地图展示,可以 ...
GIS、ArcGIS 、WebGIS及Cesium的介绍
GIS 地理信息系统 (GIS) 是一个用于描绘地球和其他地理要素并突出其特征,从而显示和分析经空间配准的信息的系统.此项工作主要借助地图来执行. GIS 的目的在于创建.共享和应用基于地图的有用信息 ...

【Cesium】Cesium基本介绍