如何在ArcGIS JavaScript API中有效显示Layer？-酷北运营网

ArcGIS JS API：显示Layer

一、简介

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”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!

如何在ArcGIS JavaScript API中有效显示Layer？

一、简介

二、核心概念

三、创建并显示Layer

四、相关表格

五、相关问题与解答栏目

相关文章

如何使用ArcGIS JS API获取坐标？

ArcGIS JavaScript API 中文版有哪些独特功能与优势？

如何在ArcGIS JS中获取并操作图层？

如何使用ArcGIS JS API获取坐标？

如何利用ArcGIS JS API创建和操作网格数据？

如何使用ArcGIS JS API创建统计图？

如何使用ArcGIS JS进行有效的空间数据统计分析？

如何使用ArcGIS JS进行画线操作？

发表评论

暂无评论，1人围观

目录[+]