zl程序教程

您现在的位置是:首页 >  IT要闻

当前栏目

Mars3D三维可视化平台

2023-03-07 09:41:01 时间

文章目录

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

到此,本章内容就介绍完啦