1.引入ArcGIS API for JavaScript库
首先，建立基本的html文档，然后在标签内，使用和标签引入ArcGIS API for JavaScript ：
html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D maptitle>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/">script>
head>
html>
2.加载模块
使用第二个标签从API加载特定的模块。使用以下代码段中的语法加载以下模块：
esri/Map -加载特定于创建地图的代码;
esri/views/MapView -加载允许以2D模式查看地图的代码;
<script>require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) {// Code to create the map and view will go here
});script>
全局require()函数(由Dojo提供)用于加载模块。Esri的JavaScript API构建在Dojo之上，以利用Dojo的模块化代码库以及协调跨浏览器差异的能力。
3.创建地图
使用新建一个地图Map，该地图是对从esri/Map模块加载的Map类的引用。您可以basemap通过将对象传递给Map构造函数来指定地图属性，例如。
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
});
其他底图的选项有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。通过修改basemap选项来使用备用底图。
4.创建2D视图
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
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
});
});
在此代码段中，我们将container属性设置为将保存地图的DOM节点的名称。该map属性引用我们在上一步中创建的地图对象。请参阅MapView文档，以获取您可以在视图上设置的其他属性，包括center和zoom，这些属性可用于定义视图的初始范围。
共有两种视图类型：MapView(用于查看2D地图)和SceneView(用于查看3D地图)。
5.定义页面内容与样式表
页面：
<body>
<div id="viewDiv">div>
body>
样式表：
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
style>
6.效果展示
图1 2D地图显示效果
7.完整源码
html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D maptitle>
<style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;
}style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/">script>
<script>require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {var map = new Map({basemap: "streets" //街道地图(包含全世界的高速公路数据)//basemap: "satellite" //卫星图//basemap: "hybrid" //卫星图(包含国家/地区边界)//basemap: "streets-navigation-vector" //世界导航地图//basemap: "topo-vector" //世界地形图//basemap:"terrain" //世界地形图//basemap:"osm" //OpenStreetMapLayer
});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
zoom: 4, // Sets the zoom LOD to 13
center: [108, 34], //使用经纬度设置视图中心点
});
});script>
head>
<body>
<div id="viewDiv">div>
body>
html>
ESRI官网示例：
1.Intro to MapView - Create a 2D map
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html
扫一扫
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
