Cesium入门-3-官方完整实例
实例核心代码
//资源访问令牌 Cesium token
Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c'
//创建Cesium 场景
var viewer=new Cesium.Viewer('cesiumContainer',{
scene3DOnly:true,
selectionIndicator:true,
baseLayerPicker:true,
timeline:true,//时间轴
animation:true,//动画轴
});
//增加地图图片资源提供者(CesiumIon) Cesium官方
viewer.imageryLayers.remove(0); //图片层级管理 移除默认的基础层级提供者
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({assetId:3954}));
//设置地形
viewer.terrainProvider=Cesium.createWorldTerrain({
requestWaterMask:true,//水渲染需求
requestVertexNormals:true//顶点法线渲染需求
});
viewer.scene.globe.depthTestAgainstTerrain=true;//深度显示(用于湖泊河流 水深对周围景观的影响)
viewer.scene.globe.enableLighting=true;//全局日照(受太阳,月亮的位置而影响光照信息)
//创建初始化摄像机视图
var initialPosition=new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);//摄像机位置 ,经度,纬度,高度
var initialOrientation=new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);//飞行 专用的 表示旋转角度之类的东西: 飞行中飞机机体轴相对于地面的角位置
var homeCameraView={
destination:initialPosition,
orientation:{
heading:initialOrientation.heading, //偏航角
pitch:initialOrientation.pitch, //俯仰角
roll:initialOrientation.roll //滚转角
}
};
viewer.scene.camera.setView(homeCameraView);
//飞行时,相机的动画属性设置
homeCameraView.dutaion=2.0;
homeCameraView.maximumHeight=2000;
homeCameraView.pitchAdjustHeight=2000;
homeCameraView.endTransform=Cesium.Matrix4.IDENTITY;
// //覆盖初始相机视图
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e){
e.canvel=true;
viewer.scene.camera.flyTo(homeCameraView) //貌似没效果 -.-
})
//设置时间轴
viewer.clock.shouldAnimate=true;//右下角圆盘指针控制的时钟动画
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z"); //开始时间 使用iso8601国际标准
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z"); //停止时间
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");//当前时间
viewer.clock.multiple=2; //时间流逝 速率
viewer.clock.clockStep=Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;//时钟的 步长
viewer.clock.clockRange=Cesium.ClockRange.LOOP_STOP;//循环
viewer.timeline.zoomTo(viewer.clock.startTime,viewer.clock.stopTime);//设置时间轴可见趋近
/**加载KML数据--添加地理标记 从KML文件中获取数据 由Cesium.KmlDataSource数据加载器加载--**/
var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};
// 从KML 文件中加载地理标记点 geocache
//KML全称:Keyhole Markup Language,是基于XML(eXtensible Markup Language,可扩展标记语言)语法标准的一种标记语言(markup language),由Google(谷歌)旗下的Keyhole公司发展并维护,用来表达地理标记
var geocachePromise = Cesium.KmlDataSource.load('https://gist.githubusercontent.com/rahwang/bf8aa3a46da5197a4c3445c5f5309613/raw/04e17770dd552fd2694e2597986fd480b18b5014/sampleGeocacheLocations.kml', kmlOptions);
// 从geocachePromise中解析标记点 并转化为 Cesium中的 实体对象(entity)
geocachePromise.then(function(dataSource) {
//数据源添加到实际场景viewer 中的dataSources数据源中
viewer.dataSources.add(dataSource);
// Get the array of entities
var geocacheEntities = dataSource.entities.values;
for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
if (Cesium.defined(entity.billboard)) {
// Adjust the vertical origin so pins sit on terrain
entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
// Disable the labels to reduce clutter
entity.label = "KML billboard 兴趣点"+i;
// Add distance display condition 满足的距离条件时,显示兴趣点
entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// Compute latitude and longitude in degrees 位置和角度
var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
//转化成经纬度
var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
// Modify description 兴趣点属性 描述
var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>';
description += '<tr><th>' + "Latitude" + '</th><td>' + latitude + '</td></tr>';
description += '<tr><th>' + "Longitude" + '</th><td>' + longitude + '</td></tr>';
description += '</tbody></table>';
entity.description = description;
}
}
});
/**加载GeoJson数据 ,添加邻近区图形 从GeoJson文件中获取数据 由GeoJsonDataSource数据加载器加载**/
var geojsonOptions = {
clampToGround : true
};
// 从Geojson文件中获取 多边形 边界信息数据
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('https://gist.githubusercontent.com/rahwang/2c421916bb955ca722a4dbc8ab079c76/raw/ae8a1c5680fbd2fc6940dd3a8f941ad397bdc085/sampleNeighborhoods.geojson', geojsonOptions);
//从neighborhoodsPromise 数据源转化为Cesium中的数据实体entity
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
// 数据源添加到实际场景viewer 中的dataSources数据源中
viewer.dataSources.add(dataSource);
neighborhoods = dataSource.entities;
// 获取总的数据实体 数组
var neighborhoodEntities = dataSource.entities.values;
for (var i = 0; i < neighborhoodEntities.length; i++) {
var entity = neighborhoodEntities[i];
if (Cesium.defined(entity.polygon)) {
// Use kml neighborhood value as entity name
entity.name = entity.properties.neighborhood;
// 设置多边形 的材质 和透明
entity.polygon.material = Cesium.Color.fromRandom({
red : 0.1,
maximumGreen : 0.5,
minimumBlue : 0.5,
alpha : 0.6
});
// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// 计算生成polygon的中心位置
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// 实体标签 显示的信息设置
entity.label = {
text : entity.name,//文字
showBackground : false,//背景
scale : 0.6,//标签缩放大小
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
disableDepthTestDistance : Number.POSITIVE_INFINITY
};
}
}
});
/**加载Czml数据 ,从czml文件中 由Cesium.CzmlDataSource 数据加载器加载飞行路径信息**/
// 从czml文件中加载数据
var dronePromise = Cesium.CzmlDataSource.load('https://gist.githubusercontent.com/rahwang/0d1afa6f9e5aa342cb699d26851d97df/raw/5fec1c0cebc097661579143096e796a097c9b629/sampleFlight.czml');
// Save a new drone model entity
var drone;
dronePromise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
drone = dataSource.entities.values[0];
// 加载一个gtlf格式的3D模型
drone.model = {
uri : 'https://gist.githubusercontent.com/rahwang/9843cb77fc1c6d07c287566ed4e08ee3/raw/dc3a9ff6fc73b784519ac9371c0e2cbd3ab3dc47/CesiumDrone.gltf',
minimumPixelSize : 128,
maximumScale : 2000
};
// 实时计算飞行时,模型的巡航角度
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
// 圆滑路径,使路径相对平滑过渡 插值过渡
drone.position.setInterpolationOptions({
interpolationAlgorithm : Cesium.HermitePolynomialApproximation, //插值算法
interpolationDegree : 2
});
//3D笛卡尔坐标点
drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
});
/**加载3dTile 数据集 瓦片数据 ,其实就是景观建筑群数据**/
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));//我账号没有该地理资源。。。
// Adjust the tileset height so it's not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
//3D瓦片的position 位置
var boundingSphere = tileset.boundingSphere;
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
var surfacePosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offsetPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
var translation = Cesium.Cartesian3.subtract(offsetPosition, surfacePosition, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
//定义Tile样式
// Define a white, opaque building style
var defaultStyle = new Cesium.Cesium3DTileStyle({
color : "color('white')",
show : true
});
// Define a white, transparent building style
var transparentStyle = new Cesium.Cesium3DTileStyle({
color : "color('white', 0.3)",
show : true
});
// Define a style in which buildings are colored by height 针对不同高度给与不同的样式
var heightStyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
["${height} >= 200", "rgb(102, 71, 151)"],
["${height} >= 100", "rgb(170, 162, 204)"],
["${height} >= 50", "rgb(224, 226, 238)"],
["${height} >= 25", "rgb(252, 230, 200)"],
["${height} >= 10", "rgb(248, 176, 87)"],
["${height} >= 5", "rgb(198, 106, 11)"],
["true", "rgb(127, 59, 8)"]
]
}
});
// Set the tileset style to default 最终设置给tile的样式
city.style = defaultStyle;
//鼠标事件互动
var previousPickedEntity;
var handler=viewer.screenSpaceEventHandler;//在屏幕空间发生的事件柄
handler.setInputAction(function(movement){
var pickedPrimitive=viewer.scene.pick(movement.endPosition);//拾取对象
var pickedEntity=Cesium.defined(pickedPrimitive)?pickedPrimitive.id:undefined;
//高亮挑选的实体对象
if(Cesium.defined(previousPickedEntity)){
previousPickedEntity.billboard.scale=1.0;
previousPickedEntity.billboard.color=Cesium.Color.WHITE;
}
// //高亮当前拾取的Entity对象
if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
pickedEntity.billboard.scale = 2.0;
pickedEntity.billboard.color = Cesium.Color.ORANGERED;
previousPickedEntity = pickedEntity;
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动事件
//切换相机
var freeModeElement=document.getElementById('freeMode');//获取dom元素
var droneModeElement=document.getElementById('droneMode');
freeModeElement.addEventListener('change',setViewMode);
droneModeElement.addEventListener('change',setViewMode);
function setViewMode(){
if(droneModeElement.checked){
viewer.trackedEntity=drone//相机跟踪实体对象
}else{
viewer.trackedEntity=undefined;
viewer.scene.camera.flyTo(homeCameraView);
}
}
//用户双击实体是,会自动跟踪实体,可以添加一些处理Ui的逻辑
viewer.trackedEntityChanged.addEventListener(function(){
if (viewer.trackedEntity === drone) {
freeModeElement.checked = false;
droneModeElement.checked = true;
}
} )
//同理设置一些显示
var shadowsElement = document.getElementById('shadows');
var neighborhoodsElement = document.getElementById('neighborhoods');
shadowsElement.addEventListener('change', function (e) {
viewer.shadows = e.target.checked;//场景是否阴影
});
neighborhoodsElement.addEventListener('change', function (e) {
neighborhoods.show = e.target.checked;//polygon 邻近区图形是否显示
});
//加载城市建筑群数据完成,关掉遮罩层,我账号无此资源,直接注释
// // Finally, wait for the initial city to be ready before removing the loading indicator.
// var loadingIndicator = document.getElementById('loadingIndicator');
// loadingIndicator.style.display = 'block';
// city.readyPromise.then(function () {
// loadingIndicator.style.display = 'none';//
// });
重要知识点
创建场景
创建地形
- Cesium.CesiumTerrainProvider 地形提供者
let viewer=new Cesium.Viewer('cesiumContainer',{//世界地形
terrainProvider:new Cesium.CesiumTerrainProvider({
url:Cesium.IonResource.fromAssetId(1),
requestWaterMask:true,//水效果
requestVertexNormals: true//顶点法线效果
})
})
添加图片层级(图片资源提供者xxxImageryProvider)
创建初始化摄像机视图
加载数据
- KML数据加载
var geocachePromise = Cesium.KmlDataSource.load(“URL”)
- 加载GeoJson数据 ,添加邻近区图形
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load("URL")
- CZML数据加载
var dronePromise = Cesium.CzmlDataSource.load("URL")
- 3DTile 瓦片数据加载 (景观,建筑群,)
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));
3DTile样式定义
var defaultStyle = new Cesium.Cesium3DTileStyle({
color : "color('white')",
show : true
});
// Define a style in which buildings are colored by height 针对不同高度给与不同的样式var heightStyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
["${height} >= 200", "rgb(102, 71, 151)"],
["${height} >= 100", "rgb(170, 162, 204)"],
["${height} >= 50", "rgb(224, 226, 238)"],
["${height} >= 25", "rgb(252, 230, 200)"],
["${height} >= 10", "rgb(248, 176, 87)"],
["${height} >= 5", "rgb(198, 106, 11)"],
["true", "rgb(127, 59, 8)"]
]
}});
// Set the tileset style to default 最终设置给tile的样式
city.style = defaultStyle;
事件互动
- 获取事件柄
var handler=viewer.screenSpaceEventHandler;//在屏幕空间发生的事件柄
- 事件处理
handler.setInputAction(处理函数,具体事件)
handler.setInputAction(function(movement){
var pickedPrimitive=viewer.scene.pick(movement.endPosition);//拾取对象
var pickedEntity=Cesium.defined(pickedPrimitive)?pickedPrimitive.id:undefined;
//高亮挑选的实体对象
if(Cesium.defined(previousPickedEntity)){
previousPickedEntity.billboard.scale=1.0;
previousPickedEntity.billboard.color=Cesium.Color.WHITE;
}
// //高亮当前拾取的Entity对象
if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
pickedEntity.billboard.scale = 2.0;
pickedEntity.billboard.color = Cesium.Color.ORANGERED;
previousPickedEntity = pickedEntity;
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动事件
本文由 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: 2019/02/20 20:19
Cesium入门-3-官方完整实例的更多相关文章
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...
- Cesium入门11 - Interactivity - 交互性
Cesium入门11 - Interactivity - 交互性 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...
- Cesium入门7 - Adding Terrain - 添加地形
Cesium入门7 - Adding Terrain - 添加地形 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com ...
- Cesium入门3 - Cesium目录框架结构
Cesium入门3 - Cesium目录框架结构 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ app目录 下 ...
- Cesium入门4 - 创建Cesium Viewer
Cesium入门4 - 创建Cesium Viewer Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 任何Ce ...
- Cesium入门2 - Cesium环境搭建及第一个示例程序
Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...
- C# 调用第三方DLL完整实例
C# 调用第三方DLL完整实例 分类: C/C++ 以下代码为本人在实际项目中编写的调用第三方DLL接口程序的完整代码. public class ExecuteDLL : Form { ...//忽 ...
- (转)多个mapreduce工作相互依赖处理方法完整实例(JobControl)
多个mapreduce工作相互依赖处理方法完整实例(JobControl) 原文地址:http://mntms.iteye.com/blog/2096456?utm_source=tuicool&am ...
随机推荐
- vue 实现的评分小星星组件,包括半星
github源码地址:https://github.com/13476075014/node-vue/blob/master/mynodeproject/13.sell/sell/src/compon ...
- vue html属性绑定
业务场景: element ui里面select的组件,通过勾选是否启动搜索功能 解决: 在select组件上绑定一个 :filterable,值就是是否可搜索的checkbox的值 true和fa ...
- JavaScript-- 基础知识面试题
1.JavaScript语言特点 1.弱类型,数据类型由数据的值决定 2.解释性脚本语言--解释器是JS引擎 是浏览器的一部分 3.运行在客户端浏览器上 4.有事件驱动机制(按下鼠标,移动窗口等) 5 ...
- SAP应用真的不性感么
这是一个问题. 上图的One Order是楼下一个部门领导让我给他的团队做的一个古老框架的session. 这个框架诞生于2000年,采用纯面向过程的思路开发.因为上世纪90年代ABAP开始引入对面向 ...
- 如何把SAP WebIDE里的Web项目同Github仓库连接起来
我们在SAP WebIDE里进行UI5应用开发时,当然也希望能将开发的代码纳入到github版本管理中去. 步骤其实非常简单. 右键点击WebIDE里UI5应用,git->Initialize ...
- YII2 实现dropDownList 联动事件
一.视图中 <div class="main-form"> <?php $form = ActiveForm::begin(); ?> <?= $fo ...
- 通用mapper的增删改查方法 留存 备忘
Mybatis通用Mapper介绍与使用 前言 使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQ ...
- Install RabbitMQ on CentOS 7
NOTE: this article is only for CentOS 7 How to Install RabbitMQ on CentOS 7 yum update Install erlan ...
- JavaScript中数组的排序——sort()
数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. arrayObject.sort(方法函数) 1.如果不指定<方法函数>,则按unicode码顺序排列. 2.如果 ...
- My97DatePicker(js日期插件) v4.8
1.下载地址 https://files.cnblogs.com/files/yu-shang/My97DatePicker.zip 2.文档地址 http://my97.net/demo/index ...