在客户端创建要素图层 (FeatureLayer)
时间:2022-07-25
本文章向大家介绍在客户端创建要素图层 (FeatureLayer),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在客户端创建要素图层 (FeatureLayer)
在 ArcGIS JS API 的开发中, FeatureLayer 可以说是让人又爱又恨, 特别是 ArcGIS JS API 4.x , FeatureLayer 从服务端加载数据的策略不可控制, 或者说默认的数据加载策略不适合所有的场景, 某些场景下, 需要从先加载数据, 然后在客户端创建 FeatureLayer 。
要在客户端创建 FeatureLayer , 根据 FeatureLayer 的文档, 这几个属性必须设置:
-
fields
指定一个 Field 数组来描述 FeatureLayer 的架构, 并且必须包含一个类型为oid
的字段; -
source
指定一个 Graphic 数组来表示 FeatureLayer 的数据, 如果没有数据, 则设置一个空数组; -
geometryType
如果 source 为空, 则必须设置这个属性, 如果 source 不为空, 则会自动从 source 数组中寻找并判断; -
spatialReference
如果 source 为空, 则必须设置这个属性, 如果 source 不为空, 则会自动从 source 数组中寻找并判断; -
objectIdField
如果 source 为空, 则必须设置这个属性, 如果 source 不为空, 则会自动从 source 数组中寻找并判断;
从 ArcGIS Server 读取 JSON 数据创建 FeatureLayer
如果有 ArcGIS Server 的话, 要在客户端创建 FeatureLayer 需要加载两个模块, 它们是 esri/tasks/QueryTask
和 esri/layers/FeatureLayer
, 代码如下:
import { loadModules } from 'esri-loader';
// 使用 esri-loader 提供的 loadModules 方法加载这两个模块
const [QueryTask, FeatureLayer] = await loadModules<[
__esri.QueryTaskConstructor,
__esri.FeatureLayerConstructor
]>([
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer'
]);
// 使用 FeatureLayer 服务的地址创建 QueryTask , 并请求数据
const queryTask: __esri.QueryTask = new QueryTask({
url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0'
});
const featureSet: __esri.FeatureSet = await queryTask.execute({
where: '1 = 1',
outFields: ['*'],
outSpatialReference: { wkid: 4326 },
returnGeometry: true
});
// QueryTask 返回的结果是一个 FeatureSet , 可以很方便的创建 FeatureLayer
const featureLayer: __esri.FeatureLayer = new FeatureLayer({
geometryType: featureSet.geometryType as any,
fields: featureSet.fields,
source: featureSet.features,
spatialReference: featureSet.spatialReference,
objectIdField: featureSet.fields.find(f => f.type === 'oid').name
});
// 将 FeatureLayer 添加到地图
view.map.add(featureLayer);
从自定义 JSON 数据创建 FeatureLayer
如果没有 ArcGIS Server , 或者是从其他的数据服务加载的 json 数据, 会稍微麻烦一些, 但是也是可以的, 只要在客户端构造出符合要求的 json 数据结构即可。
import { loadModules } from 'esri-loader';
// 使用 esri-loader 提供的 loadModules 方法加载 FeatureLayer 模块
const [FeatureLayer] = await loadModules<[
__esri.FeatureLayerConstructor
]>([
'esri/layers/FeatureLayer'
]);
// 根据 FeatureLayer 的属性, 构造 json 数据以创建 FeatureLayer ;
const featureLayer: __esri.FeatureLayer = new FeatureLayer({
fields: [
{ name: 'FID', type: 'oid' },
{ name: 'Tree_ID', type: 'integer' }
],
geometryType: 'point',
spatialReference: { wkid: 4326 },
objectIdField: 'FID',
source: [
{
attributes: { 'FID': 1, 'Tree_ID': 102 },
geometry: { x: -82.44119300239268, y: 35.610448315062335, type: 'point' }
},
{
attributes: { 'FID': 2, 'Tree_ID': 103 },
geometry: { x: -82.441111192058187, y: 35.6104788975222, type: 'point' }
}
]
});
在上面的例子中,
fields
和source
两个属性的值比较繁琐, 不过这两个属性是可以通过后台服务根据数据库表结构和数据表内容来返回, 而不必在前端进行硬编码。
客户端创建 FeatureLayer 的优点和缺点
先来说一下这么做的优点, 主要有如下几个:
- 不依赖 ArcGIS Server , 毕竟是很贵的商业产品;
- 可以控制数据加载, 无需理会 FeatureLayer 内置的所谓的优化加载策略, 内置的策略不能满足所有的使用场景;
- 同样可以使用 FeatureLayer 的其它特性, 比如
renderer
labelingInfo
等等; - 可以在客户端修改 Graphic 的属性值并刷新图层的显示, 而不必重新加载整个图层;
同时, 缺点也是有的:
- 只适合数据量较小的场景, 如果需要显示大量的数据, 特别是线或者面的矢量数据, 则不建议这么做;
- 没有 ArcGIS Server 情况下, 客户端以及服务端会增加一些额外的工作量;
- STL中的nth_element()方法的使用
- C++queue容器学习(详解)
- 牛客面经 |这可能不只是一篇面经
- 图的基本算法(BFS和DFS)
- C++STL中set的使用策略(详解)
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题,B.思维题)
- 设计模式六大原则(1):单一职责原则
- 设计模式六大原则(2):里氏替换原则
- Selenium2+python自动化72-logging日志使用
- Codeforces Round #395 (Div. 2)(A.思维,B,水)
- php实现图形计算器
- Selenium2+python自动化73-定位的坑:class属性有空格
- 华中农业大学第五届程序设计大赛网络同步赛题解
- Java构造方法与析构方法实例剖析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入探究JVM之垃圾回收算法实现细节
- 深入探究JVM之类加载与双亲委派机制
- 深入探究JVM之方法调用及Lambda表达式实现原理
- synchronized的实现原理——对象头解密
- Golang 汇编入门知识总结
- C语言小笔记(1)
- 这一次搞懂Spring的XML解析原理
- 这一次搞懂Spring自定义标签以及注解解析原理
- 这一次搞懂Spring的Bean实例化原理
- 单片机入门学习十三 STM32单片机学习十 通用定时器
- Spring IOC原理补充(循环依赖、Bean作用域等)
- 这一次搞懂Spring代理创建及AOP链式调用过程
- 这一次搞懂Spring事务注解的解析
- 这一次搞懂Spring事务是如何传播的
- 这一次搞懂SpringMVC原理