SuperMap iClient for MapboxGL 实现WFS查询功能

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

前期准备

WFS服务地址，此次使用的地址是SuperMap官方的wfs服务地址:“http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100”；
引用的js文件有include-mapboxgl.js，jquery.min.js和SuperMap-8.1.1-17226.js；

成果截图

图中红框内的小圆圈是定位在北京的查询结果，此次的查询范例实现的是根据SMID查询北京所在位置的功能。

主要代码实现过程

function loadWFS(){$.ajax({url:' http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100',type:'POST',contentType: 'text/plain;charset=UTF-8', // 这里必须设置，否则会默认以form表单数据进行发送 traditional: true, data: '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs" service="WFS" version="1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">'+'<wfs:Query typeName="World:capital" xmlns:World="http://www.supermap.com/World">'+'<wfs:PropertyName>SMY,SMX,SMUSERID,SMLIBTILEID,SMID,SMGEOMETRYSIZE,COUNTRY,CAP_POP,CAPITAL,the_geom</wfs:PropertyName>'+'<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">'+'<ogc:PropertyIsEqualTo xmlns:ogc="http://www.opengis.net/ogc">'+'<ogc:PropertyName>SMID</ogc:PropertyName>'+'<ogc:Literal>170</ogc:Literal>'+'</ogc:PropertyIsEqualTo>'+'</ogc:Filter>'+'</wfs:Query>'+'</wfs:GetFeature>',success:loadWFSHandler,error:function (rst) {console.log('request error.')}})function loadWFSHandler(gmlString){var GMLFormat= new SuperMap.Format.GML().read(gmlString);//读取GML格式的数据var geoJsonString = new SuperMap.Format.GeoJSON().write(GMLFormat,false);//将GML格式的数据写成GeoJSON格式var point=JSON.parse(geoJsonString);//解析GeoJSON格式的数据为JavaScript对象map.addSource('point', { type: 'geojson', data: point });map.addLayer({'id': 'pointlayer','type': 'circle','source': "point",'paint': {"circle-radius": 6,"circle-color": "#FF3030","circle-opacity": 0.6,"circle-stroke-width": 2,"circle-stroke-color": "#FF0000","circle-stroke-opacity": 0.8}});}

ogc:Filter的过滤参数用来设置查询限制条件，空间的或非空间的限制条件都可以进行设置，可用来限制 GetFeature 操作的结果，即要素结果集。本次示例中使用的是PropertyIsEqualTo，即PropertyName字段的值等于Literal的情况。

小结

本次范例的演示只是基于WFS的查询功能，对于WFS来说可以做到增删改查的功能，基于本范例的代码稍作更改可以实现。

SuperMap iClient for MapboxGL 实现WFS查询功能相关推荐

SuperMap iClient for Leaflet实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Leaflet客户端的示例,在此文章中将简单介绍iC ...
SuperMap iClient for Openlayers 实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Openlayers客户端的示例,在此文章中将简单介 ...
在SuperMap iClient 9D for MapboxGL中使用ECharts和MapV
作者: MR. SuperMap iClient 9D 是云GIS网络客户端开发平台.基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端.集成了领先的开 ...
SuperMap iClient 9D for MapboxGL地图风格浅析
作者:dominating ###前言随着SuperMap iServer 9D的发布,iServer增加了许多的新功能,其中之一就是地图服务模块,矢量切片(tileFeature)资源增加了支持 ...
SuperMap iClient for JavaScript 实现拖动半径进行距离查询
作者:sniper 前一段时间有很多朋友问我,怎么用SuperMap iClient for JavaScript实现类似百度地图或高德地图那样拖动一个按钮选择半径,从而查询附近的地理要素.因此,我们 ...
SuperMap iClient for Leaflet对EPSG:4509图加载滑动查询
作者:John SuperMap iClient for Leaflet对EPSG:4509地图加载&滑动查询在WebGIS开发使用中,我们会遇到地图显示不了,以及查询到数据显示不出的问题, ...
SuperMap iClient for JavaScript常见问题解答集锦（十二）
作者:皇皇问:如果您在OpenStack平台中创建虚拟机时出现以下错误信息Build of instance aborted: Flavor is disk is too small for req ...
java取geosever数据,终于搞定了GeoServer的WFS查询
上一周,我在学习OpenLayers．一开始是用Image做数据,后来发现图片的分辨率始终有限,就想到动态获取数据．立即想到了以前在SKY看过的图片切片 ,MS太难了．不过OpenLayers作为轻量 ...
超图supermap实现BIM模型的属性查询
有了BIM+GIS,实现室内室外一体化,室内导航等不再是梦想了哈! 最近为了学bim+gis,断断续续开始学超图产品,还是小白一枚,若分享中有错误,欢迎批评指正! 关于BIM的属性查询,之前在网上没找 ...

SuperMap iClient for MapboxGL 实现WFS查询功能

前期准备

成果截图

主要代码实现过程

小结

SuperMap iClient for MapboxGL 实现WFS查询功能相关推荐

最新文章

热门文章