一、简介
ArcGIS for JavaScript API是Esri公司推出的一款强大的Web GIS开发工具，允许开发者在网页中构建交互式的地图应用，通过该API，用户可以访问和展示各种类型的地理数据层（Layer），包括矢量图层、栅格图层、动态图层等，本文将详细介绍如何使用ArcGIS JS API加载和显示不同类型的图层。
二、核心概念
1. 什么是Layer
Layer是在Map类中使用的数据集合，Layer的数据可以在客户端创建，由ArcGIS Online和ArcGIS Enterprise托管，也可以由外部服务器托管，Layer经常用来管理和展示大量的集合数据，这些特征是记录的地理位置或键值对，每个特征包含空间坐标定义给一个集合上的集合（点，相交线，多边形）并且属性域还存储其他的信息。
2. Layer的类型
FeatureLayer：用于展示结构化的矢量数据，所有的特征在集合中都要有相同的几何类型和属性键。
GraphicsLayer：用于展示非结构化的图形数据，可以包含不同的几何类型。
TileLayer：用于显示缓存的切片数据，渲染速度较快。
MapImageLayer：允许显示和分析子图层，导出图像，由服务器处理。
StreamLayer：扩展了要素图层，以添加使用HTML5 WebSockets连接到数据流的功能。
三、创建并显示Layer
1. 创建Map和SceneView
需要创建一个Map对象和一个SceneView对象，SceneView用于3D视图，而Map用于2D视图，以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to layers</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer"
], function(Map, SceneView, TileLayer) {
var map = new Map({
basemap: "oceans"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-121.83, 48.279, 1346],
heading: 300,
tilt: 60
}
});
});
</script>
</body>
</html>
2. 创建TileLayer
TileLayer用于访问缓存的切片数据，渲染速度比MapImageLayer快，以下是一个创建TileLayer的示例：
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer"
], function(Map, SceneView, TileLayer) {
var map = new Map({
basemap: "oceans"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-121.83, 48.279, 1346],
heading: 300,
tilt: 60
}
});
var transportationLayer = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id: "streets",
opacity: 0.7
});
map.add(transportationLayer);
});
在这个示例中，我们创建了一个TileLayer对象并将其添加到Map对象中。
3. 创建FeatureLayer
FeatureLayer用于展示结构化的矢量数据，以下是一个创建FeatureLayer的示例：
require([
"esri/layers/FeatureLayer"
], function(FeatureLayer) {
const featureLayer = new FeatureLayer({
url: "URL_TO_YOUR_FEATURE_LAYER",
title: "FeatureLayer"
});
map.add(featureLayer);
});
在这个示例中，我们创建了一个FeatureLayer对象并将其添加到Map对象中。
4. 创建GraphicsLayer
GraphicsLayer用于展示非结构化的图形数据，以下是一个创建GraphicsLayer的示例：
require([
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Graphic, GraphicsLayer) {
var graphics = [
new Graphic({
geometry: { /* longitude, latitude */ },
attributes: { /* attribute data */ }
}),
new Graphic({
geometry: { /* longitude, latitude */ },
attributes: { /* attribute data */ }
})
];
var graphicsLayer = new GraphicsLayer({
listMode: "hide", // or "hide"
title: "My Graphics Layer"
});
graphicsLayer.graphics = graphics;
map.add(graphicsLayer);
});
在这个示例中，我们创建了一个GraphicsLayer对象并将其添加到Map对象中。
5. 创建DynamicLayer
DynamicLayer允许动态地修改图层的属性和样式，以下是一个创建DynamicLayer的示例：
require([
"esri/layers/MapImageLayer"
], function(MapImageLayer) {
const dynamicLayer = new MapImageLayer({
url: "URL_TO_YOUR_DYNAMIC_LAYER",
title: "DynamicLayer"
});
map.add(dynamicLayer);
});
在这个示例中，我们创建了一个DynamicLayer对象并将其添加到Map对象中。
四、相关表格
以下是不同类型图层的比较表：
| 图层类型 | 描述 | URL示例 | 是否支持3D | 是否支持动态修改 |
| TileLayer | 用于访问缓存的切片数据，渲染速度较快 | https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer | 否 | 否 |
| FeatureLayer | 用于展示结构化的矢量数据 | https://sampleserver6.arcgisonline.com/arcgis/rest/services/Ecosystems/MapServer/find | 是 | 是 |
| GraphicsLayer | 用于展示非结构化的图形数据 | N/A | 是 | 否 |
| DynamicLayer | 允许动态地修改图层的属性和样式 | https://sampleserver6.arcgisonline.com/arcgis/rest/services/Ecosystems/MapServer | 是 | 是 |
五、相关问题与解答栏目
问题1：如何更改FeatureLayer的渲染器属性？
答：可以通过setRenderer方法来更改FeatureLayer的渲染器属性，以下是一个示例代码：
require([
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color"
], function(SimpleRenderer, SimpleMarkerSymbol, Color) {
const renderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
style: "circle",
color: new Color([226, 119, 40]),
size: "8px",
outline: { color: [255, 255, 255], width: 1 }
}),
visualVariables: [{
field: "POPULATION",
stops: [[0, 6], [6000000, 24]]
}]
});
featureLayer.renderer = renderer;
featureLayer.refresh();
});
在这个示例中，我们创建了一个新的渲染器并将其应用到FeatureLayer对象上。
问题2：如何在地图上添加多个图层？
答：可以通过多次调用map.add方法来添加多个图层，以下是一个示例代码：
require([
"esri/layers/TileLayer",
"esri/layers/FeatureLayer"
], function(TileLayer, FeatureLayer) {
var tileLayer = new TileLayer({ url: "URL_TO_TILE_LAYER" });
var featureLayer = new FeatureLayer({ url: "URL_TO_FEATURE_LAYER" });
map.add(tileLayer);
map.add(featureLayer);
});
以上就是关于“arcgisjsapi 显示layer”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/691751.html
微信扫一扫 