ArcGIS API for JavaScript创建 3D 地图

1.引用ArcGIS API for JavaScript

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
//<script>标签从 CDN 加载 ArcGIS API for JavaScript
<script src="https://js.arcgis.com/4.18/"></script>
//<link>标签引用main.css包含特定于 Esri 小部件和组件的样式的样式表

2. 加载模块

<script>
  require([ "esri/Map", "esri/views/SceneView" ], function(Map, SceneView) {
    // Code to create the map and view will go here
  });
</script>


esri/Map - 加载特定于创建地图的代码

esri/views/SceneView - 加载允许以 3D 方式查看地图的代码

3. 创建地图

require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {
  var map = new Map({
    basemap: "topo-vector",
    ground: "world-elevation"
  });
});

4.创建 3D 视图

require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {
  var map = new Map({
    basemap: "topo-vector",
    ground: "world-elevation"
  });
  var view = new SceneView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});

5.定义页面内容

<body>
  <div id="viewDiv"></div>
</body>

6. 设计页面

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值