4.加载FeatureLayer

最新推荐文章于 2024-06-07 09:38:08 发布
最新推荐文章于 2024-06-07 09:38:08 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： ArcGIS for JS 文章标签： arcgis  web gis arcgis for js feature layer
原文链接：https://developers.arcgis.com/javascript/latest/guide/add-layers-to-a-map/
版权

概述

本节您将学到： 怎么加载FeatureLayer(要素图层)。
应用可以可以接受和显示托管在 ArcGIS Online 和 ArcGIS Enterprise上的要素图层。一个要素图层包含一系列的要素图形和属性。每个feature layers都有一个唯一的REST风格的URL地址，要素图层可以通过这个URL在地图上绘制要素图层中的点、线、面要素。如果要素图层的没有预先配置renderer或者pop-up，将会使用默认符号渲染，并且弹出框（pop-up）不可用。如何配置要素图层的可视化以及交互，可以查看以下几个教程。

展示效果请点击：https://s.codepen.io/esri_devlabs/debug/JZawYY

撸代码步骤

创建一个简单HTML页面

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

添加名为Trailheads的feature layer

  • 在require中加入FeatureLayer的模块引用并且更新function的参数。
require([
  "esri/Map",
  "esri/views/MapView",
  //*** 加入FeatureLayer 引用 ***//
  "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
  • 在main方法尾创建一个FeatureLayer对象，并且设置它的url属性为Trailheads 要素图层的地址，最后把FeatureLayer对象加入到Map中。

每个要素图岑都指向一个托管的要素服务，并且提供一种简单的方式加入到地图中。可以通过一个URL并指定相应的端点(endpoint)来获取相应的服务数据。你也可以直接通过浏览器反问相应的URL和端点来查看相应的数据。在默认情况下，地图界面只会请求当前视窗范围的要素。你可以同指定SQL_type和definitionExpression来过滤要素。

var trailheadsLayer = new FeatureLayer({
   url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
 });
 map.add(trailheadsLayer);
  • 运行代码，可以看到属性为Trailheads要素图层已经加入到地图上了。

添加Trails和Parks and Open Space要素图层

  • 通过要素的图层的URL添加Trails（线状）和Parks and Open Space（面状）要素图层，并在添加到Map中使用0作为第二个参数指定添加到第一个图层中，保证地图能按照先面后线再点的顺序绘制。

地图图层记录在layers属性的集合中，图层的绘制顺序也是和集合中图层顺序相同（集中排在越后的图层越晚绘制）。如果在添加图层的add方法中指定了index参数，则加入的图层会插入到index指定位置，如果没有指定index参数，则默认插入到集合的最后一个。
为了保证地图正确的绘制顺序，通常情况下都是先添加面图层，然后线图层，最后添加点图层。

// Trails feature layer (线图层)
var trailsLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});
map.add(trailsLayer, 0);
// Parks and open spaces (面图层)
var parksLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
});
map.add(parksLayer, 0);
  • 运行代码，可以看到地图显示这个三个要素图层。

注意：这些的托管的feature layer 在服务端没有配置样式和弹出框（pop-ups）,所以在地图中会使用默认样式来绘制它们。想了解feature layer 的可视化，可以参考以下文章：

到此您已经完成了。

您的页面应该是这样：https://codepen.io/esri_devlabs/pen/JZawYY?editors=1000
页面效果

完整代码

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ], function(Map, MapView, FeatureLayer) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",  
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13            
      });

        // Trailheads feature layer (点状)
      var trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
      });
      map.add(trailheadsLayer);

      // Trails feature layer (线状)
      var trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
      });
      map.add(trailsLayer, 0);

      // Parks and open spaces (面状)
      var parksLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
      });

      map.add(parksLayer, 0);

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

再撸点

探索 feature layers

访问下面的feature layer的地址，可以查看相关feature layer元数据、要素数据、支持的方法等。每个服务链接都是展示服务的图层类型、图形类型、图层范围、绘制信息、字段信息等。在每个页面的底端的Supported Options中尝试使用Query功能查找并返回相关记录。FeatureLayer可使用这些函数来获取数据和在地图中绘制。

