尝试一下在线预览图层是地图最基本的组成部分。它是代表现实世界现象的图形或图像形式的空间数据集合。图层可能包含存储矢量数据的离散特征或存储栅格数据的连续像元/像素。
地图可能包含不同类型的图层。 有关 API 中可用的每种层类型的广泛概述, 在图层的类描述中查看 此表 。
所有图层都从图层继承属性、方法和事件。本教程中讨论了其中一些常见属性。要了解特定于不同图层类型的属性，请搜索该图层类型的示例 (例如 SceneLayer)。
在完成以下步骤之前，您应该熟悉 视图 和地图。如有必要，请先完成以下教程：
创建一个基本 地图 并将其添加到 SceneView 实例。 您的 JavaScript 可能类似于以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
require(["geoscene/Map", "geoscene/views/SceneView"], (Map, SceneView) => {
// 创建地图
const map = new Map({
basemap: "oceans"
});
// 创建 SceneView
const view = new SceneView({
container: "viewDiv",
map: map
});
});
在 HTML 正文中添加一个复选框元素。 该元素的用途将在本教程后面讨论。
1
2
3
4
<body>
<div id="viewDiv"></div>
<span id="layerToggle" class="geoscene-widget"> <input type="checkbox" id="streetsLayer" checked /> Transportation </span>
</body>
2. 使用 TileLayer 创建两个图层
在您编写用于创建地图和视图的代码之前，创建两个 TileLayer 实例。 为此，您必须要求 geoscene/layers/TileLayer 模块并指定 url 层上的属性。 url 属性必须指向托管在 GeoScene Server 或 GeoScene Portal 上的缓存地图服务。
用于访问 GeoScene 服务的所有图层都具有 url 属性，必须设置该属性才能在视图中呈现要素。 在本示例中，我们将使用 Esri World Transportation 服务为街道和高速公路创建图层 以及包含纽约市住房密度数据的服务。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
require([
"geoscene/Map",
"geoscene/views/SceneView",
"geoscene/layers/TileLayer" // 需要 TileLayer 模块
], (Map, SceneView, TileLayer) => {
const transportationLayer = new TileLayer({
url: "https://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer"
});
const housingLayer = new TileLayer({
url: "https://tiles.geoscene.cn/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer"
});
/*****************************************************************
* 在上一步中创建地图和视图实例的代码 * 应该放于此处.
*****************************************************************/
});
3. 在图层上设置其他属性
您可以在图层上设置其他属性，包括 id、minScale、 maxScale、不透明度和可见度。 这些可以在构造函数中设置，也可以直接在应用程序中另一点的实例上设置。
我们将为每一层添加一个id，并在传输层上设置不透明度。
1
2
3
4
5
6
7
8
9
10
const transportationLayer = new TileLayer({
url: "https://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer",
id: "streets",
opacity: 0.7
});
const housingLayer = new TileLayer({
url: "https://tiles.geoscene.cn/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing"
});
id 唯一标识层，使其易于在应用程序的其他部分中引用。 如果这不是开发者直接设置的，那么它会在创建图层时自动生成。
minScale 和 maxScale 属性控制图层在不同比例下的可见性。 使用这些属性可以提高应用程序在特定比例下的性能并增强地图的制图。 visible 属性默认为 true。
4. 将图层添加到地图
可以通过多种方式将图层添加到地图中。 这些都在 Map.layers 的文档中进行了讨论。 在此示例中，我们将以不同的方式将每个图层添加到地图中。
将房屋图层添加到地图的构造函数中。
1
2
3
4
5
// 两个图层都是在此代码段之前创建的
const map = new Map({
basemap: "oceans",
layers: [housingLayer] // 图层可以作为数组添加到地图的构造函数中
});
使用 map.layers.add() 将交通层添加到地图。
1
map.layers.add(transportationLayer);
现在两个图层都应该在视图中可见。
5. 图层的可见性
使用 addEventListener 方法监听第一步创建的复选框元素上的更改事件。检查开箱后，它将打开和关闭运输层的可见性。像 visible 一样，任何 图层 的任何属性都可以直接在图层实例上设置 。这是在下面的代码段中完成的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
require(["geoscene/Map", "geoscene/views/SceneView", "geoscene/layers/TileLayer"], (
Map,
SceneView,
TileLayer
) => {
/*****************************************************************
* 前在上面步骤中编写的所有 * 应该放在下面的代码之前
*******************************************************************/
// 创建一个引用复选框节点的变量
const streetsLayerToggle = document.getElementById("streetsLayer");
// 监听复选框的更改事件
streetsLayerToggle.addEventListener("change", () => {
// 勾选复选框时（true），设置图层的可见性为true transportationLayer.visible = streetsLayerToggle.checked;
});
});
即使该图层在此示例中的视图中不可见，但它仍然作为地图的一部分存在。 因此，即使用户可能看不到视图中呈现的图层，您仍然可以访问图层的所有属性并将其用于分析。
6. 了解 LayerView
图层 对象管理作为服务发布的地理和表格数据。 它不在 视图 中渲染。 这是 LayerView 的工作。 图层 的 LayerView 是在它呈现在视图中之前创建的。 使用 FeatureLayers 时，对应的 FeatureLayerView 可以让开发者访问在视图中呈现的与该层的功能相关的图形。
在这一步中，我们将监听视图的 layerview-create 事件并打印房屋和运输层的 LayerViews，以便您可以在控制台中探索它们的属性。 请注意，我们将使用我们在步骤 3 中为每个图层创建的 id 来获取所需的图层。 除了地图的业务图层之外，此事件还会针对底图图层和高程图层触发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
require(["geoscene/Map", "geoscene/views/SceneView", "geoscene/layers/TileLayer"], (
Map,
SceneView,
TileLayer
) => {
/*****************************************************************
* 之前在上面的步骤中编写的所有代码都应该放在 * 以下代码之前 *******************************************************************/
// 每次创建图层的 LayerView 时都会触发
// 指定视图实例
view.on("layerview-create", (event) => {
if (event.layer.id === "ny-housing") {
// 在此处探索房屋层的层视图的属性
console.log("LayerView for New York housing density created!", event.layerView);
}
if (event.layer.id === "streets") {
// 在此处探索运输层的图层视图的属性
console.log("LayerView for streets created!", event.layerView);
}
});
});
7. 使用 Layer.when()
当 已加载，或者当其所有属性对开发人员可用时，图层是一个 promise。 在这个示例中，我们希望将视图动画到fullExtent 的外壳层，因为我们可能不知道用于初始化视图的良好范围（或中心和缩放）。
在加载之前，我们无法获取层的 fullExtent。 所以我们必须在 Promise resolves后处理动画。 这是使用 when() 处理的。
1
2
3
4
// 当 layer 的 promise resolves时，将 view 动画化到 layer 的 fullExtent
housingLayer.when(() => {
view.goTo(housingLayer.fullExtent);
});
8. 总结
图层的更多属性在这里没有讨论。要详细了解与特定图层相关的其他属性，请参阅 API 文档和目录中列出的示例 在本页。本教程的最终代码可以在沙盒中查看。