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>