news 2026/6/11 23:40:29

Cesium快速入门26:加载渲染GeoJson数据

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门26:加载渲染GeoJson数据

用 Cesium 做地理信息可视化,最常见的数据来源就是GeoJSON
今天带你把“四川地图”整个搬进来,一行代码加载,一行代码上色,比用 Three.js 自己解析省十倍功夫。


一、GeoJSON 长啥样?

GeoJSON 里存的是“经纬度 + 属性”,可以是省界、道路、点位,甚至航拍区域。
阿里 DataV 免费提供了全国省市区数据,今天拿“四川省”练手:
地址:https://datav.aliyun.com/portal/school/atlas/area_selector
(想换广东、江苏、道路网,同理复制链接即可)


二、最简加载:两步到位

  1. 把下载好的四川省.geojson扔进项目/geojson/文件夹;

  2. 两行代码直接渲染:

/* 1. 加载 GeoJSON(返回 Promise) */ const scGeoJson = Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson'); /* 2. 添加到场景 */ viewer.dataSources.add(scGeoJson);

刷新地球——四川省


三、等加载完成?用 await 更直观

load本质是 Ajax,想等数据就位后再统一处理,可以顺手 await:

const scGeoJson = await Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson'); viewer.dataSources.add(scGeoJson);

这样后续想缩放、染色、弹窗,都能立刻拿到完整对象。


四、一次配好色:stroke、fill、线宽都能传

Cesium 把 GeoJSON 所有样式参数都包成配置项,加载时一起丢进去即可:

const scGeoJson = Cesium.GeoJsonDataSource.load('./geojson/四川省.geojson', { stroke: Cesium.Color.HOTPINK, // 边线颜色 fill: Cesium.Color.PINK.withAlpha(0.2), // 填充颜色 strokeWidth: 3, // 边线像素宽 markerSymbol: '?' // 如果是点,就显示问号图标 }); viewer.dataSources.add(scGeoJson);

效果:粉红边 + 半透明桃心填充,比默认好看一百倍。


五、跟 Three.js 比,快在哪里?

步骤Three.jsCesium
解析文件手写 JSON 遍历一行load自动完成
坐标转换自己转经纬度→世界内部自动转
面/线生成手动搭 Geometry自动根据类型生成
渲染自己写材质可选默认或自定义

一句话:Cesium 把“解析→转换→生成→渲染”全链路封装好,我们只需把 GeoJSON 文件喂给它。


六、小结与拓展

  • 任何 GeoJSON(省界、道路、楼栋)都用同一套路:load→add

  • 样式在加载时一次配完,后期也可通过entities数组再细调。

  • 数据更新?dataSources.removeAll()清掉旧数据,重新load新文件即可。

下节课,我们给这些行政区做“悬浮高亮 + 点击弹窗”,让地图真正“活”起来。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 12:24:00

不止于兼容!金仓数据库三重革新,破解企业数字化转型 “数据库困局”

兼容 是对企业历史投资的尊重 是确保业务平稳过渡的基石 然而 这仅仅是故事的起点 在数字化转型的深水区,企业对数据库的需求早已超越“语法兼容”的基础诉求。无论是核心业务系统的稳定运行,还是敏感数据的安全防护,亦或是复杂场景下的性能优…

作者头像 李华
网站建设 2026/6/10 14:10:20

C++从入门到实战(二十二)stack的介绍和使用

C从入门到实战(二十二)stack的介绍和使用前言一、什么是stack1.1 stack的核心特性1.2 stack与序列容器的核心差异二、stack的核心接口详解2.1 构造函数:stack()2.2 判空操作:empty()2.3 大小获取:size()2.4 栈顶访问&a…

作者头像 李华
网站建设 2026/6/11 3:40:13

C++从入门到实战(二十三)queue的介绍和使用

C从入门到实战(二十三)queue的介绍和使用前言一、什么是queue1.1 queue的定义1.2 queue的核心特性二、queue的核心接口详解2.1 构造函数:queue()2.2 判空操作:empty()2.3 大小获取:size()2.4 队头访问:fron…

作者头像 李华
网站建设 2026/6/11 13:04:37

电商取数服务商推荐:小沓AI电商运营平台聚合全域电商经营数据,取数效率翻倍

春节大促将近,不少零售电商的运营同学已经开始忙起来了——天猫的销售数据、抖音的投流报表、京东的库存明细,全散在不同平台后台里,每天盯着屏幕切账号、复制粘贴,熬到后半夜才能凑齐一份数据;好不容易汇总完,又发现里面混着 “脏数据”,只能眼睁睁看着流量溜走。壹沓科技旗下…

作者头像 李华
网站建设 2026/6/9 21:51:52

为什么我建议起步阶段All-in上下文工程?

为什么我建议起步阶段All-in上下文工程?本文共 2714 字,阅读预计需要 5 分钟。Hi,你好,我是Carl,一个本科进大厂做了2年AI研发后,裸辞的AI创业者。同样是小团队AI创业,为什么有人18个月估值暴涨…

作者头像 李华
网站建设 2026/6/10 14:14:40

第三章:AI开发平台与框架生态

第三章:AI开发平台与框架生态 3.1 深度学习框架三巨头:TensorFlow、PyTorch、JAX的对比 TensorFlow: 技术演进:由Google Brain团队于2015年发布,旨在解决大规模机器学习系统的部署问题。从最初的静态计算图到2.0版本的即时执行模式,TensorFlow经历了重大的架构重构。 核…

作者头像 李华