- 原文 https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/
- 翻译时间 2023.04.23
前言
在这个教程中,我们将会学习如何创建2D地图视图(MapView)。
注意:这篇文章使用AMD模块,你也可以下载一个兼容ES模块的示例,该示例使用Vite.js来创建本地构建
如果想了解关于不同API模块的区别,可以看这篇文章。
一、引用ArcGIS Map SDK for JavaScript
名词解释:
JS——JavaScript
SDK——Software Development Kit,指的是某种计算机语言的一系列开发工具
ArcGIS Map SDK for JavaScript就是ArcGIS为JS编写的一个地图API。
第一步就是初始化一个HTML文件,类似下面代码:
<!DOCTYPE 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 map</title>
</head>
</html>
我们需要在<Head>
标签中,通过<script>
和 <link>
标签引入ArcGIS Map JS SDK:
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<script>
标签通过CDN加载了ArcGIS Map JS SDK。如果出现了版本更新,可以通过修改代码中引用的版本号,来获取最新版本。
<link>
标签实现了对于main.css
的引用,这个css包含了Esri控件和组件样式特性。(译者注,就是官方必备的CSS样式,原文说的比较啰嗦)
2. 加载模块
使用另一个<script>
标签去加载特定的API模块。
esri/Map
用来加载特定代码以便创建一个Map对象
esri/views/MapView
用来创建一个2D地图
使用方法如下:
<script>
require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
// 这里是回调函数,可以操作创建好的对象
});
</script>
示例中的JS代码放在了HTML脚本中,但对于大型项目来说这种做法并适合,应该放在单独的JS文件中
全局的require()
方法用来加载API的AMD模块。对于不同模块的区别,可以访问这个链接来查看教程。
3. 创建Map对象
一张地图使用的是Map对象,这个对象来自esri/Map
模块的Map类。在创建Map对象的过程中,我们可以在构造函数中定制它的属性,例如可以修改basemap
底图。
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
});
其他的参数包括: satellite, hybrid, gray-vector, dark-gray-vector, oceans, streets-vector, osm, national-geographic, streets-night-vector
。在沙盒中更改basemap属性,就可以切换底图。
4. 创建2D视图(View)
作为HTML文件中的容器,视图引用结点(View)允许用户在HTML中嵌入一张地图。通过对象的构造函数,我们可以创建新的MapView
并且设置它的属性:
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const 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
});
});
在这个小节中,我们为DOM结点设置一个容器属性(container
),以便让它能够承载地图,因此我们给div
标签添加一个id
属性。地图视图的map属性实际上引用的就是上一步中我们创建的map对象。
可以点击MapView documentation来查看此视图的其他属性,例如center(中心)
和zoom(缩放)
,这些属性用来定义视图的初始范围。
视图共有两种:地图视图
MapView
用来显示2D地图,场景视图SceneView
用来显示3D视图,点击这篇文章可以学习使用3D视图。
5. 定义页面内容
到目前为止,我们已经写好了负责创建map对象和view视图的JavaScript代码。
(译者注,如果搞不清楚这几个对象的关系,可以理解成:最下层是map对象,map对象的上层是view视图,view视图的上层是layer图层,图层有很多层。
所以无论使用2D还是3D,都要先创建map,基于map创建view,最后在view上绘制layer即可)
下一步我们就来添加HTML以便展示我们的地图。HTML的写法非常简单:先写一个<body>
标签,然后在<body>
标签中想要显示这个视图的位置放一个<div>
标签
<body>
<div id="viewDiv"></div>
</body>
其中,<div>
标签的id,必须与前面MapView中container
属性的字符串相匹配。
6.为页面设置样式
样式的代码写在<style>
标签中,<style>
标签需要被<head>
标签包裹,当然,你也可以根据自己的习惯,把样式写在单独的CSS文件中,与普通的前端开发别无二致。
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
到目前为止,我们使用ArcGIS Maps SDK for JavaScript 4.26!
完成了一个2D地图应用,最终的代码效果类似下面:
<!DOCTYPE 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 map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<script>
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv", // Reference to the view div created in step 5
map: map, // Reference to the map object created before the view
zoom: 4, // Sets zoom level based on level of detail (LOD)
center: [15, 65] // Sets center point of view using longitude,latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>