1.引用arcgis api for javascript
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<link>
标签引用main.css
包含特定于 Esri 小部件和组件的样式的样式表。
<script src="https://js.arcgis.com/4.18/"></script>
<script>
标签从 CDN 加载 ArcGIS API for JavaScript
2.加载模块
<script>
require([ "esri/Map", "esri/views/MapView" ],
function(Map, MapView) {
// Code to create the map and view will go here
});
</script>
esri/Map
- 加载特定于创建地图的代码
esri/views/MapView
- 加载允许以 2D 方式查看地图的代码
全局 require() 函数(由 Dojo 提供)用于加载模块。Esri 的 JavaScript API 构建在 Dojo 之上,以利用 Dojo 的模块化代码库及其协调跨浏览器差异的能力。
3.创建地图
从esri/Map
模块加载的 Map 类的引用,使用basemap
将对象传递给 Map 构造函数来指定地图属性,例如
require(["esri/Map", "esri/views/MapView"],
function(Map, MapView) {
var map = new Map({ basemap: "satellite" });
});
4.创建二维视图
在 HTML 文件中查看充当容器的参考节点,允许用户查看 HTML 页面内的地图。通过MapView
将对象传递给其构造函数来创建新对象并设置其属性:
require(["esri/Map", "esri/views/MapView"],
function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
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>