更多关于feature layers的知识可以查看以下文章:

给feature layer设置属性

FeatureLayer可以设置相关的属性来改变其绘信息以及其行为信息。通过设置definitionExpression属性可让trails图层只显示海拔为250 ft以下的数据，设置render可以让图层以绿色绘制，设置popupTemplate可以在点击要素时弹出名称以及其他字段信息的弹出框。

// Trails feature layer (线状)
   var trailsLayer = new FeatureLayer({
     url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
     //*** ADD 只显示海拔小于250的数据 ***//
     definitionExpression: "ELEV_GAIN < 250",

     //*** ADD ***//
     renderer: {
       type: "simple",
       symbol: {
         type: "simple-line",
         color: "green",
         width: "2px"
       }
     },

     //*** 弹出框显示的字段信息 ***//
     outFields: ["TRL_NAME","ELEV_GAIN"],

     //*** ADD ***//
     popupTemplate: {  // 启用弹出框
       title: "{TRL_NAME}",
       content: "The trail elevation gain is {ELEV_GAIN} ft."
     }
   });

更多图层操作相关知识，可以参考以下文章：

文章翻译自 添加图层到Map

欢迎关注我的微信公众号，第一时间为您推送相关教程。

GIS猫公众号

GIS猫
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Arcgis api 4.x 加载json.zip
01-26
const featureLayer = new FeatureLayer({ source: graphics }); // 添加图层到地图 map.add(featureLayer); }) .catch(error => console.error('Error loading JSON:', error)); ``` 在这个例子中，`test....
android arcgis featureLayer查询
05-06
AttributeQueryTask attributeQueryTask = new AttributeQueryTask(featureLayer.getServiceUri()); attributeQueryTask.execute(attributeQueryInfo, new FeatureQueryCallback() { // 处理查询结果 }); ``` 除了...
转载--ArcGIS服务器的feature图层限制
04-25 161
ArcGIS的feature图层（在JavaScript API中为esri.layers.FeatureLayer），在浏览器中进行显示时是有一定限制的。比如一个名为traffic的feature图层，该图层记录了该地区所有交通事故的发生地，其feature数量可想而知非常巨大。在浏览器中创建该图层的时候就要为其选定“模式”。如 var traffic =new esri.l...
esri.views.2d.layers.features.controllers.OnDemandController 记一次ArcGIS Server的问题
ThinkingInGIS的博客
11-14 3006
一.问题背景 1.我们的生产环境是一套正版ArcGIS 10.6 Desktop + Enterprise 装在服务器A上，但是A的磁盘空间有限，只能将大量影像数据和shp数据放在服务器B上，通过局域网内共享文件夹实现B为A提供数据。通过装在A上的ArcGIS Server 10.6访问服务B上的数据，然后发布服务。 2.就在昨天（2019.11.14）将服务器B中装的arcgis卸载后，重新...
ArcGIS for js 4.x FeatureLayer 加载、点选、高亮
最新发布
qq_19688207的博客
06-07 470
一、FeatureLayer 加载。二、点选FeatureLayer。
ScrollView嵌套WebView报Unable to create layer for WebView
laigengsong的博客
09-30 5341
java.lang.IllegalStateException: Unable to create layer for WebView at android.os.MessageQueue.nativePollOnce(Native Method)
arcgis-for-js将自定的的图层载入
孙霸天的专栏
03-24 677
在data return 中定义一个图层 workLayer 加载并使用BaseLayerView2D功能模块 加载并使用Layer功能模块，加入TileInfo功能模块 官网参考 获取图片和坐标信息 业务中的图片是从arcgis map中导出的含有地理信息的图片，一共有两个文件：一个jpg图片一个存放六个地理参数的文件 在methods中定义了两个方法,可以合并成一个 //添加图片的方法 addImageLayer: function (name) { let this.
esri默认底图的加载
upcdxlq的博客
12-08 2691
以satellite为例 方式一： var map = new Map({ basemap:"satellite" }); 方式二：  var EsriSatelliteWebtilelayer = new WebTileLayer({       urlTemplate:"https://services.arcgisonline.com/ArcGIS/rest/servi
ArcGIS for Android FeatureLayer的属性更新
07-24
这通常通过查询完成，可以使用`FeatureLayer.queryFeatures()`方法，根据属性条件筛选出目标特征。 ```java QueryParameters params = new QueryParameters(); params.setWhere("YOUR_CONDITION"); ListenableFuture...
ArcGIS JavaScript 4.x api
03-13
- **Layer**：包括各种图层类型，如FeatureLayer、TileLayer、GraphicsLayer等，用于加载和展示地图数据。 - **Geometry Service**：提供几何操作，如缓冲区、几何变换、几何相交等。 - **Geocoder**：用于地址...
MapImageLayer.html
weixin_42193179的博客
04-22 856
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>MapImag...
ArcGIS调用天地图底图，解决同时调用GIS服务和天地图的冲突
Moon Star
12-10 2925
ArcGIS调用天地图 天地图服务申请： 地图API 申请天地图的token（key），本地开发不设置域名限制 定义、使用天地图图层 加上你自己的 tk 1. declare定义 require(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer"], function (declare, TiledMapServiceLayer) { declare("TDTLayer", [TiledMapServiceLay...
将geoJSON以FeatuerLayer方式加载并获取其属性
AriaGIS
11-25 689
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoJSON with FeatureLayer - 4.15</title> .
layer.load()不及时显示
G_ruirui的博客
03-21 1176
layer.load()不及时显示
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
热门推荐
pyy的博客
10-21 2万+
http://59.108.92.220:8080/crossdomain.xml var mapServerUrl = "http://59.108.92.220:8080/ArcGIS/rest/services/horseMap/chinaMap_terrain/MapServer";//全国地图服务地址 可以正常访问到，但地图没有出来  MapFrame/Scripts/MapO
openlayers出现Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME这个问题
Hello的World
10-10 1万+
上面代码url因为缺少http://，所以在chrome浏览器中会出现Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME的问题，只要在前面加上就能解决这个问题。这样就能正常访问了
Keras load_model 导入错误
z小白的博客
10-26 1万+
在使用Keras load_model时，会出现以下报错： ImportError: Failed to import pydot. You must install pydot and graphviz for `pydotprint` to work. 解决办法： $ pip install pydot $ sudo apt-get install graphviz  ...
arcgis for js 4.X 加载geoserver WFS服务 指定图层
04-29
要加载 Geoserver WFS 服务中的指定图层，可以使用 ArcGIS API for JavaScript 4.x 的 `FeatureLayer` 类。以下是加载 Geoserver WFS 服务中指定图层的示例代码： ```javascript // 创建 FeatureLayer 实例 var featureLayer = new FeatureLayer({ // 设置服务 URL url: "http://localhost:8080/geoserver/wfs", // 设置图层名称 layerId: "layer_name", // 设置查询模式为按需加载 mode: FeatureLayer.MODE_ON_DEMAND, // 设置要素渲染器 renderer: new SimpleRenderer({ symbol: new SimpleMarkerSymbol({ color: [255, 0, 0, 0.5], size: 12, outline: { color: [255, 255, 255], width: 1 } }) }) }); // 将 FeatureLayer 添加到地图中 map.add(featureLayer); ``` 在上面的代码中，`url` 参数是 Geoserver WFS 服务的 URL，`layerId` 参数是要加载的图层名称，`mode` 参数设置为 `FeatureLayer.MODE_ON_DEMAND`，表示按需加载模式，只有在需要时才会加载要素数据。`renderer` 参数是要素渲染器，可以根据需要进行设置。最后，将 `FeatureLayer` 添加到地图中即可。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值