【1】GIS快速上手初识三维地图

最新推荐文章于 2024-10-29 19:42:17 发布

晚睡要秃头

最新推荐文章于 2024-10-29 19:42:17 发布

阅读量645

点赞数

文章标签： arcgis javascript 学习前端 3d

本文链接：https://blog.csdn.net/qq_44971635/article/details/127969968

版权

一、常见的gis平台
1、ESRI ArcGis平台
2、超图SuperMap平台
3、Skyline平台
4、开源gis平台
二、GIS坐标系
①二维WebGIS的地图结构：
1、栅格底图图层
2、矢量图层
②三维WebGIS的地图结构：
地形图层
栅格底图图层
三维模型层
矢量图层
三、基础数据结构
①矢量数据
利用坐标轴哦(点、线、面)
②栅格数据
利用二维矩阵的形式来表示空间地物或现象分布的数据组织方式
gis数据来源：人工手制或建模、测绘仪器、航拍、其他
开源gis平台：Openlayers、Leaflet、MapboxGL、Cesium等

绘制简单三维地图：

步骤：

获取Mars3D
引入Mars3D
定义Mars3D高宽的 DOM 容器
使用new mars3d.Map (opens new window)初始化一个 mars3d 实例并通过传入 mapOptions 参数生成一个简单的三维地球

<!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>