news 2026/2/13 16:31:08

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/2/12 12:58:34

Day 42 复习日

浙大疏锦行 信贷风险预测代码,考虑神经网络,借助AI改进 # 1. 导入核心库 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns import time import warnings warnings.filterwarnings("ignore"…

作者头像 李华
网站建设 2026/2/12 3:26:29

大模型Memory模块深度解析:从基础实现到高级应用!

简介 文章详细介绍了大模型Memory模块的设计意义与实现方法,包括不借助LangChain的基础记忆实现、自定义Memory模块开发流程、spacy实体识别的高级应用,以及LangChain中七种内置Memory模块的对比分析。文章还提供了从初阶应用到模型训练的完整学习路径&…

作者头像 李华
网站建设 2026/2/12 6:10:25

53.自定义工作队列传参

这里用到了container_of&#xff0c;可以利用某个成员的地址&#xff0c;顺藤摸瓜拿到拿到整个结构体的地址驱动#include <linux/module.h> #include <linux/init.h> #include <linux/interrupt.h> #include <linux/gpio.h> #include <linux/delay.…

作者头像 李华
网站建设 2026/2/5 17:44:09

安全VR:靠谱的VR安全体验馆厂商品牌榜,技术实力与落地案例

安全VR&#xff1a;靠谱的VR安全体验馆厂商品牌榜&#xff0c;技术实力与落地案例开篇总起在安全培训领域&#xff0c;数字化转型需求迫切&#xff0c;传统培训方式效果欠佳。安全VR体验馆凭借高度还原场景、沉浸式体验等优势&#xff0c;成为提升安全培训效果的有效手段。但市…

作者头像 李华
网站建设 2026/2/12 23:26:02

灵遁者:我对于探索的热爱,从来没有减少过

我对于探索的热爱&#xff0c;从来没有减少过。探索生命&#xff0c;这是自人类诞生以来&#xff0c;一直在拼命解读的课题。所以关于生命&#xff0c;我们思考得再多&#xff0c;也远远不够。 灵遁者&#xff0c;赞3这是一个需要创新的时代&#xff0c;但更是一个需要“消化”…

作者头像 李华
网站建设 2026/2/11 2:39:38

右值引用和移动语义

作用&#xff1a;C11中引用了右值引用和移动语义&#xff0c;可以避免无谓的复制&#xff0c;提高了程序性能。 1. 什么是左值、右值 可以从2个角度判断&#xff1a; 左值可以取地址、位于等号左边&#xff1b; 而右值没法取地址&#xff0c;位于等号右边。 int a 6; a可…

作者头像 李华