ArcGIS API for JavaScript 4.x 教程（三）显示自定义底图样式

了解如何访问和显示地图中的样式化矢量底图图层。

样式化底图图层是一组样式，您可以定义这些样式以覆盖默认底图图层服务矢量切片图层样式之一。这些用于创建和显示具有您自己的自定义样式、标注和颜色的地图或场景。要创建样式化底图图层，可以使用 ArcGIS 矢量切片样式编辑器。编辑器将您的样式作为具有项目 ID 的图层项目存储在 ArcGIS 中。

在本教程中，您将使用项目 ID 访问和显示地图中的样式化矢量切片图层（森林和公园画布）。您还可以添加图像切片图层（世界山体阴影）以增强可视化效果。这两个图层都托管在 ArcGIS Online 中。

注意
要了解如何设置您自己的底图样式，请访问地图 API 和位置服务指南中的底图图层和样式和数据可视化。要了解有关服务的详细信息，请访问底图图层服务。

步骤

创建新笔

要开始使用，请完成显示地图教程或使用此笔。

设置 API 密钥

要访问 ArcGIS 服务，您需要一个 API 密钥。

转到仪表板以获取 API 密钥。

在 CodePen 中，将 apiKey 设置为您的密钥，以便可用于访问底图图层和位置服务。

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

添加模块

在 require 语句中，添加底图、矢量切片图层和切片图层模块。

  require(["esri/config","esri/Map","esri/views/MapView","esri/Basemap","esri/layers/VectorTileLayer","esri/layers/TileLayer",], function(esriConfig, Map, MapView, Basemap, VectorTileLayer, TileLayer) {esriConfig.apiKey = "YOUR_API_KEY";

创建矢量切片图层

您可以通过引用底图图层的项目 ID 来访问底图图层。您可以通过使用 ArcGIS Online 或 ArcGIS 矢量切片样式编辑器访问图层来查找图层的项目 ID。

转到 ArcGIS Online 中的森林和公园画布矢量切片图层并查找其项目 ID。该 ID 位于 URL 的末尾。

在 CodePen 中，创建一个新的 VectorTileLayer 对象，并将其 portalItem id 属性设置为 d2ff12395aeb45998c1b154e25d680e5，并将 opacity 属性设置为 0.75。

  const vectorTileLayer = new VectorTileLayer({portalItem: {id: "6976148c11bd497d8624206f9ee03e30" // Forest and Parks Canvas},opacity: 0.75});

创建图像切片图层

使用 ArcGIS Online 查找世界山体阴影影像切片图层的项目 ID，然后使用它访问该图层。图像切片图层将用于通过地形在视觉上增强样式。

转到 ArcGIS 中的世界山体阴影影像切片图层并查找其项目 ID。该 ID 位于 URL 的末尾。

在 CodePen 中，创建一个新的 TileLayer 并将其 portalItem id 属性设置为 1b243539f4514b6ba35e7d995890db1d。

  const imageTileLayer = new TileLayer({portalItem: {id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade}});

添加底图图层

底图可以包含多个基础图层。使用 Basemap 类添加上面创建的 vectorTileLayer和 imageTileLayer。这些图层将混合在一起以创建地图的基础样式。矢量切片图层提供基色，图像切片图层提供山体阴影或地形效果。

在 main 函数中，创建一个底图对象，并将矢量图层和图像图块层添加到基图层数组中。

  const basemap = new Basemap({baseLayers: [imageTileLayer,vectorTileLayer]});

更新底图属性以使用之前创建的底图对象。

  const map = new Map({basemap: basemap,});

更新地图视图

更新中心和缩放属性以将显示缩放到北美。

  const view = new MapView({container: "viewDiv",map: map,center: [-100,40],zoom: 3});

完整代码

<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: Add a styled basemap layer</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","esri/Basemap","esri/layers/VectorTileLayer","esri/layers/TileLayer",], function(esriConfig, Map, MapView, Basemap, VectorTileLayer, TileLayer) {esriConfig.apiKey = "YOUR_API_KEY";const vectorTileLayer = new VectorTileLayer({portalItem: {id: "6976148c11bd497d8624206f9ee03e30" // Forest and Parks Canvas},opacity: 0.75});const imageTileLayer = new TileLayer({portalItem: {id: "1b243539f4514b6ba35e7d995890db1d" // World Hillshade}});const basemap = new Basemap({baseLayers: [imageTileLayer,vectorTileLayer]});// const apikey = YOUR_API_KEY ;const map = new Map({basemap: basemap,});const view = new MapView({container: "viewDiv",map: map,center: [-100,40],zoom: 3});});</script>
</head>
<body><div id="viewDiv"></div>
</body>
</html>