当前位置：首页 > news >正文

ArcGIS Maps SDK for JS（二）：MapView简介----创建2D地图

news 2025/9/10 12:36:54

文章目录

1 AMD 引用 ArcGIS Maps SDK for JavaScript
2 加载相应模块
3 创建地图
4 创建 2D 视图 view
5 确定页面内容
6 CSS 样式
7 完整代码

本教程使用 AMD 模块，指导您如何在二维地图视图中创建一个简单的地图。

1 AMD 引用 ArcGIS Maps SDK for JavaScript

在 <head> 标记内，使用 <script> 和 <link> 标记引用 ArcGIS Maps SDK for JavaScript：

<!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><!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /><!-- 引用 main.css 样式表 --><script src="https://js.arcgis.com/4.27/"></script></head>
</html>

<script> 标记从 CDN 加载 ArcGIS Maps SDK for JavaScript。当新版本的 API 发布时，更新版本号以匹配新发布的版本。

<link> 标签引用 main.css 样式表，其中包含 Esri 部件和组件的特定样式。

2 加载相应模块

在<body>标签内的 <script> 标签中，从 API 加载特定模块。使用下面代码段中的语法加载以下模块：

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

将 JavaScript 代码放在<script>标签内对于创建简单页面或进行实验非常有用，但不适合大型应用程序。在构建大型应用程序时，所有 JavaScript 都应放在单独的 .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"});
});

其他 basemap 包括：

satellite(卫星)
hybrid(混合)
gray-vector(灰色矢量)
dark-gray-vector(深灰色矢量)
oceans(海洋)
streets-vector(街道矢量)
osm
national-geographic(国家地理)
streets-night-vector(街道夜景矢量)。

4 创建 2D 视图 view

将视图 Views 作为 HTML 文件容器的节点引用，允许用户在 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 viewmap: map // References the map object});
});

在此代码段中，我们将 container 属性设置为容纳地图的 DOM 节点的名称，在本例中，我们使用了 <div> 元素的 id 属性。map 属性引用我们在上一步中创建的地图对象。有关可在视图上设置的其他属性（包括地图中心 center 和缩放 zoom），请参阅 MapView 文档，这些属性可用于定义视图的初始范围。

有两种类型的视图可用：地图视图（用于查看二维地图）和场景视图（用于查看三维地图）。单击此处了解更多有关使用 3D 视图创建地图的信息。

5 确定页面内容

现在，创建map和view所需的JavaScript已经完成！下一步是添加用于查看地图的相关HTML。

对于这个例子，HTML非常简单：添加一个<body>标记，它定义了在浏览器中可见的内容，并在将创建视图的body中添加一个 <div> 元素。

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

<div> 的 id 为 viewDiv，以匹配在构造函数中传递给 MapView 中的 container 容器属性的 id。

6 CSS 样式

使用 <head> 标签内的 <style> 标签为页面内容设置样式。要使地图充满浏览器窗口，请在页面 <style> 标签中添加以下 CSS：

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

7 完整代码

代码：

<!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><!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /><!-- 引用 main.css 样式表 --><script src="https://js.arcgis.com/4.27/"></script></head><body><!-- 存放地图内容的div --><div id="viewDiv"></div><script>require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {// 创建Map对象，指定地图const map = new Map({basemap: "topo-vector"});// 创建MapView对象const view = new MapView({container: "viewDiv", // viewDiv为容器div的idmap: map, // 地图所在的Map对象zoom: 4, // 初始LOD缩放等级（0-23） level of detail (LOD)// scale: 50000000, // 设置初始比例尺为 1:50,000,000  zoom和scale选其一即可center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]});});</script>
</body></html>