<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义的平铺图片数据</title>
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';
let viewer=new Cesium.Viewer('cesiumContainer',{//世界地形
terrainProvider:new Cesium.CesiumTerrainProvider({
url:Cesium.IonResource.fromAssetId(1),
requestWaterMask:true,
requestVertexNormals: true
})
}) //设置太阳效果.背面为黑
viewer.scene.globe.enableLighting=true; //添加瓦片数据
var tileset=viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url:Cesium.IonResource.fromAssetId(15792)
})
)
viewer.zoomTo(tileset);
</script>
</body>
</html>

Cesium中地形可以在新建Viewer中,第二个参数,配置项进行配置,由{}对象形式定义

{//世界地形 terrainProvider:new Cesium.CesiumTerrainProvider({ url:Cesium.IonResource.fromAssetId(1), requestWaterMask:true, requestVertexNormals: true }) }

Cesium.IonResource.fromAssetId(“你的CesiumIon资源ID”) CesiumIcon地址https://cesium.com/ion/signin

requestWaterMask:true 设定Cesium额外的水效果,

viewer.scene.globe.enableLighting=true;

设置受太阳光照效果,背光的一面为黑色

        //添加瓦片数据
var tileset=viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url:Cesium.IonResource.fromAssetId(15792)
})
)

Cesium中将地图数据由三维变为二维展示中,将一个场景所需要渲染的图片,抽象成瓦片的概念,就类似拼图

本文由 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: 2019/02/17 14:00

Cesium入门-2-增加地形的更多相关文章

  1. Cesium入门7 - Adding Terrain - 添加地形

    Cesium入门7 - Adding Terrain - 添加地形 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com ...

  2. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...

  3. Cesium入门-3-官方完整实例

    实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ ...

  4. cesium入门示例-矢量化单体分类

    实现楼层的分层选择和属性信息展示,该功能基于大雁塔倾斜数据实现单体化分类显示. 数据准备: 1.大雁塔倾斜数据,已转换为3dTiles,参考cesium入门示例-3dTiles加载的第2节osgb数据 ...

  5. Cesium入门11 - Interactivity - 交互性

    Cesium入门11 - Interactivity - 交互性 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...

  6. Cesium入门5 - Cesium ion

    Cesium入门5 - Cesium ion Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium io ...

  7. Cesium入门1 - Cesium介绍

    Cesium入门1 - Cesium介绍 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium简介 Ce ...

  8. cesium 入门开发系列地图鹰眼功能(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...

  9. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

随机推荐

  1. iOS音频学习笔记二:iOS SDK中与音频有关的相关框架

      上层:       Media Player Framework: 包含MPMoviePlayerController.MPMoviePlayerViewController.MPMusicPla ...

  2. RocketMQ问题

    RocketMQ原理(4)——消息ACK机制及消费进度管理 RocketMQ消费者,设置setConsumeFromWhere无效的问题 MQ的CONSUME_FROM_LAST_OFFSET未生效 ...

  3. Android笔记(四) Activity之间的数据传递

    我们之前使用Intent进行Activity之间的跳转,其实Intent还可以在启动活动的时候传递数据. Intent提供了一系列的putExtra方法以便我们把想要传递的数据暂存在Intent中,待 ...

  4. Linux命令——column

    参考:Viewing Linux output in columns 功能 column命令把他的输入格式化多列显示.输入可以是文件,也可以是标准输入. 列优先,从左到右 显示的时候首先填满最左列,然 ...

  5. Loadrunner 计算保留两位小数不四舍五入

    有时候在测试过程中会截取返回值,当你截取的值不是最终的值,需要进行计算后才能使用并且需要保留两位小数,不进行四舍五入的计算: 此时 我使用了各种办法,但是最终我采用了一种最直接,最暴力的方法就是先乘后 ...

  6. 解决Hibernate validator抛出Ljavax/validation/ParameterNameProvider异常方法

    最近升级CAS Client4.0客户端Spring版本至Spring4.*以上,升级整合hibernate框架时,Hibernate validator 4.3.0.Final使用版本(从Hiber ...

  7. 实验十一 团队作业7:团队项目设计完善&编码1

    博文简要信息表: 项目 内容 软件工程 https://www.cnblogs.com/nwnu-daizh/ 本次实验链接地址 https://www.cnblogs.com/nwnu-daizh/ ...

  8. mailto标签来调用邮箱客户端

    最近项目需要使用mailto标签来调用客户端,并且把邮件模板填到客户端. mailto 的用法: a标签直接调用: <a href="mailto:example@qq.com?cc= ...

  9. 在vue中使用css预编辑器

    vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loade ...

  10. 设置input 中placeholder的样式

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ position: relative; top: 4px; } ::-moz-place ...