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

ArcGIS API for JavaScript 4.x 教程（一）显示一张地图

news 2026/2/9 18:49:49

了解如何创建和显示带有基本地图图层的地图。

地图包含地理数据层。地图包含一个基本地图层，以及一个或多个数据层（可选）。可以使用地图视图显示地图的特定区域，并设置位置和缩放级别。
本教程将向您展示如何使用地形底图层创建和显示加利福尼亚州圣莫尼卡山脉的地图。
本教程中的地图和代码将用作其他二维教程的起点。

先决条件

您需要ArcGIS Developer或ArcGIS Online帐户才能访问仪表板并创建API键。

步骤

创建新笔

转到CodePen为您的地图应用程序创建新的笔。

添加HTML

定义一个HTML页面以创建一个具有web浏览器窗口全宽和全高的地图。
在CodePen>HTML中，添加HTML和CSS以创建带有viewDiv元素的页面。viewDiv是显示地图的元素，它的CSS重置任何浏览器设置，这样它就可以使用浏览器的全宽和全高。

<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body>
</html>

参考API

在＜head＞标记中，添加对CSS文件和JS库的引用。

<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>

添加模块

ArcGIS Maps SDK for JavaScript可作为AMD模块和ES模块使用，但本教程基于AMD。AMD require函数使用引用来确定将加载哪些模块——例如，您可以指定“esri/Map”来加载Map模块。加载模块后，它们将作为参数（例如Map）传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具简介指南主题。
在＜head＞标记中，添加＜script＞标记和require语句以加载Map和MapView模块。您也可以将JavaScript代码添加到CodePen>JS面板，而不是HTML面板。如果这样做，请删除＜script＞标记。

    <script>require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {});</script>

获取API密钥

访问ArcGIS服务需要API密钥。

转到您的开发人员仪表板以获取API密钥。
复制密钥，因为它将在下一步中使用。

创建地图

使用Map设置基础映射层并应用API密钥。
返回CodePen。
在require语句中，创建一个新的Map，并将basemap属性设置为arcgis地形。要启用对Basemap层服务的访问，请设置Map的apiKey属性。

        esriConfig.apiKey = "YOUR_API_KEY";const map = new Map({basemap: "arcgis-topographic" // Basemap layer service});

创建地图视图

使用MapView类可以设置要显示的地图的位置。
创建MapView并设置地图特性。要使地图视图居中，请将居中特性设置为-118.80500,34.02700，并将缩放特性设置为13。将容器属性设置为viewDiv以显示地图的内容。

        const view = new MapView({map: map,center: [-118.805, 34.027], // Longitude, latitudezoom: 13, // Zoom levelcontainer: "viewDiv" // Div element});

运行应用程序
在CodePen中，运行代码以显示地图。
该地图应显示加利福尼亚州圣莫尼卡山脉地区的地形基底层。

完整代码

<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.27/"></script><script>require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {esriConfig.apiKey = "YOUR_API_KEY";const map = new Map({basemap: "arcgis-topographic" // Basemap layer service});const view = new MapView({map: map,center: [-118.805, 34.027], // Longitude, latitudezoom: 13, // Zoom levelcontainer: "viewDiv" // Div element});});</script></head><body><div id="viewDiv"></div></body>
</html>

运行应用程序

在CodePen中，运行代码以显示地图。
该地图应显示加利福尼亚州圣莫尼卡山脉地区的地形基底层。

注明：翻译自esri，仅供个人查阅使用，侵删