ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

阅读: 评论:0

ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

3D地图又叫场景。

由上一篇可知,

require入口函数的第一个参数是字符串数组

["esri/Map", "esri/views/MapView", "dojo/domReady!"]

这里,MapView就是2D的地图视图。

所以,将2D地图改为3D地图,其实很简单,只需要把这个字符串数组的第二个引用改为"esri/views/SceneView"

然后在第二个参数中修改对应的view代码即可。

下面给出第二个参数(函数)的新代码

function(Map, SceneView){var map = new Map({basemap: "osm", ground: "world-elevation"});//仍然使用osm基础地图var view = new SceneView({container: "viewDiv",     map: map,               scale: 50000000,         center: [113.5, 30] });//比例尺为1:5000万
}

这里可以发现,view对象不是MapView类了,而是SceneView类。

而且Map对象构造函数内出现了一个新的东西——ground。

下面是ground的资料:

ground属性是表面数据,它可以是Ground类的实例。

下面是SceneView类的资料:

SceneView与MapView同样继承自View类。SceneView

同样的,给出完整的html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with SceneView - Create a 3D map</title>
<style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}
</style>
<link rel="stylesheet" href=".2/esri/css/main.css">
<script src=".2/"></script>
<script>
require(["esri/Map","esri/views/SceneView","dojo/domReady!"
], function(Map, SceneView){var map = new Map({basemap: "osm",ground: "world-elevation"});var view = new SceneView({container: "viewDiv", map: map, scale: 50000000, center: [113.5, 30]  });
});
</script>
</head>
<body><div id="viewDiv"></div>
</body>
</html>
显示3D地图

运行成功大概是这样的(稍微修改了比例尺为15万,坐标为114.3和30.5没错就是武汉)

 


 

      ps:如果感觉像平面的话可以把比例尺调回500w或者1000w,地面起伏不太明显可以调basemap为别的地图,坐标定位到山区。

转载于:.html

本文发布于:2024-02-03 05:12:45,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170690836548878.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:学习笔记   地图   API   ArcGIS   JavaScript
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23