图层介绍

89 阅读 0 评论 59 点赞

我是靠谱客的博主干净棒球，最近开发中收集的这篇文章主要介绍图层介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-layers
图层是地图的最基本组成部分。它是代表实际现象的图形或图像形式的空间数据的集合。图层可以包含存储矢量数据的离散要素，也可以包含存储栅格数据的连续像元/像素。地图可能包含不同类型的图层。有关API中可用的每种图层类型的广泛概述，请参见“图层”的类说明中的此表。所有图层都从图层继承属性，方法和事件。本教程将讨论其中的一些常用属性。要了解特定于不同图层类型的属性，请在样本中搜索该图层类型（例如SceneLayer）。

1.创建一个Map，一个SceneView和一个复选框输入HTML元素。
创建一个基本Map并将其添加到SceneView实例。

require(["esri/Map", "esri/views/SceneView"], function(Map, SceneView) {
// Create the Map
var map = new Map({
basemap: "oceans"
});
// Create the SceneView
var view = new SceneView({
container: "viewDiv",
map: map
});
});

在HTML正文中添加一个复选框元素。

<body>
<div id="viewDiv"></div>
<span id="layerToggle" class="esri-widget"> <input type="checkbox" id="streetsLayer" checked /> Transportation </span>
</body>

2.使用TileLayer创建两个图层
在编写用于创建地图和视图的代码之前，创建两个TileLayer实例。为此，您必须要求esri / layers / TileLayer模块并在图层上指定url属性。url属性必须指向ArcGIS Server或Portal for ArcGIS上托管的缓存地图服务。用于访问ArcGIS服务的所有图层均具有url属性，必须将其设置为在视图中呈现要素。在此示例中，我们将使用Esri世界运输服务以及包含有关纽约市住房密度数据的服务为街道和高速公路创建图层。

require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer" // Require the TileLayer module
], function(Map, SceneView, TileLayer) {
//创建一个交通瓦片图层
var transportationLayer = new TileLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"
id: "streets",
opacity: 0.7
});
//创建一个建筑物瓦片图层
var housingLayer = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer"
id: "ny-housing"
});
});

3.在图层上设置其他属性
您可以在图层上设置其他属性，包括id，minScale，maxScale，opacity和visible。这些可以在构造函数中设置，也可以在应用程序中另一点的实例上直接设置。我们将为每个图层添加一个ID，并在运输图层上设置不透明度。

id唯一地标识该层，从而使其易于在应用程序的其他部分中引用。如果开发人员没有直接设置，则在创建图层时会自动生成。minScale和maxScale属性控制各种比例下的图层可见性。使用这些属性可以在一定比例下改善应用程序性能并增强地图的制图性能。默认情况下，visible属性为true。

4.将图层添加到地图
图层可以通过几种方式添加到地图中。我们将以不同的方式将每个图层添加到地图中。

//将建筑物层添加到地图的构造函数中。
var map = new Map({
basemap: "oceans",
layers: [housingLayer] // layers can be added as an array to the map's constructor
});
//使用map.layers.add（）将交通层添加到地图上。
map.layers.add(transportationLayer);

5.处理图层的可见性
使用addEventListener方法侦听第一步中创建的复选框元素上的更改事件。选中或禁用此框后，将打开或关闭运输层的可见性。就像可见的一样，可以直接在图层实例上设置任何图层的任何属性。

require(["esri/Map", "esri/views/SceneView", "esri/layers/TileLayer"], function(
Map,
SceneView,
TileLayer
) {
//创建引用复选框节点的变量
var streetsLayerToggle = document.getElementById("streetsLayer");
// 收听复选框的更改事件
streetsLayerToggle.addEventListener("change", function() {
// 选中复选框（true）时，将图层的可见性设置为true
transportationLayer.visible = streetsLayerToggle.checked;
});
});

即使此示例中的视图对图层不可见，该图层仍作为地图的一部分存在。因此，即使用户可能看不到在视图中渲染的图层，您仍然可以访问该图层的所有属性并将其用于分析。

6.理解LayerViews
Layer对象管理作为服务发布的地理和表格数据。它不处理在视图中渲染图层。那是LayerView的工作。图层的LayerView在视图中呈现之前创建。使用FeatureLayers时，相应的FeatureLayerView可以为开发人员提供对与该图层的要素有关的视图中渲染的图形的访问权限。在此步骤中，我们将侦听视图的layerview-create事件，并打印房屋和运输层的LayerViews，以便您可以在控制台中浏览它们的属性。注意，我们将使用在步骤3中为每个图层创建的ID来获取所需的图层。除了地图的操作图层外，还会针对底图图层和高程图层触发此事件。

require(["esri/Map", "esri/views/SceneView", "esri/layers/TileLayer"], function(
Map,
SceneView,
TileLayer
) {
// 每次为指定的视图实例创建图层的LayerView时，都会触发此事件
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the housing layer's layer view here
console.log("LayerView for New York housing density created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
});

7.使用Layer.when（）
层是一个承诺，可在加载时或其所有属性对开发人员可用时解析。在此示例中，由于我们可能不知道用于初始化视图的良好范围（或居中和缩放），因此我们希望将视图动画化为外壳层的fullExtent。在加载之前，我们无法获取图层的fullExtent。因此，一旦诺言解决，我们就必须处理动画。

//图层的承诺解决后，将视图动画化为图层的fullExtent
housingLayer.when(function() {
view.goTo(housingLayer.fullExtent);
});

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>介绍layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer"
], function (Map, SceneView, TileLayer) {
//创建两个TileLayer实例。一个指向描述美国男性人口的缓存地图服务，另一个指向道路和高速公路层
var transportationLayer = new TileLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
// 此属性可用于唯一标识图层
id: "streets",
visible: false
});
var housingLayer = new TileLayer({
url:"https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing",
opacity: 0.9
});
//可以在地图的构造函数中将图层添加到地图
var map = new Map({
basemap: "oceans",
layers: [housingLayer]
});
//使用map.add（）将它们添加到地图中
map.add(transportationLayer);
var view = new SceneView({
container: "viewDiv",
map: map
});
//地图会处理图层的数据，而视图和图层视图则负责渲染图层
on()在实例上注册事件处理程序
view.on("layerview-create", function (event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the population layer's layer view here
console.log(
"LayerView for male population created!",
event.layerView
);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
//层是在加载时或在可以访问其所有属性时解析的承诺。一旦填充了填充层，视图便会以其初始范围进行动画处理。
view.when(function () {
housingLayer.when(function () {
view.goTo(housingLayer.fullExtent).catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
});
});
var streetsLayerToggle = document.getElementById("streetsLayer");
//图层上的visible属性可用于切换视图中图层的可见性。禁用可见性后，该图层仍然是地图的一部分，这意味着即使它不可见，您也可以访问其属性并执行分析。
streetsLayerToggle.addEventListener("change", function () {
transportationLayer.visible = streetsLayerToggle.checked;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<span id="layerToggle" class="esri-widget">
<input type="checkbox" id="streetsLayer" /> Transportation
</span>
</body>
</html>