本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout
专业处理视觉呈现的渲染库。 3D引擎从商业属性上分为：商业引擎和开源引擎，从业务领域上分为：游戏引擎、GIS引擎、仿真引擎等，部分引擎可能具备多种领域组合，开发语言涉及包括：C++、C#、Java、JavaScript、GLSL及各类脚本等。
最近参与了一个涉及流媒体信用卡交易数据并根据风险概率对其进行分类的项目。在此基础上，想探索可视化数据的选项。决定专注于地理方面，因为它是尝试识别欺诈性交易时的关键组成部分。
感觉网上已经有不少关于cesium的教程了，但是学习一个框架最快的办法就是熟悉其自带的实例了。cesium网站上提供了一系列实例，就想通过这些实例总结下学习cesium的知识；当然，如果有别的实例，也会一起总结。
Cesium支持加载影像图层，主要是各种地图服务。这里就通过Cesium实现添加影像地图和中文注记。
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。
创建vue3项目 这里使用的是vue的模版。如果选择其他框架，则不用加--template vue pnpm create vite vite+vue3+cesium --template vue
市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue
VM19:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Github: https://github.com/martinageradams/vue-cesium-example
1、新建一个文件夹，命名为first_cesium,在该文件夹下新建一个Build文件夹，将上一节我们下载的Cesium文件夹下Build文件夹---->Cesium文件夹下的文件全部拷贝到first_cesium---->Build文件夹。 2、VSCode打开first_cesium文件夹，并在根目录下新建index.html文件
概述： 案例：Cesium打包流程，相关技术点和大概流程 原理：代码优化的意义：压缩 优化 混淆 优化：如何完善Cesium打包流程 关键字：Cesium gulp uglifyjs 字数：2330 | 阅读时间：7min+ 1 Cesium打包流程 如果没有记错，Cesium从2016年初对代码构建工具做了一次调整，从grunt改为gulp。作为一名业余选手，就不揣测两者的差别了。个人而言，gulp和Ant的思路很相似，通过管道连接，都是基于流的构建风格，而且gulp更像是JS的编码风格，自带一种亲切感。
3D Tiles作为传输和渲染大规模3D地理空间数据的格式，应对的都是大规模数据的场景，Cesium提供了一个监视3D Tiles数据的监视器，可以通过这个监视器观察3D Tiles数据的效果。
Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果
3D Tiles是用于传输和渲染大规模3D地理空间数据的格式，例如摄影测量，3D建筑，BIM / CAD，实例化特征和点云等。与常规的模型文件格式相比，最大的特点就是包含了分层分户的瓦片，根据可视化需要呈现相应的细节，并且已经被纳入到OGC规范当中。
Cesium自带的3D Models示例，展示了如何加载glTF格式三维模型数据。glTF是为WebGL量身定制的数据格式，在网络环境下有自己的优点。可以在Cesium的源码包中找到一些该类型的数据。
为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。“远舢文龙数据处理平台”以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能力的首选产品。“远舢知识图谱平台”，作为国内第一批落地应用的“知识图谱”，平均缩短智能化应用开发周期70%，延长企业分析决策应用生命周期150%。“远舢Hybrid Twin”构建面向未来智能工厂全场景的全息交互模式，实现物理空间与数字空间的混合孪生。为国产工业AI新锐，以远舢工业云平台为核心，以AI驱动的方式，打造一个用户可以自研APP的智能云平台，变革未来企业IT消费模式，输送企业转型升级动能，为企业创造可量化价值。我们在这领域展示出来的强大产品竞争力，以及公司团队深耕制造、脚踏实地、坚持打造极致产品的理念，持续提供增值服务，我们期待和坚信远舢公司能成为未来企业级人工智能领域的独角兽！ 本文为选择合适的webGl框架，为后续项目奠定基础；避免盲目选择框架，导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点，适用范围，优缺点以及相关网址范例；以便于后续更快速的开发，提高生产效率，最后进行总结。
上一级我们实现了第一个三维地球，但是在这个页面上有很多小部件，我们不想让其显示，应该如何设置呢？这一节我们通过两种方式来隐藏小部件;先看下最终效果
https://cesium.com/docs/tutorials/getting-started/
从去年开始无脑接触 Cesium 三维 GIS 可视化，入坑之后一直到到现在，其实已经写了多个项目了，中间也遇到了很多坑点，很早就想分享其中所获了，只是觉得不太专业而且没有太多时间，拖到现在，从开始接触 Cesium ，加了一个QQ交流群，从刚开始的 200 人，到现在的 3000 人，好像使用 Cesium 做可视化方向的人越来越多了，并且其中很多人都是如我一样，从前端半路入坑
前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示，这只是数据可视化的一小部分，重要的应该是背后的数据生成及处理等。本文先为大家介绍这简单的部分。 一、 Cesium简介 Github地址：https://github.com/AnalyticalGraphicsInc/cesium。官方介绍如下： An open-source JavaScript library for world-class 3D
前言 做任何事情都不是想象中的那么简单。好久没有更新技术博客了，跟最近瞎忙有很大关系，虽说是瞎忙也抽空研究了些技术。 主要是前端渲染，像原生的WebGL和Cesium。WebGL写了几篇博客，自我感觉还可以。Cesium是一个封装好的WEB端3D Earth框架，有了WebGL的基础之后切换到Cesium按理说一切应该是顺理成章，简单的测试了几个功能之后发现确实非常好，简单的几行代码就可以实现Google Earth的功能，当然Google Earth重要的绝对不是他的渲染框架。 前期做了很多Geotrel
前言 本文为大家介绍几个Cesium的Demo，通过这几个Demo能够对如何使用Cesium有进一步的了解，并能充分理解Cesium的强大之处和新功能。其他的无需多言，如果还不太了解什么是Cesium
Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。下面我们将使用Sentinal-2二维贴图和Cesium世界地形，二者都需要ion的支持。
倾斜摄影转换工具：CesiumLab—下载地址：http://www.cesiumlab.com/
Cesium Widget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件，包含了非常丰富的组件内容。Cesium.CesiumWidget可以说是其简化版本，不包含动画、图层选择等等其他组件内容，仅仅显示一个三维数字地球。并且，默认情况下也不会包含Cesium地形的图层。之前网上很多的问题是关于如何在Cesium.Viewer组件中隐藏所有的元素，现在似乎直接用Cesium.CesiumWidget这个组件就可以了。
最先接触地图开发在09年做疯狂英语包会营官方网站，没有什么印象了，应该是没有啥进展。应该是到13年在 常盈的时候，用百度地图API做了很多的地图定制开发。比如一块去旅行的景点地图。同期看了高德地图，谷歌地图。最近一年用了maptalks来做地图开发。但是真如官方说是，现在是3D的时代，所以cesium是 必杀技了
Cesium的Camera案例，展示了其关于漫游器镜头的控制，能够调整视图的位置。这里改进了一下这个实例，使之能够展示一些自己关注的兴趣点的情况，并总结遇到的问题。
作者 | 刘燕，核子可乐 北京时间 8 月 3 日零时 18 分，飞行航班信息平台 Flightradar24 发布推文称，佩洛西搭乘的 C-40C 专机（呼号 SPAR19）在台北降落时有 70.8 万人进行实时追踪，SPAR19 创下 Flightradar24 平台实时追踪人数最高纪录。 当日凌晨 4 时 21 分，Flightradar24 发布推文称，这架呼号为 SPAR19 的飞机从吉隆坡起飞到降落在台北期间，有 292 万用户追踪了至少其中一段飞行航程动态。飞机降落时，有 70.8 万人进行实
1.首先下载Cesium库，地址：https://cesium.com/cesiumjs/
今天看了《百度终于也入了Cesium的坑》这篇文章，里面有关Cesium的评价，让我的阅读体验极度不悦，比如“但是无论从整个产品的成熟度以及可视化效果上来说，Cesium现阶段已经不能算是第一梯队的选择了，起码在可视化方向上。”，“整体上来说游戏引擎的效果和整个技术生态基本上可以吊打现在的Cesium，就是对于GISer来说上手门槛有点高。”，“所以现阶段，无论从哪个角度来看Cesium都不是一个值得长期投入的技术路线”。作者从自身的角度，比如产品，市场需求等方面，确实反映了Cesium产品的一些问题，但从技术角度，基于我自身的理解，无法认同这些观点。所以，也在此发表一下个人的意见，不对和不妥处请指正。
4、Cartographic（地理坐标系下经纬度的弧度表示），通常情况下通过它和WGS84坐标系之间互转。
很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。
homeButton 功能在实际的应用场景中很常见而且功能也很实用，该组件的主要功能是返回到系统初始化时的位置。默认是整个球的位置，如下图：
Mars3D平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 Mars3D产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。
Mapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。
因为项目需要，去做了三维模型加载的相关调研，发现Mars3D这样一个好用的框架，可以动态加载3DTiles三维模型，并且官方有详细的文档和规范的代码，很容易就可以上手。
如果你使用的是Vue + threejs或React + threejs技术栈，那么threejs就是一个js库，直接通过npm命令行安装就行。
技术在进步，如果半年不学习新技术，那么我就落后了。本教程将带你进入一个全新的技术世界，它叫做WebGL。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
JavaScript是单线程的，又是异步的，而最新的HTML5中，通过Web Workers可以在JS中支持多线程开发。这是几个意思？异步还是单线程，这怎么理解？Web Workers又是什么原理？实际开发中，异步和多线程之间如何交互？答案就在下面。主要涉及的内容有： 为什么异步解决不了问题 Worker又是什么玩法 Cesium中的异步+多线程框架 为什么异步解决不了问题 简单说，JavaScript是单线程的，简单易用，但如果遇到时间较长的任务时，则容易出现卡死的现象，为了避免这种问题，我们对时间久的
笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用的WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js所制作的，所以我就选择了three.js所。那么开始吧。
这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。
而会议中最令我眼前一新的当然是 轮子哥 Rich-Harris 带来的 Svelte Cubed 了。
首选肯定是Three.js 官方文档了，这是学习和使用Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。包含了各种功能的描述解读，还有很多示例和教程。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
首先明确最终web三维智慧城市的形态，在最近的项目中，我们接触到了一个县级城市的web三维城市可视化。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
