Arcgis Online - FeatureLayer篇

最新推荐文章于 2021-04-07 17:48:13 发布

bibi老师

最新推荐文章于 2021-04-07 17:48:13 发布

阅读量1.5k

点赞数 4

分类专栏： Arcgis Online 文章标签： arcgis javascript

本文链接：https://blog.csdn.net/qq_37880942/article/details/106502130

版权

Arcgis Online 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

Arcgis Online - FeatureLayer篇

1.FeatureLayer简介
2.上传shp文件至Arcgis Online
3.Arcgis for Javascript Api

1.FeatureLayer简介

FeatureLayer是可以从地图服务或要素服务创建的单个图层；ArcGIS Online或ArcGIS Enterprise门户项目；或来自一系列客户端功能。该层可以是空间（具有地理特征）或非空间（表）。

空间层由离散要素组成，每个要素都有一个几何图形，可以将其呈现在2D MapView或3D SceneView中，作为具有空间上下文的图形。要素还包含数据属性，这些数据属性提供有关其所代表的实际要素的其他信息；属性可以在弹出窗口中查看，并用于渲染图层。可以查询，分析和渲染 FeatureLayers 以在空间上下文中可视化数据。

非空间层是不具有表示地理特征的空间列的表。

引用自Arcgis for javaScript Api文档
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#spatialReference

2.上传shp文件至Arcgis Online

首先将你的shp文件打包成一个zip压缩包（可以多个shp文件合并在一起打包）
在这里插入图片描述
然后打开Arcgis for Developers网站，登录你的Arcgis账户，点击右上角的 “仪表盘” 图标。

有两个地方可以添加新的Layer文件，第一个是右上角 “仪表盘” 旁边的 “+” ，悬停在此处可以浮出一列选项卡，选择 “New Layer” 项；第二个就是打开 “仪表盘” 界面，找到ArcGIS for Developers那一行，单击 “New Layer” 项，也能进入添加Layer的页面。
仪表盘界面
点击 “Select a file” 按钮，找到之前打包好的Shp压缩文件，然后选择 “打开”。
选择打包的shp文件
选择你的zip文件类型，此处应选择 “Shapefile” 文件类型。
选择zip类型
选择完成后点击 “Upload” 按钮，等待上传完毕，上传完成后输入你的Layer标题、服务名以及一个Tags标签。
输入图层名称、服务名称
设置完成后，点击 “Settings” 进行图层属性设置，首先将图层的共享属性设置为 “Everyone” （本案例设置为Everyone即可，其他类型暂时没有尝试过，可能需要做一些身份验证才能使用），然后将权限设置中的 “Enable Editing” （既不允许进行修改设置）设置取消勾选即可。
设置图层属性
然后点击下方的 “Create Layer” 按钮，等待创建完毕即可。
创建图层
上传完成后即为下图，此FeatureLayer层中包含了6个要素图层，右侧的 “Layer ID” 、“Service URL” 这两个参数在后续的开发过程中会使用到。
FeatureLayer详细页
此详情页面也可以在 “仪表板” 界面的下方，“Layers” 栏中找到，单击打开即可。
仪表盘Layers

3.Arcgis for Javascript Api

本案例使用的Arcgis for JavaScript Api版本为4.15，是目前支持的最新版本，此处主要演示如何使用FeatureLayer来展示要素图层的数据，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>FeatureLayer - 4.15</title>

    <style>

        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet"
          href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
require([
        "esri/config",
        "esri/request",
        "esri/Color",
        "esri/layers/BaseTileLayer",
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/views/MapView"
], function (esriConfig, esriRequest, Color, BaseTileLayer, Map, FeatureLayer, MapView) {
        
        let TintLayer = BaseTileLayer.createSubclass({
            properties: {
                urlTemplate: null,
                tint: {
                    value: null,
                    type: Color
                }
            },
            getTileUrl: function (level, row, col) {
                return this.urlTemplate
                    .replace("{z}", level)
                    .replace("{x}", col)
                    .replace("{y}", row);
            },
            fetchTile: function (level, row, col) {
                var url = this.getTileUrl(level, row, col);
                return esriRequest(url, {
                    responseType: "image",
                    allowImageDataAccess: true
                }).then(
                    function (response) {
                        var image = response.data;
                        var width = this.tileInfo.size[0];
                        var height = this.tileInfo.size[0];
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        canvas.width = width;
                        canvas.height = height;
                        context.drawImage(image, 0, 0, width, height);
                        return canvas;
                    }.bind(this)
                );
            }
        });

        //高德地图底层
        //esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
        //gaoDeLayer = new TintLayer({
        //    urlTemplate:
        //        "http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        //    tint: new Color("#004FBB"),
        //    title: "高德地图"
        //});

        //谷歌地图底层
        esriConfig.request.corsEnabledServers.push("http://www.google.cn/");
        let digitalTileLayer = new TintLayer({
            urlTemplate:
                "http://www.google.cn/maps/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
            tint: new Color("#004FBB"),
            title: "谷歌地图"
        });

        const map = new Map({
            //basemap: "gray" //不设置此basemap就不存在底图，不过本案例使用了高德
        });

        map.add(digitalTileLayer);

        var linelayer1 = new FeatureLayer({
            url: `此处填写Service URL/对应图层的索引`,
            title: "雨水管道"
        });
        const view = new MapView({
            container: "viewDiv",
            center: [118.829248, 32.026729],
            zoom: 14,
            map: map
        });
        map.add(linelayer1);
      });</script>
</head>

<body>
    <div id="viewDiv"></div>
</body>
</html>

此处需要注意一点，map对象先将谷歌地图添加进来，然后才添加了FeatureLayer，这个顺序关系不能违反，不然谷歌地图会将FeatureLayer图层盖在下方，造成FeatureLayer不能正常显示出来的问题。

引入FeatureLayer的关键代码为这一部分：

		var linelayer1 = new FeatureLayer({
            url: `此处填写Service URL/对应图层的索引`,
            title: "雨水管道"
        });
        const view = new MapView({
            container: "viewDiv",
            center: [118.829248, 32.026729],
            zoom: 14,
            map: map
        });
        map.add(linelayer1);

首先，定义了一个FeatureLayer对象，将其指向的url地址改为发布到Arcgis Online中的Service URL， “url” 属性结尾的数字则是你需要展示的shp图层在FeatureLayer中List的索引，FeatureLayer其实需要指定一个几何类型，设置FeatureLayer的 “geometryType” 属性即可，例如：

var linelayer1 = new FeatureLayer({
	url: `此处填写Service URL/对应图层的索引`,
	title: "雨水管道",
	geometryType:"polyLine"
});

所有的要素必须具有相同的类型，如不设置 “geometryType” 属性，则会根据此图层中的要素类型进行推断（即按要素类型自动设定其FeatureLayer的geometryType），上例完整代码处就没有特指此FeatureLayer的geometryType。

完整案例展示效果如下：
完整效果
可以看出，已经将FeatureLayer中的要素图层展示在了Web地图中了，其余要素图层按照此方法可依次加入到Web地图中来。

bibi老师

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Arcgis Online - FeatureLayer篇

Arcgis Online - FeatureLayer篇1.FeatureLayer简介2.上传shp文件至Arcgis Online3.Arcgis for Javascript Api1.FeatureLayer简介FeatureLayer是可以从地图服务或要素服务创建的单个图层；ArcGIS Online或ArcGIS Enterprise门户项目；或来自一系列客户端功能。该层可以是空间（具有地理特征）或非空间（表）。空间层由离散要素组成，每个要素都有一个几何图形，可以将其呈现在2D MapV
复制链接

扫一扫