SuperMap iClient for WebGL实现WFS查询功能

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

前期准备

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

成果截图

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

主要代码实现过程

function onload(Cesium) {
        if (Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer');
            var imageryLayers = viewer.imageryLayers;
            var provider = new Cesium.SuperMapImageryProvider({
            url : "http://localhost:8091/iserver/services/map-World/rest/maps/World"        //个人发布的二维地图服务
                });
        var imagery = imageryLayers.addImageryProvider(provider);                           //叠加二维地图服务
        }
    
        loadWFS();
    

    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 GMLread= new SuperMap.Format.GML().read(gmlString);
                var geoJsonString = new SuperMap.Format.GeoJSON().write(GMLread,false);
                var pointresult=JSON.parse(geoJsonString);                                   //将 JSON 字符串转换成对象
                var pointSMX = pointresult.features[0].geometry.coordinates[0];              //读取返回值的X坐标值
                var pointSMY = pointresult.features[0].geometry.coordinates[1];              //读取返回值的Y坐标值
                
                viewer.entities.add(new Cesium.Entity({                                     //绘制点要素
                    point : new Cesium.PointGraphics({
                        color : new Cesium.Color(1, 1, 0),
                        pixelSize : 10
                    }),
                    position : Cesium.Cartesian3.fromDegrees(pointSMX, pointSMY , 0)
                }));

                
                }   
            }
} 

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

小结

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