Mars3D三维可视化平台

鱼找水需要时间
302 阅读4分钟

文章目录


Mars3D三维可视化平台 是火星科技 (opens new window)研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于 Cesium (opens new window)优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。

Mars3D平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 Mars3D产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。

Mars3D官网

Mars3D的发展历程

2017年9月发布第一个版本，至今已发展5年多，一直在优化和迭代新版本和功能，进步永不停歇。

Mars3D在GIS体系中的定位

GIS的三层划分（数据、服务、客户端）：

在这里插入图片描述

Mars3D属于“客户端”层面的 “Web浏览器端”+“三维” 的应用开发平台

在这里插入图片描述

Mars3D的整体组成

平台主要由： SDK类库、功能示例、项目模板 共3大部分组成。这些资料均免费开放，并可下载离线本地使用。

Mars3D可以做什么？

通过Mars3D提供的Javascript API，可以实现以下功能：

  1. 三维场景可视化

提供多种时空数据，包括影像、高程、矢量、实景、三维模型等各类数据的叠加融合、支持包括OGC、TMS、MapBox、3DTiles等标准服务与数据的接入加载。逼真地呈现三维地形、倾斜摄影、BIM、人工精模等多种类型的三维场景。

在这里插入图片描述

  1. 数据标绘与管理

提供支持包括点、线、面、体、模型、军事标绘等多种矢量数据的标绘的使用与管理，提供多图层的标绘管理、提供矢量数据的统一风格的API调用和style样式设置，可导出导入标准GeoJSON格式数据。

在这里插入图片描述

  1. 场景与数据特效
    提供了多种环境特效，包括雨雪雾、光照、大气层、泛光、夜视等效果；也支持包括粒子、动态点、流动线、闪烁、扫描等多种特效，增强了应用场景的表达能力。提供了视频融合、水利水域、卫星仿真等多行业应用支持。

在这里插入图片描述

  1. 场景工具

提供了Popup鼠标单击弹窗、Tooltip鼠标移入弹窗、右键菜单的内置工具，可以方便的对地图、图层、数据进行绑定和交互。提供了状态栏、导航球、比例尺、分屏比对、卷帘比对等多种场景工具；提供空中、室内、行人步行、车辆贴地等多种飞行漫游路线功能；

在这里插入图片描述

5.空间分析能力

提供了包括距离、面积、高度、角度、剖面、体积等多种量算分析功能；提供通视、可视域、缓冲、日照、坡度坡向、淹没分析功能；提供了等高线、天际线、地表透明、地形开挖、模型剖切、模型裁剪、模型开挖等功能。

在这里插入图片描述

  1. 高度兼容第三方

提供对ArcGIS、OGC、SuperMap、各类在线地图、百度高德服务等各类第3方地图与服务的全面支持。提供对truf、heatmap、mapv、echarts等常用可视化库和开源库的功能接入集成，避免用户的重复学习和成本投入。提供对所有基于Cesium的第3方开发包和插件的接入支持，具备灵活的兼容性和功能解耦。

在这里插入图片描述

我的第一个Mars3D程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title>
    <!--引入cesium基础lib--> 
    <link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
    <!--引入mars3d库lib-->
    <link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script>   
    <style>
      html, body, .mars3d-container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
    <div id="mars3dContainer" class="mars3d-container"></div>
    <script type="text/javascript">
      var mapOptions = {
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      };
      var map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
    </script>
  </body>
</html>

运行效果：

在这里插入图片描述

完整代码已上传 Gitee

到此，本章内容就介绍完啦，如果有帮助到你 欢迎点个赞👍👍👍吧！！您的鼓励是博主的最大动力！ 有问题评论区交流。

avatar
文章
阅读
粉丝