Entities

为了便于可视化,Cesium 支持流行的矢量格式 ① GeoJson② KML(最初为Google定义的文件格式),以及一种 Cesium 团队自己开源的格式,专门开发用于描述Cesium场景的 ③ CZML

无论最初是什么格式,所有的空间矢量数据在Cesium里都是使用Entity 相关API去展示的。Entity API 使用了灵活高效的可视化渲染方式。Entity 是一种对几何图形做空间和时间展示的数据对象。

不同 Entity 类型:Polygon    Polyline    Billboard    Label (注:POI点默认都是使用 Billboards 和 Labels 显示

Cesium Sandcastle

为了读取数据文件,需要根据你的数据格式创建一个合适的 DataSource ,它将负责解析你配置的url里的数据,然后创建一个EntityCollection用来存储从数据里加载的每一个Entity 。DataSource 只是定义一些接口,依据数据格式的不同会有不同的解析过程。比如,KML 使用 KmlDataSource;GeoJson 使用 GeoJsonDataSource;CZML 使用 CzmlDsataSource。

因为数据是异步加载的,所以 .load 这个函数实际返回一个 Promise , 最后使用 xxxDataSource 存储我们新创建的Entity。Promise 是一种异步处理机制,这里的“异步”是指需要在.then函数里操作数据,而不是直接在 .load函数之后立即操作。为了能在scene中使用这些载入的 Entity,只有当这个promise的then回调中才可以把 xxxDataSource添加到 viewer.datasources。

这些新加入到场景的 Entity 默认有很多功能。单击它们会在 Infobox 显示属性, 双击它相机转换为居中观察模式(look at)。使用HOME按钮或者infobox旁边的相机按钮可以停止这种模式。

官方案例的数据

https://github.com/CesiumGS/cesium-workshop

注:之前没找到官方案例的数据源,所以在学习时用了自己已有的数据,现在找到官方数据源了,就不用那么麻烦了。

GeoJson

面数据

这里使用 阿里云DATAV GeoAtlas 的全国数据为例,把数据下载到本地 /Cesium-1.62/Source/Data/china.json,浏览器打开 http://localhost:8080/Apps/HelloWorld.html 后,漫游到 China

var geojsonOptions = {clampToGround : true
};var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('../Source/Data/全国.json', geojsonOptions);var neighborhoods;
neighborhoodsPromise.then(function(dataSource) { viewer.dataSources.add(dataSource);neighborhoods = dataSource.entities;// 获取enity列表遍历var neighborhoodEntities = dataSource.entities.values;for (var i = 0; i < neighborhoodEntities.length; i++) {var entity = neighborhoodEntities[i];if (Cesium.defined(entity.polygon)) {// 设置每个entity的name属性和行政区的名称相同// entity.name = entity.properties.name;entity.polygon.material = Cesium.Color.fromRandom({ // 通过ColorMaterialProperty设置随机颜色Color,而不是把所有的区域都设置成一样的颜色。red : 0.1,maximumGreen : 0.5,minimumBlue : 0.5,alpha : 0.6});}}
});

点击会弹出相应的属性信息(文件含中文要注意编码格式

classificationType属性为Terrain(贴地形),3D Tile(贴模型) 或 Both(默认)

// BOTH 或 CESIUM_3D_TILE 或 TERRAIN
entity.polygon.classificationType = Cesium.ClassificationType.BOTH;

在再加载一个3d tiles模型的基础上,看该属性的结果:

TERRAIN(左);BOTH(中);CESIUM_3D_TILE(右)

添加文字标注 Label。 为了保证显示效果清晰,我们设置了一个 disableDepthTestDistance 确保这个标注不会被其他对象盖住。(之前尝试时Label一直没显示,用官方案例数据 sampleNeighborhoods.geojson 时放大到一定程度才看得到

但用自己的数据不知道为什么会出现重复一样的Label,留个坑....2020年8月更新:查看了一下全国.json数据,应该是因为里面包含子区域,每个省由几个市组织而成,每个市被当作一个Polygon构成省的MultiPolygon,所以 neighborhoodEntities.length 的值不是预想的35,而是288,所以在添加标注时会显示多个同样的市名称。

其他链接:【GeoJson Type】 【EntityCollection】

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;
// Generate labels
entity.label = {text : entity.name,showBackground : true, // 文字后是否显示背景// fillColor:Cesium.Color.BLACK,      // 字体颜色// backgroundColor:Cesium.Color.AQUA, // 背景颜色scale : 0.4,horizontalOrigin : Cesium.HorizontalOrigin.CENTER,verticalOrigin : Cesium.VerticalOrigin.BOTTOM,// distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),// disableDepthTestDistance : Number.POSITIVE_INFINITY,// pixelOffset : new Cesium.Cartesian2(0.0, -15.0), // 向上移(x向右为正,y向下为正)
};

点数据

用cesium解压文件夹下 /APP/SampleData/simplestyles.geojson 为例加载一下点数据

Cesium.GeoJsonDataSource.load('./SampleData/simplestyles.geojson').then(function(dataSource) {viewer.dataSources.add(dataSource);var entities = dataSource.entities.values;for (var i = 0; i < entities.length; i++) {var entity = entities[i];entity.billboard = undefined;entity.point = new Cesium.PointGraphics({color: Cesium.Color.WHITE,pixelSize: 10});}
});

需要先设置 entity.billboard = undefined,否则会显示一个图标而不是点,就像这样:

线数据

cesium自带的数据里没看到线数据,就用自己的shp数据转换成geojson(深圳福田区的区划线)(注:可以通过mapshaper转换得到geojson数据

Cesium.GeoJsonDataSource.load('../Source/Data/福田区划线.json').then(function(dataSource) {viewer.dataSources.add(dataSource);var entities = dataSource.entities.values;for (var i = 0; i < entities.length; i++) {var entity = entities[i];entity.polyline.width = 10;  //添加默认样式entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({glowPower: .1, //一个数字属性,指定发光强度,占总线宽的百分比。color: Cesium.Color.ORANGERED.withAlpha(.9)});}
});

KML

KML文件是谷歌公司创建的一种地标性文件。用于记录某一地点、或连续地点的时间、经度、纬度、海拔等地理信息数据 [KML文件打开方式]。kml是xml格式的一种特殊化,原来用于Google Earth的数据交互,它与geojson的区别在于它可以带符号、颜色、样式信息 [链接​​​​​​​]。

其他:python读取kml为geojson

Cesium:入门教程(四)之 Entities相关推荐

  1. LittleVGL (LVGL)干货入门教程四之制作和使用中文汉字字库

    LittleVGL (LVGL)干货入门教程四之制作和使用中文汉字字库 前言: 阅读前,请确保你至少拥有以下条件: 已实现显示API(教程一已实现, 链接:LittleVGL (LVGL)入门教程一之 ...

  2. vue集成cesium入门教程(1)环境搭建、初始化三维地球

    1.概述   这篇内容是<vue集成cesium入门教程>的第一篇,我将记录在vue中集成cesium并实现页面的初始化(显示三维地图页面)等学习内容.效果如下: 2.实现步骤   首先是 ...

  3. Python+Opencv图像处理新手入门教程(四):视频内容的读取与导出

    一步一步来吧 上一节: Python+Opencv图像处理新手入门教程(三):阈值与二值化 1.Intro 今天这节我们主要看怎么利用opencv读取并处理视频中的内容. 2.VideoCapture ...

  4. (原创)LEON3入门教程(四):基于AMBA APB总线的七段数码管IP核设计

    摘要:这一小节将介绍下如何设计用户自定义的APB IP,并将IP嵌入到SOPC中去.一个APB IP核的主要分为三个部分:逻辑单元.寄存器单元和接口单元.所设计的IP是一个简单的七段数码管显示IP,只 ...

  5. docker 镜像修改的配置文件自动还原_原创 | 全网最实在的docker入门教程四

    作者:潘吉祥 上一篇我们学习了如何使用Dockerfile制作自己的镜像,不过这种方式更像纯粹的运维方式,作为开发者来说,未免有些小繁琐,一个不小心写错些命令就执行失败,我们还不知道错误在哪,这着实有 ...

  6. python画图颜色表示大小变化_python画图(线条颜色、大小、类型:点、虚线等)(图文详细入门教程四)...

    初衷 本人由于平常写论文需要输出一些结果图,但是苦于在网上搜python画图时,详细的教程非常多,但是就是找不到能马上解决自己问题那一行代码,所以打算写一些适合需求简单的朋友应急用的教程,应急就必须方 ...

  7. SpringCloud 入门教程(四): 分布式环境下自动发现配置服务

    前一章, 我们的Hello world应用服务,通过配置服务器Config Server获取到了我们配置的hello信息"hello world". 但自己的配置文件中必须配置co ...

  8. docker registry push 覆盖_原创 | 全网最实在的docker入门教程四

    原创头条号:码农code之路,作者:潘吉祥,转载请标明出处 上一篇我们学习了如何使用Dockerfile制作自己的镜像,不过这种方式更像纯粹的运维方式,作为开发者来说,未免有些小繁琐,一个不小心写错些 ...

  9. Spring Boot入门教程(四十):微信支付集成-刷卡支付

    分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 一:准备工作 使用微信支付需要先开通服务号,然后还要开通微信支付,最后还要配置一些开发参数,过程比较多. 申请服务号(企业 ...

  10. Spring Boot入门教程(四十一):微信支付集成-扫码支付

    分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 一:准备工作 使用微信支付需要先开通服务号,然后还要开通微信支付,最后还要配置一些开发参数,过程比较多. 申请服务号(企业 ...

最新文章

  1. 模块化的 Windows 7
  2. [美文欣赏]清华胡宇迪教授谈
  3. JZOJ 100026. 【NOIP2017提高A组模拟7.7】图
  4. mysql触发器 多数据_mysql的触发器同数据库多表的数据操作_MySQL
  5. PSD缩略图的设置方法
  6. IBM ServerGuide 8.42
  7. 机器喵之红黑树(三)
  8. 提高团队协作效率就靠它们了!
  9. 教你用Python做个打飞机小游戏超详细教程
  10. linux 线程tid,关于linux:PID和TID之间的区别
  11. 汇编语言逻辑“或”指令与应用示例:OR (Logical Inclusive OR)和 XOR (Logical Exclusive OR)
  12. Flutter 中 Card 设置圆角
  13. 在别人写的代码上做修改我是这样保证正确性
  14. 搭建:LVS+Keepalived高可用Web服务群集环境
  15. 解决ImportError: No module named redis
  16. 三台主机关于ntp时间同步的实验
  17. 声音以模拟信号的形式存储在计算机中,2021年4月自考《广告媒体分析》模拟试题(三)...
  18. matlab计算abc三相短路电流_低压零序电流互感器的选择配置
  19. STM32F10X SPI操作flash MX25L64读写数据(转)
  20. C语言中常见的四个内存函数

热门文章

  1. 《零秒工作》读书分享
  2. 阿里云开通maven仓库服务及springboot集成
  3. winserver2016远程桌面出现函数不支持情况解决
  4. win10局域网计算机无法访问,Win10局域网访问不了什么原因_Win10局域网访问不了的解决方法...
  5. 使用Pyecharts进行全国水质TDS地图可视化全过程4:使用Python将Excel表拆分至多个Excel文件
  6. 十个最能吸引眼球的新闻词汇
  7. Ubuntu 16.04 取消搜狗输入法 ctrl+space 快捷键
  8. 基于MBD的控制系统建模与仿真软件工具集
  9. 吴声:个性化规模时代来临 小程序是新商业操作系统
  10. 基于个月的培训项目中的Java,NET,PHP的德里