快捷搜索:  汽车  科技

三维可视化js库(开源软件分享-基于JS的三维地图)

三维可视化js库(开源软件分享-基于JS的三维地图)原生支持多种三维几何对象:CesiumJS 支持点、线、虚线、管道、走廊、墙、平米、Box盒子、矩形、圆柱椭圆、圆锥、球体、模型等,通过API可以很方便的绘制这些对象。天地图是国家地理信息公共服务平台,我们申请账号就可以调用天地图里面的服务了,里面包括很多API服务,例如矢量底图、影像底图、地形渲染、全球地形图、以及数据API(水系要素、道路要素、交通要素、居民地要素)支持自定义底图设置:所谓底图就三维地图的背景底图,cesiumJs支持在线底图和自定义离线底图设置,在线底图支持加载天地图、谷歌、高德、百度、腾讯、微软bing、ArcGis等。加载天地图底图同时支持地形图设置,我们可以从天地图加载全国或者全球地形图。这里先科普一波,啥是天地图。

最近一个朋友的一个项目需要在web上实现三维地图的功能,并且要能将车辆等3D模型放置在三维地图上进行数据驱动,动态参数展示等功能。朋友问我有什么可行的技术方案没有,于是我给他推荐了cesiumJs这个开源的Web三维地图框架,以前在某个项目中使用过,虽然踩过坑但是最终都解决了 感觉cesiumJs还不错。

三维可视化js库(开源软件分享-基于JS的三维地图)(1)

web gis

cesiumJs简介

cesiumJS 是一个开源 JavaScript 库,采用Apache 2.0协议进行开源,可以免费用于商业和非商业项目 当前最新版本 1.7.6 于2020.12.01发布。不想花钱的小伙伴们有福了,如果正需要实现三维地球地图功能的话。CesiumJS 可以不依赖任何插件在Web 浏览器中创建 3D或者是2D 地图,它使用 WebGL 进行硬件加速图形,并且能跨平台跨浏览器,实现动态数据可视化。

三维可视化js库(开源软件分享-基于JS的三维地图)(2)

CesiumJS 官网三维模拟驾驶示例

cesiumJs功能介绍

支持自定义底图设置:所谓底图就三维地图的背景底图,cesiumJs支持在线底图和自定义离线底图设置,在线底图支持加载天地图、谷歌、高德、百度、腾讯、微软bing、ArcGis等。

三维可视化js库(开源软件分享-基于JS的三维地图)(3)

加载天地图底图

同时支持地形图设置,我们可以从天地图加载全国或者全球地形图。这里先科普一波,啥是天地图。

天地图是国家地理信息公共服务平台,我们申请账号就可以调用天地图里面的服务了,里面包括很多API服务,例如矢量底图、影像底图、地形渲染、全球地形图、以及数据API(水系要素、道路要素、交通要素、居民地要素)

原生支持多种三维几何对象:CesiumJS 支持点、线、虚线、管道、走廊、墙、平米、Box盒子、矩形、圆柱椭圆、圆锥、球体、模型等,通过API可以很方便的绘制这些对象。

三维可视化js库(开源软件分享-基于JS的三维地图)(4)

绘制河流

支持多种模型的加载:CesiumJS 支持gLTF模型、3D Tiles模型、传统BIM模型。如果是3Dmax等模型可以通过搜索相关转换工具转转为gLTF/3D Tiles等模型格式。

三维可视化js库(开源软件分享-基于JS的三维地图)(5)

CesiumJS官网示例-3D Tiles模型

相机及视角:CesiumJS支持设置相机和视角,另外自带飞行漫游功能,可以灵活的制作出诸如在三维地形上进行轨迹放回,实时移动等功能

三维可视化js库(开源软件分享-基于JS的三维地图)(6)

CesiumJS官网示例-模拟飞行

场景控制:通过CesiumJS的场景功能我们可以在三维地图上模拟,雨雪雾等天气效果

三维可视化js库(开源软件分享-基于JS的三维地图)(7)

卫星天气仿真

应用场景

朋友说,在网上了解到three.js也还不错,这个跟CesiumJS哪个好点。 其实这个得看应用场景,你的项目如果只是三维相关跟GIS没有关系的话,直接用three.js就好了,其三维功能已经很强大了;如果你的项目跟GIS相关并且需要三维展示的话,建议用CesiumJS毕竟其定位就是一个强大的三维webgis,难不成你想用three.js实现一套三维GIS不成。

CesiumJS应用场景比如:航空航天到智能城市到无人机,到大屏展示,可以使用 CesiumJS 创建交互式 Web 应用程序来共享动态地理空间数据。甚至现在流行的BIM GIS融合的应用场景,都可以尝试用CesiumJS弄一弄,当然如果愿意花钱买商业方案更好,开源的毕竟有很多坑要自己踩。

后记

今天的介绍就到这里,感兴趣的小伙伴们可以自行前往github上下载体验吧

cesium:github.com/CesiumGS/cesium

Latest release 1.76: github.com/CesiumGS/cesium/releases/tag/1.76

猜您喜欢: