ArcGIS JS之 applyEdits之后要素符号更新
ArcGIS JS版本 ArcGIS JS 4.11
最近做一个地图服务,通过FeatureLayer.applyEdits()方法,更新唯一值的渲染字段,实现地图渲染根据用户的配置实时更新。
由于ArcGIS JS自带的编辑Widget效果不好,自己做了一个更新弹窗,applyEdits之后,发现该地图符号不会自动更新,需要地图视图稍微变化一点,才会刷新成最新的渲染
查询了官网API,发现ArcGIS JS无对FeatureLayer中某个Feature的渲染进行刷新的方法,无奈只能调用FeatureLayer.refresh()方法刷新整个图层。
可执行完之后,发现并没有实现地图渲染的刷新。
最初的核心代码
添加矢量图层代码
var layerW = new MapImageLayer({
url: mapServerUrl,
opacity: 0.7
});
map.add(layerW); // adds the layer to the map
弹出更新Form代码 注:其中showModal为一个弹出bootstrap Modal对象的方法
此处的FeatureLayer是通过具体的图层名称,去重新实例化的对象
var popup = view.popup;
// var editFeature=null;
popup.viewModel.on("trigger-action", function(event) {
var ftlyr=null;
// editFeature=popup.viewModel.selectedFeature; var lyc = getLyrConfigByLyrId(event.action.id);
ftlyr= new FeatureLayer({
url:FeatureServerUrl+lyc.id
}); var oid = popup.viewModel.selectedFeature.attributes["OBJECTID"];
editFeature=selectFeature(ftlyr,oid);
// 根据Guid 和action id弹出相关编辑界面,并提交流程状态/备份等
var attributes = popup.viewModel.selectedFeature.attributes;
if(lyc.id==1){
//一事一办
var data={};
data.State=attributes["完成情况"];
data.Summary = attributes["备注"];
showModal({
ModalName:"Ysyb",
Mode:"edit",
PstUrl:"#",
Data:data,
Title:"一事一办项目上报",
submitHandler:function () {
editFeature.attributes["State"]=$("#YsybForm select[name='State']").val()
editFeature.attributes["Summary"]=$("#YsybForm textarea[name='Summary']").val();
const edits = {
updateFeatures: [editFeature]
}; applyAttributeUpdates(ftlyr,edits);
}
});
}
属性更新代码
function applyAttributeUpdates(ftlyr,params) {
dom.byId("viewDiv").style.cursor = "progress";
ftlyr.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
selectFeature(ftlyr,objectId);
}
if(editsResult.updateFeatureResults.length > 0){
unselectFeature();
const objectId = editsResult.updateFeatureResults[0].objectId;
ftlyr.refresh();
$.notify({message:"更新成功"},{type:"success"});
}
dom.byId("viewDiv").style.cursor= "auto";
})
.catch(function(error) {
console.log("===============================================");
console.error(
"[ applyEdits ] FAILURE: ",
error.code,
error.name,
error.message
);
console.log("error = ", error);
dom.byId("viewDiv").style.cursor = "auto";
});
}
查询N多资料,走了N多弯路之后,最后找到了问题所在。
由于该功能中,map没有直接添加FeatureLayer图层,图层的展示是通过MapImageLayer的方式添加的,该MapImageLayer包含对个FeatureLayer图层。
而在更新要素属性的时候,获取到具体的FeatureLayer调用其refresh()方法,推测应该为用于applyEdits()的FeatureLayer并不是当前地图用于展示的图层,
所以调用其刷新是没有效果的。
所以,调用当前map的MapImageLayer的refresh()方法,即可实现地图渲染的刷新。

ArcGIS JS之 applyEdits之后要素符号更新的更多相关文章
- 基于ArcGIS JS API的在线专题地图实现
0 引言 专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
- ArcGIS JS API使用PrintTask打印地图问题解决汇总
环境:来源于工作过程,使用的API是 arcgis js 3.* 3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup 2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePop ...
- ArcGIS AO开发高亮显示某些要素
参考代码1 ifeaturecursor pcur = ifeatureclass.search(iqueryfilter pfilter); pfilter.whereclause = strAdd ...
- js移除最后一个字符,js替换字符串的连接符号,js移除最后一个分隔符号
js移除最后一个字符 js移除最后一个分隔符号 js替换字符串的连接符号 >>>>>>>>>>>>>>>> ...
- ArcGIS JS Demo
最近在用 ArcGIS 写了一个Demo 效果如下: 1. 引用 ArcGIS JS API arcgis_js_api/init.js 2. 引用 样式 arcgis_js_api/js/esri/ ...
- geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...
- ArcGIS JS 3.x使用webgl绘制热力图
ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验. 参考了一下网上webgl热力图,能达到更流畅 ...
随机推荐
- Shell脚本——make命令和Makefile文件【转】
https://blog.csdn.net/twc829/article/details/72729799 make命令是一个常用的编译命令,尤其在C/C++开发中,make命令通过makefile文 ...
- 使用HttpClient访问WebHook
代码: import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.c ...
- MySQL参数: innodb_flush_log_at_trx_commit和sync_binlog
innodb_flush_log_at_trx_commit 当innodb_flush_log_at_trx_commit=0时, log buffer将每秒一次地写入log file, 并且log ...
- https://docs.huihoo.com/infoq/qconbeijing/2016/day1/工程效率提升专题/2-2-支持百度万人开发的工具装备及百度工程能力建设-夏仲璞.pdf
https://docs.huihoo.com/infoq/qconbeijing/2016/day1/工程效率提升专题/2-2-支持百度万人开发的工具装备及百度工程能力建设-夏仲璞.pdf http ...
- https://lug.ustc.edu.cn/wiki/user/boj/linkers-and-loaders
https://lug.ustc.edu.cn/wiki/user/boj/linkers-and-loaders 程序员的自我修养——链接.装载与库
- 借助中间件优化代码 将请求RequestId在服务端接收到请求在处理业务逻辑之前生成
将请求RequestId在服务端接收到请求在处理业务逻辑之前生成
- laravel打印sql所执行的原生语句
DB::listen(function($sql) { foreach ($sql->bindings as $i => $binding) { if ($binding instance ...
- springboot+jwt完成登录认证
本demo用于测试jwt,通过登录验证通过后,使用jwt生成token,然后在请求header中携带token完成访问用户列表信息. 准备工作: 1. 实体类SysUser.java package ...
- cordova run android 可能遇到的错误解决
运行: ionic cordova build 等待下载,然后根据提示 输入android或者ios平台,即可 运行cordova run android 报错: 最快捷的解决方法就是使用Androi ...
- 【转载】 深度学习之卷积神经网络(CNN)详解与代码实现(一)
原文地址: https://www.cnblogs.com/further-further-further/p/10430073.html ------------------------------ ...