网站首页 > 基础教程 正文
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来说可以做到增删改查的功能,基于本范例的代码稍作更改可以实现。
猜你喜欢
- 2024-11-07 ASP.NET Core 知识速递 - Day 6:每天进步一点
- 2024-11-07 基于nodejs实现根据文件类型统计工程源代码行数
- 2024-11-07 谈谈springboot 获取前端json数据几种方法
- 2024-11-07 GitHub爆火!银四巨作:拼多多/蚂蚁/百度面经分享
- 2024-11-07 RxJs 介绍 rxjs教程
- 2024-11-07 盘点Django展示可视化图表多种方式(建议收藏)
- 2024-11-07 界面美观且友好的前端Bootstrap 3管理模板
- 2024-11-07 可视化:前端数据可视化插件大盘点 图表/图谱/地图/关系图
- 2024-11-07 JQuery 获取多个select标签option的text内容
- 2024-11-07 高清地图产品输出改进过程记录 高精度地图数据格式
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)