[ol-cesium]二三维联动 | 基于2019肺炎疫情的数据可视化

最新推荐文章于 2024-05-16 09:41:45 发布
最新推荐文章于 2024-05-16 09:41:45 发布
阅读量2.9k 收藏 22
点赞数 2
分类专栏： GIS开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40902527/article/details/104286497
版权

说明：

最近在学olCesium二三维联动框架，便基于该框架写了一个肺炎疫情的可视化示例

二维部分：专题图，热力图，echart图

三维部分：雷神山模型

功能比较简单，数据也只更新到2月12号，感兴趣的在文末有github地址。

数据：基于丁香园提供的数据

框架：ol-cesium 

大屏UI：传送门

先上效果图

界面效果

 

功能比较简单，数据接口需要替换一下

数据爬虫接口本地部署的 https://blog.csdn.net/weixin_40902527/article/details/104366065

github地址：传送门

啊嘞嘞嘞嘞
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【ol-cesium】OpenLayers与Cesium的二三维联动
不爱赖床的懒虫博客
07-18 5695
关于OpenLayers与Cesium相互联动的功能其实有很多方法，但是网上的方法大多指向了ol-cesium，可直接将OpenLayers中的图层map直接调用，无需修改二维场景下的图层细节，减少开发难度。地图上下文（边界框和缩放级别）；栅格数据源；2D和3D的矢量数据源；地图选择（选定项目）；地图和地球视图之间的动画过渡。ol-cesium官网地址。..................
cesium和leaflet的二三维联动
u010723516的博客
12-17 5100
最近做个项目，要实现二三维联动。二维是基于leaflet的地图，三维是基于cesium，webgl的场景。要实现的是，平移、缩放二维地图时，三维跟着平移缩放，反过来也一样。 一 问题界定 总体看，一共三个问题。 1 要解决二维三维循环联动的问题。就是说，不能拖动二维，三维跟着动，然后二维再跟着三维动，无限循环。 2 二维和三维的平移联动 3 二维和三维的缩放联动 ...
探索空间维度：OL-Cesium —— 开源2D/3D地图同步库
最新发布
gitblog_00065的博客
05-16 358
探索空间维度：OL-Cesium —— 开源2D/3D地图同步库 项目地址:https://gitcode.com/openlayers/ol-cesium 项目介绍 OL-Cesium 是一个令人惊叹的开源库，它将流行的 OpenLayers 与强大的 Cesium 球形可视化引擎无缝集成。这个项目允许你在同一应用中轻松地在二维地图和三维地球之间切换，并保持数据的实时同步，为开发者提供了一个全新...
ol-cesium：OpenLayers-Cesium集成
01-28
OpenLayers-Cesium集成库。 请使用您的地图和可视化它与一个地球。 查看。 ES6模块 从2.0版开始，该代码完全基于ES6模块和语法。 它需要OpenLayers5.x。 npm上提供了一个方便的ES6软件包olcs 。 特征 在2D和3D之间平滑切换并同步： 地图上下文（边界框和缩放级别）； 栅格数据源； 2D和3D中的矢量数据源； 地图选择（选定项目）； 地图和地球视图之间的动画过渡。 该库是可配置和可扩展的，并允许： 延迟或渴望加载铯 限制铯资源消耗（空闲检测） 有关EPSG：4326和EPSG：3857以外的投影中的地图的同步，请参见分支。 集成到您的应用程序中 在您的应用程序中有几种使用OL-Cesium的方法。 作为ES6库（推荐方法） npm i --save olcs 然后导入您需要的零件。 例： import OLCesium from 'olcs/OLCesium.js' ; const ol3d = new OLCesium ( { map : ol2dMap } ) ; // ol2dMap is the ol.Map in
疫情航班同程数据三维可视化
SuperMap技术控
03-27 1257
前言 最近，中国的新冠肺炎疫情情况已经得到了控制，社会各个行业正在逐步恢复秩序。疫情期间，有的朋友为了帮忙寻找同程人员，自发做了一个在线的同程查询网站。于是想到，若用超图三维的WebGL产品展示这些数据，效果能够更直观，因此写了这边博客，本文只暂时航班同程数据情况 数据 同程数据来源：http://2019ncov.nosugartech.com/ 超图在线地理编码服务：https://www.s...
二三维联动思考
weixin_34248487的博客
05-06 401
二三维联动实现方法，采用MVP结构。Map和Globe（Scene中不容易实现，当然不是不行），这里假设有两个窗体frmMap和frmGlobe。 1.委托方法 在frmMap中定义一个事件变量a，在MapControl的ExtentChanged事件函数中，判断事件a非空，触发事件。 在frmGlobe中定义一个事件变量b，在GlobeControl的ExtentChanged事件函数中，...
二三维联动
08-09
解决3D初学者 二三维联动的问题 AreEngine C#开发 适合刚上班的同学参考和学习
实现openlayers-Cesium二三维联动效果的功能脚本1
11-21
该脚本能够实现openlayers-Cesium二三维联动效果的功能
ol-cesium-webpack-example:基于带有Webpack的官方Cesium示例的基于Webpack的OL-Cesium原型
05-01
通过深入学习`ol-cesium-webpack-example`，你不仅可以掌握使用Webpack管理和优化大型项目的方法，还能了解如何在OpenLayers中集成Cesium，为你的Web应用增添三维视觉效果。这将为你的Web开发技能树添上浓墨重彩的一...
基于Cesium框架的智慧矿山三维可视化应用平台搭建-论文
07-08
Cesium可视化开源开发框架能够在虚拟的三维地球场景中叠加不同类型的矢量和模型信息以实现空间分析和可视化三维场景的构建，同时，还支持在浏览器端无需插件地显示与交互。基于Cesium开发框架和智慧矿山的应用需求，...
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
总之，这个基于React hooks、Typescript和Cesium的三维WebGIS实战教程，将帮助你提升WebGIS开发技能，理解如何在现代前端框架下集成复杂的3D可视化工具，为你的项目增添更多可能性。通过学习和实践，你将能够创建出...
二三维联动 SkyLine+Arcgis Engine
07-29
简单实现SkyLine+Arcgis Engine 二三维联动 ，加载图层联动，删除图层联动。地图操作联动。仅供参考（实际坐标转换自行解决）
ol-cesium-v1.34
02-03
基于openlayer3和cesium的实现在三维空间展示地理数据的引擎库
OpenLayers扩展插件系列之ol-cesium，ol-cesium库介绍和使用，OpenLayers地图中如何集成ol-cesium插件，html网页和vue中如何集成ol-cesium到地图中
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-20 681
ol-cesium是一个将OpenLayers与Cesium（一个基于 WebGL 的虚拟地球引擎）集成的库，可以在 OpenLayers 中使用 Cesium 提供的 3D 地图功能。ol-cesium允许开发者在 OpenLayers 的 2D 地图之上添加 Cesium 提供的强大的三维地球可视化功能，从而实现 2D 和 3D 地图的混合展示。3D 地球展示：将 Cesium 的全球三维地球嵌入到 OpenLayers 的地图中，实现在同一个地图应用中切换 2D 和 3D 地图视图。
cesium js 路径_Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例
weixin_28871885的博客
12-13 832
01开发环境准备利用Cesium API进行二次开发属于Web前端开发范畴，目前比较火的Web三剑客包括React、Vue、AngularJS，每个js库的详细介绍可转至官网查看，在此不做详细介绍。本次开发环境是基于Vue搭建的，需要安装(部署)的软件主要包括以下几种：分类名称IDEVS Code浏览器ChromeWeb服务器nginx包管理器node前两个下载后安装即可，注意VS Co...
二三维联动技术总结
Data World
12-27 7388
ArcEngine开发之MapControl与SceneControl的二三维联动（采用C#） 关键代码：
Cesium学习笔记（三）创建实例
Lafiteee的博客
12-05 1254
第一个实例 用矩形绘出俄怀明州（Wyoming）的范围： var viewer = new Cesium.Viewer('cesiumContainer'); var wyoming = viewer.entities.add({ polygon : { //hierarchy定义矩形环，Cartesian3:直角坐标 hierarchy : Cesium.Cartesian3.fromDegreesArray([ -109.0
cesium-二三维联动优化(ol-cesium)
孙霸天的专栏
01-17 5193
cesium-二三维联动优化(ol-cesium) 之前已经实现了ol和cesium联动的效果了，但还是有点问题：cesium和ol平面视角联动还算正常的，但是当cesium为三维视角时联动的效果就出现问题。 这里使用ol-cesium来实现完善的联动效果 ol-cesium 介绍 在 2D 和 3D 之间平滑切换并同步： 地图上下文（边界框和缩放级别）； 栅格数据源； 2D 和 3D 的矢量数据源； 地图选择（选定项目）； 地图和地球视图之间的动画过渡。 ol-cesium官网地址 安装 我这里使用的
skyline开发的三维联动实现的思路是什么，谁知道？
huating0513_的专栏
02-24 394
<br />skyline 二次开发实现三维联动效果。
cesium二三维联动
07-27
Cesium是一个开源的JavaScript库，用于创建基于Web的地球和地理空间应用程序。它提供了强大的功能，使开发者能够在浏览器中构建交互式的三维地球和二维地图应用程序。 Cesium支持二三维联动，也就是可以在三维地球上同时显示二维地图，并且二维地图上的变化可以反映到三维地球上。这种联动可以通过在Cesium中添加ImageryLayer对象来实现。ImageryLayer对象可以加载各种类型的地图图层，包括基于影像瓦片的二维地图。 要实现二三维联动，首先需要在Cesium中创建一个二维地图图层。可以使用Cesium提供的ImageryLayer对象或者使用第三方地图服务的图层。然后，将这个二维地图图层添加到Cesium的Viewer对象中。这样，当用户在二维地图上进行操作时，比如平移、缩放或者切换图层，这些变化将会自动应用到Cesium中的三维地球上。 通过这种方式，你可以实现二三维联动，让用户在三维地球和二维地图之间进行无缝切换和交互。这对于一些需要同时展示大范围地理数据和详细地理信息的应用非常有用，比如地理信息系统、地图应用和可视化分析等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值