用arcgis for javascript 开发一个三维地图（入门案例）

news2024/11/17 15:39:34

效果如图：
在这里插入图片描述

详细的步骤就不啰嗦介绍了，大家可以参考上一篇文章二维地图入门案例，这里只是改了一点引用和属性而已。

核心代码：

SceneView 用于创建三维地图

require([“esri/Map”, “esri/views/SceneView”]

这里提一句有两种可用的视图：esri/views/MapView模块中的 MapView用于创建2D 地图和esri/views/SceneView模块中提供的 SceneView用于创建3D地图

map中的ground属性
ground默认类型是这个’world-elevation’世界高程服务, 它还有其他类型如： "none"、"world-elevation"、"world-elevation-stencil"、"map-ground"、"map-surface"、"tile-ground" 等

const map = new Map({
     basemap: "topo-vector", // 将地图的底图设置为矢量地图
     ground: "world-elevation" // 将地图的地形设置为世界高程服务
 });

这里介绍一下这个ground
在 ArcGIS for JavaScript 中，Map 对象的ground属性主要用于控制 3D 场景中的地表，包含以下属性：

opacity：地表的不透明度，取值范围为从 0 到 1 的浮点数。
surfaceColor：地表颜色，可以是一个 RGB 或 RGBA 颜色值。
elevation：地表的海拔高度值，可以是一个数字或者返回数字的函数。
layers：地表图层信息，可以设置多个图层来实现不同的地表效果。
show：设置是否显示地表，默认为 true，即显示地表。
visible：设置地表是否可见，默认为 true。
type：地表类型，可以是 “none”、“world-elevation”、“world-elevation-stencil”、“map-ground”、“map-surface”、“tile-ground” 等。
relativeToGround：设置地表的高度是否相对于地球表面而言，默认为 true。
wrapAround180：设置地表是否和地球一样进行 180 度的旋转，默认为 true。

例如我们要改变一下ground的颜色：
只需要这样设置一下就行：

map.ground.surfaceColor = “#004c99”;

如图：

在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>三维地图</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector", // 将地图的底图设置为矢量地图
          ground: "world-elevation" // 将地图的地形设置为世界高程服务
        });
        const view = new SceneView({
          container: "viewDiv", // 将创建的div元素赋值给container属性
          map: map, // 将创建的地图对象赋值给map属性
          scale: 50000000, // 设置比例尺
          center: [-101.17, 21.78] // 设置中心点
        });
        // 改变ground得颜
        // map.ground.surfaceColor = "#004c99"; // 放开这行代码时要将map中的basemap属性屏蔽掉才能看到效果。
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>