技术栈
地图可视化
二狗哈
2 天前
前端
·
javascript
·
算法
·
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门34:3dTile高级样式设置
这一节,我们把“3D Tiles 样式”再升一级——按“距离中心”做渐变圆。 以广州塔为圆心,离得越近颜色越红,越远越淡,甚至直接隐藏,全程只用官方样式语言,不动顶点、不写 GLSL。
二狗哈
3 天前
3d
·
状态模式
·
webgl
·
cesium
·
地图可视化
Cesium快速入门33:tile3d设置样式
这一节,我们给 3D Tiles 换皮肤——让一栋栋建筑按“类型、高度”自动变色,瞬间把灰白城市变成“彩虹都市”。全程只用官方样式语言,无需写着色器。
二狗哈
11 天前
javascript
·
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门30:CMZL动画
这一节课,我们用 CZML 让物体真正“动”起来—— 给它一个时间轴,让它按时走路、按时变色、按时消失,全程只靠 JSON,不写半行动画代码。
二狗哈
11 天前
3d
·
状态模式
·
webgl
·
cesium
·
着色器
·
地图可视化
Cesium快速入门29:CMZL数据格式加载
前面我们用“谷歌系”KML 过了一把瘾,今天换 Cesium 亲儿子——CZML。 它同样是“地理 + 时间”的 JSON 套餐,却天生带动态属性:位置、颜色、尺寸都能按时间轴自动插值,一行代码就能让车子跑、让盒子变色、让路线自己长出来。
WebGIS开发
12 天前
gis
·
智慧城市
·
gis开发
·
webgis
·
地图可视化
WebGIS开发实战|智慧城市西安一带一路地图可视化
近年来,随着科技的飞速发展和政策的积极推动,我国新型智慧城市建设取得了显著成效。在“十四五”国家信息化规划中,明确提出要打造智慧高效的城市治理体系,推动城市管理精细化、服务智能化。同时,随着“一带一路”倡议的深入推进,西安作为古丝绸之路的起点和“一带一路”的核心节点城市,承载着连接内陆与国际、促进区域协同发展的重要使命。
二狗哈
14 天前
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门26:加载渲染GeoJson数据
用 Cesium 做地理信息可视化,最常见的数据来源就是 GeoJSON。 今天带你把“四川地图”整个搬进来,一行代码加载,一行代码上色,比用 Three.js 自己解析省十倍功夫。
二狗哈
14 天前
3d
·
webgl
·
cesium
·
着色器
·
地图可视化
Cesium快速入门24:Appearance编写着色器修改外观
上一节课,我们只在 Material 里写着色器;今天把“魔爪”伸到 Appearance——直接重写片元着色器,一样能让像素跳舞,而且套路更简单、更暴力。
二狗哈
17 天前
3d
·
webgl
·
材质
·
cesium
·
地图可视化
Cesium快速入门21:Primitive材质类型与设置
这节课,我们继续啃 Primitive 的材质(Material)。 上节只用了一个最基础的 'Color' 类型,今天把官方常备的“布料”全部铺开:图片、漫反射、网格、水面…… 学会套路后,想换哪件换哪件,全程零着色器。
二狗哈
17 天前
3d
·
webgl
·
材质
·
cesium
·
地图可视化
Cesium快速入门18:Entity材质设置
前面的课程里,我们先后讲了 Entity(实体)和 Primitive(图元)这两种“物体”。 它们都能贴材质,只不过用法有简有繁。 今天先集中火力把 Entity 的材质系统 撸一遍,看看 Cesium 到底给我们备好了哪些“现成布料”,以及怎么换布料。
二狗哈
17 天前
3d
·
webgl
·
材质
·
cesium
·
地图可视化
Cesium快速入门19:Entity折线材质
上一节课我们把“面”的材质讲完了,今天换“线”——折线(Polyline)。 不管是道路、航线还是飞线特效,全靠下面几种现成材质,一句代码就能换皮肤。
二狗哈
17 天前
开发语言
·
前端
·
javascript
·
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门17:与entity和primitive交互
上节课我们学会了“一个图元里塞多个物体”。 新问题来了:鼠标随便点一下,我怎么知道到底点中了谁?能不能像 Three.js 那样“指谁打谁”? 答案当然是可以,套路还是那条老路——屏幕射线拾取(pick)。 Cesium 已经把鼠标事件封装得服服帖帖,我们直接拿来用就行。
二狗哈
18 天前
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门16:Primitive多个实体与颜色修改
上一节课,我们初步认识了 Cesium 的图元(Primitive),当时只放了一个几何体。 其实,一个 Primitive 可以同时塞进多个几何实例(GeometryInstance)。 这样做的好处很明显:
二狗哈
19 天前
开发语言
·
javascript
·
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门15:图元Primitive创建图像物体
前面我们一直用 Entity——也就是“实体”——画矩形、椭球、走廊、圆柱、多边形、球体等等。Entity 把底层细节包得严严实实,一两行代码就能出效果。 可如果想再“底层”一点,自己捏顶点、配材质、写外观,那就得请出今天的主角:Primitive(图元)。 思路跟 Three.js 很像:先造几何体 → 再搞实例 → 再给外观 → 最后扔进场景。 步骤多了,但自由度直接拉满,后面甚至能自己写着色器做烟雾、流体等特效。
二狗哈
21 天前
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门11:广告牌添加
上节课我们插了一个小红点,也加载了 3D 建筑。 可只有文字不过瘾?那就再给广州塔贴一张“真人照”——用 Cesium 的 billboard(广告牌)功能。
二狗哈
22 天前
3d
·
webgl
·
cesium
·
地图可视化
Cesium快速入门10:添加物体与3D建筑
同学们好!今天这节课,我们给地球“加点料”—— 先画一个红点,再叠一个标签,最后把整座城市“3D 化”,让广州塔真正“立”起来。
二狗哈
22 天前
webgl
·
cesium
·
地图可视化
Cesium快速入门9:相机动画与交互
有同学问:“我能不能让镜头像坐飞机一样,‘嗖’地飞到天安门广场?” 当然可以!Cesium 已经帮我们封装好了 flyTo 方法,只要一行代码就能搞定。
二狗哈
23 天前
webgl
·
cesium
·
地图可视化
Cesium快速入门8:相机的方向与位置
同学们好!上节我们把坐标系“翻译官”学会后,今天专攻“摄影师”——相机。 记住一句话:地球没动,是我们在移动摄像机。想让镜头去哪儿、怎么看,全靠下面几个参数。
二狗哈
24 天前
webgl
·
cesium
·
地图可视化
Cesium快速入门4:天空盒
现在,我们先来看看地球场景里的“背景”——也就是天空盒。 有时候,默认的宇宙星空看着太黑、太科幻,我想换个更通透、更“天空”的感觉,比如蓝天白云、晨曦晚霞,行不行? 当然可以!这种背景就叫“天空盒”(SkyBox),换成银河、宇宙、晴空、晚霞,随你喜欢。
我是有底线的