代码编织梦想

作者:John

    经常有客户咨询,说SuperMap iClient只有对点数据集的修改 & 添加,对于面数据的操作不清楚改如何去做,下面我就以iClient for MapboxGL 和其Draw控件来实现面数据加载与编辑的功能。

    效果截图
在这里插入图片描述

    实现面数据加载与编辑思路:
      1. 数据查询;
      2. Draw控件添加查询面数据;
      3. 修改面对象数据并保存;
      4. 要素更新。

    1. 数据查询
      本次通过iServer的几何查询获取该几何面对象所相交数据集的面对象,可以参考官网代码( https://iclient.supermap.io/examples/mapboxgl/editor.html#02_getFeatureByGeometry )再此就不做多余介绍,如果需要使用其他的查询方案可以iClent 官网范例代码实现。

    2. Draw控件添加查询面数据
      mapbox-gl-draw控件的使用可以参考其官方API文档: https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md ,将上一步查询查询的结果添加到Draw控件中需要使用到其add()接口,其详细介绍如下图:
在这里插入图片描述
实现代码如下:


<!-- 引入Draw控件包  -->
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css' type='text/css' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js'></script>

    // mapbox 绘制要素图形控件
    var Draw = new MapboxDraw();
    map.addControl(Draw,'top-left');
    
    //  遍历添加第一步查询结果的面数据
	for (var i=0; i< serviceResult.result.features.features.length; i++){
	    Draw.add(serviceResult.result.features.features[i]);
	}
	

    3. 修改面对象数据并保存
      通过draw控件的“draw.selectionchange”去监听选中的对象,Draw.getSelected()获取选中的面对象数据,创建table表显示属性值,监听input的change事件去修改properties。

实现代码如下:


	var fea,propertiesList = [];
    map.on("draw.selectionchange",function(e){
        fea = Draw.getSelected()
        
        if (fea && fea.features && fea.features[0]) {
            var properties = fea.features[0].properties
            // 判断系统属性字段SM开头除了SMID & SMUSERID不显示
            var reg = new  RegExp("^(?=SM)")
            for (var iable in properties) {
                if (!reg.test(iable) || iable == "SMID" || iable == "SMUSERID"){
                    propertiesList.push(iable)
                }
            }
            // 判断是否已经创建了table表
            if (document.getElementById("propertiesTable")){
                document.getElementById("propertiesTable").parentNode.removeChild(document.getElementById("propertiesTable"));
            }
            // 创建页面table表
            var tabl = document.createElement("table");
            tabl.setAttribute("id", "propertiesTable");
            var tablebody = document.createElement("tbody");
            var tablehead = document.createElement("thead");
            var tr,tdP,tdV,tdtext;
            var trHead =  document.createElement("tr");
            var tdHeadP = document.createElement("td");
            var tdHeadV = document.createElement("td");
            var tdHeadPTX = document.createTextNode("PROPERTY");
            var tdHeadVTX = document.createTextNode("VALUE");
            tdHeadP.appendChild(tdHeadPTX)
            tdHeadV.appendChild(tdHeadVTX)
            trHead.appendChild(tdHeadP)
            trHead.appendChild(tdHeadV)
            tablehead.appendChild(trHead)
            tabl.appendChild(tablehead)
            
            for (var i=0; i < propertiesList.length; i++) {
                tr = document.createElement("tr");
                tdP = document.createElement("td")
                tdV = document.createElement("td")
                tdtext = document.createTextNode(propertiesList[i]);
                tdP.appendChild(tdtext)
                tr.appendChild(tdP)
                if (propertiesList[i] == "SMID") {
                    tdtext = document.createTextNode(properties[propertiesList[i]]);
                    tdV.appendChild(tdtext)
                } else {
                    var inp = document.createElement("input");
                    inp.value = properties[propertiesList[i]]
                    inp.setAttribute("onChange", "inputChange("+ i +")")
                    inp.setAttribute("id", "input"+i)
                    tdV.appendChild(inp) 
                }
                tr.appendChild(tdV)
                
                tablebody.appendChild(tr)
            }
            tabl.appendChild(tablebody)
            document.getElementsByTagName("body")[0].appendChild(tabl)
        }
        
    })
    
    // 修改更新properties
    function inputChange(id){
        var inValue = document.getElementById("input" + id).value;
        var ids =  Draw.getSelectedIds();
        Draw.delete(Draw.getSelectedIds())
        if (fea){
            fea.features[0].properties[propertiesList[id]] = inValue
        }
        Draw.add(fea)
    

    4. 要素更新
      使用iClient的要素数据集类(FeatureService)的地物编辑方法(editFeatures)去更新数据集数据,其传参EditFeaturesParameters详细介绍如下

在这里插入图片描述

实现代码如下:

function submit(){
        var drs = Draw.getAll();
        var addFeatureParams = new SuperMap.EditFeaturesParameters({
            features: drs.features,
            dataSourceName: "World",
            dataSetName: "Countries",
            editType: "update",
            returnContent: true
        });
        var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
        featureService.editFeatures(addFeatureParams, function (serviceResult) {
            if (serviceResult.result.succeed) {
                fea,propertiesList = []
                Draw.deleteAll()
                if (document.getElementById("propertiesTable")){ 
                	document.getElementById("propertiesTable").parentNode.removeChild(document.getElementById("propertiesTable"));
            	}
                query()
            }
        });
    }

以上就是实现加载编辑数据的完整流程,本文只是提供解决加载更新数据集,需要注意的是针对实际项目中应该是将修改后的对象提交更新操作,而不是把Draw里面所有的features均提交更新。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/supermapsupport/article/details/121981532

iclient js之查询交互-爱代码爱编程

作者:MR.     在地图应用中,最最基础的当然应该是地图的浏览与展示,其次,我认为就是查询了,之后的各种功能或多或少都要依赖于查询结果。本文为查询交互系列文章的第一篇,主要简介其分类、使用入门以及交互。 #

在supermap iclient 9d for mapboxgl中使用echarts和mapv_supermapsupport的博客-爱代码爱编程

作者: MR.     SuperMap iClient 9D 是云GIS网络客户端开发平台。基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端。集成了领先的开源地

supermap iclient 9d for openlayers 快速入门_supermapsupport的博客-爱代码爱编程

作者:doremi 随着SuperMap 9D产品的发布,带来了全新的SuperMap iClient 9D产品。今天就为大家介绍下其中的一款SuperMap iClient 9D for OpenLayers的

聊聊iclient for leaflet坐标转换问题_supermapsupport的博客-爱代码爱编程

作者:张永利 背景 SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了,针对新推出的三款客户端产品,Leaflet,OpenLayaers,MapboxGL,各自的

supermap iclient3d for webgl 实用锦囊之数据加载与显示_supermapsupport的博客-爱代码爱编程

SuperMap iClient3D for WebGL 实用锦囊之数据加载与显示 数据是GIS的血液,如果没有数据,后续的所有操作都无法实现。大家在使用SuperMap iClient3D for WebGL来做web端

supermap iclient for openlayers 实现wfs查询功能_supermapsupport的博客-爱代码爱编程

SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Openlayers客户端的示例,在此文章中将简单介绍iClient for

iclient之自定义地图气泡_supermapsupport的博客-爱代码爱编程

作者:布鲁斯李 想必大家已经熟悉iClient for JavaScript中各个产品地图气泡的使用,今天就来介绍一下如何自定义地图气泡,体验气泡图带来的浪漫又自由的全新体验。本文将主要讲解Leaflet中自定义

浅谈 supermap iclient for leaflet (一)地图展示功能实现_不解清风的博客-爱代码爱编程_l.supermap.tiledmaplayer

首先呢我自己学习这个部分用了挺多时间的总结出我对于SuperMap的一些功能及应用,也算是我的笔记了吧,话不多说直接看代码吧 第一步我们要把下载好的引入文件整理出来,毕竟下载出来的包里面含有很多案例,他们的内存也是比较大的,在本身的开发中不一定需要全部的文件,部分即可      这边是我现在所用到的一些包,需要注意的是下面这两个文件中,部分代码需

基于supermap iclient for mapboxgl实现等时圈功能-爱代码爱编程

功能介绍 等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围。之前在简书上看到过一篇文章,介绍的是基于mapboxgl使用turf去实现等时圈的方法:等时圈实现 。 最近在使用超图产品进行学习,看到iC

iclient对接点聚合分析-爱代码爱编程

作者:XingJun      点聚合分析与“iClient对接密度分析”一文中提到的密度分析一样,也是 iServer的分布式分析服务提供多种分析服务之一。该服务根据接收的分析参数,并将分析结果发布成Rest地图服务,然后将地图服务的地址返回给iClient,iClient再将其显示在地图上。本文以SuperMap iClient JavaScript

iclient对接属性汇总分析_supermapsupport的博客-爱代码爱编程

作者:LX 在SuperMap iServer分布式分析服务中,提供了针对海量数据的属性汇总分析功能。本文将介绍如何通过iClient对接分布式分析服务中的属性汇总分析服务并将结果在前端展示。 一、 属性汇总是

iclient for openlayers绘制图形入库-爱代码爱编程

iClient for OpenLayers绘制图形入库 作者:yangjl 在支持的过程中,我曾遇到过一个客户小伙伴问我怎么将绘制的图形入库,其实方式有很多种,我就挑选了一种较为简单的方式,利用nodejs创

webpack+ES6+SuperMap iClient for MapboxGL学习笔记-爱代码爱编程

一、基本介绍 1、SuperMap iClient for MapboxGL 介绍 SuperMap iClient for MapboxGL 是一套基于 MapboxGL 的云 GIS 网络客户端开发平台,支持访问 SuperMap iServer / iEdge / iPortal / iManager / Online 的地图、服务和资源,为用户

快速上手iClient组件之Vue-iClient-MapboxGL-爱代码爱编程

作者:LX 背景 SuperMap iClient产品从10i版本开始增加了组件库,组件库在架构设计上采用 MVVM 模式(Model-View-ViewModel),同时可以兼容多种框架,例如 Vue、React、Angular 以及原生 H5 开发。使用 SuperMap iClient 组件库,可像搭积木一样快速的创建自定义的 WebG

Openlayers记录(三)iClient for ol 实现聚合标签专题图。-爱代码爱编程

Openlayers记录(三)iClient for ol 实现聚合标签专题图。 先看效果 点击某个标签的时候,弹出具体信息 同时具有图例级别 实现代码 /*****标签专题图********/ var themeSource, themeData; var myDate = new Date(); function LabelThemeLay

iClient模拟疫情变化过程-爱代码爱编程

作者:lly 背景 为了方便直观的了解疫情的变化过程,我们使用iClien客户端专题图来动态展示疫情的变化。 首先我们来看一看实现效果: 一、数据制作 数据需要制作为以下格式,即每天对应一个属性字段,并填充相应的数据,例: 行政区划D25D26四川12湖北1020二、字段查询 查询时间字段,用于专题图赋值 var param = n

Ribbon架构解析之IClient请求客户端-爱代码爱编程

IClient Ribbon发送请求的抽象接口,我们先来看看接口定义 传入一个 ClientRequest 和 一个 IClientConfig 返回一个 IResponse很简单. 再来看看UMLClientRequest 表示适用于所有通信协议的通用客户端请求对象。该对象是immutable不可变的。 public class ClientReque

SuperMap iServer数据动态更新刷新地图与数据服务-爱代码爱编程

一、使用背景 有这么一个需求,后端也就通过SuperMap iDesktop或数据库更新了新增或更新某个数据地理信息后,服务端也就是SuperMap iServer无法实时查看到更新的数据,原因是SuperMap iServer没有主动监测第三方修改数据的变化(使用SuperMap iServer接口增删改无该问题) 解决方式要么通过重启SuperMap