openlayers 3加载GeoServer发布的wfs类型服务

openlayer3加载WFS存在跨域问题,需要用jsonp解决,而jsonp需要用script加载,但加载有误,如图所示,读取cite:bou2_4p图层的GeoJSON

载入地址是这样的http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bou2_4p&maxFeatures=20000000&outputFormat=application%2Fjson
(与WMS不同,真正的发布地址并不是这个)

在geoserver中看到,它输出的格式是json,但如果在js中调用会存在跨域的问题产生

调用代码

在代码中,我将输出格式改变为javascript来解决jsonp
[javascript]  view plain  copy
 print ?
  1. //参数字段  
  2.     var wfsParams = {    
  3.             service : 'WFS',    
  4.             version : '1.0.0',    
  5.             request : 'GetFeature',    
  6.             typeName : 'cite:bou2_4p',  //图层名称     
  7.             outputFormat : 'text/javascript',  //重点,不要改变  
  8.             format_options : 'callback:loadFeatures'  //回调函数声明  
  9.         };    
  10.       
  11.      var vectorSource = new ol.source.Vector({    
  12.          format: new ol.format.GeoJSON(),    
  13.          loader: function(extent, resolution, projection) {  //加载函数  
  14.              var url = 'http://localhost:8080/geoserver/wfs';    
  15.              $.ajax({    
  16.                  url: url,    
  17.                  data : $.param(wfsParams),   //传参  
  18.                  type : 'GET',    
  19.                  dataType: 'jsonp',   //解决跨域的关键  
  20.                  jsonpCallback:'loadFeatures'  //回调  
  21.                      
  22.              });    
  23.          },    
  24.          strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({    
  25.              maxZoom: 25    
  26.          })),    
  27.          projection: 'EPSG:4326'    
  28.      });    
  29.       //回调函数使用  
  30.      window.loadFeatures = function(response) {    
  31.          vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  //载入要素  
  32.              
  33.      };    
  34.      var vectorLayer = new ol.layer.Vector({    
  35.          source: vectorSource  
  36.      });    
  37.      map.addLayer(vectorLayer);    
但出现了如图所示的问题,查看开发工具发现json数据没有套上回调名。


问题的解决

问题应该是在geoserver中产生的,后来在geoserver的web.xml中发现,jsonp的注释没有被注销,导致无法输出jsonp


最后结果,看到已经没有问题
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
GeoServer是一个开源的地理信息系统服务器,它将GIS数据转化为可视化或交互式的Web地图服务,并提供WFS服务,允许用户对数据进行查询、检索、修改和更新。GeoServerWFS服务支持OGC WFS协议,允许用户使用GET、POST和SOAP请求方法以访问WFS功能。我们可以通过GeoServer发布WFS,并在Web应用程序中使用WFS服务来实现数据的查询和交互操作。 首先,我们需要在GeoServer中创建和配置数据存储。接着我们需要选择数据存储的类型,它可以是PostGIS、Oracle Spatial、MySQL、SQL Server、Shapefile或其他支持的空间数据库或文件。我们需要根据数据源的类型选择合适的存储类型,然后连接到数据源并创建工作区。工作区是一个组织空间数据和WFS服务的容器。我们可以在GeoServer中创建多个工作区,每个工作区可以包含一个或多个数据存储。 接下来,我们需要为每个数据存储定义图层。图层是具有独立名称和功能的GIS数据集。我们需要选择要发布的图层,根据需要设置样式和标签,并为每个图层分配名称和唯一的标识符。我们还需要选择要发布的图层格式,支持GML、GeoJSON、KML、Shapefile和WFS等格式。 然后,我们需要启用WFS服务,并为每个图层定义WFS功能。我们可以选择启用WFS 1.0.0、1.1.x和2.0.x协议,在每个协议中为图层定义各种类型WFS查询。我们可以选择支持的查询操作(CRUD)和输出格式,如WFS、GML、JSON和CSV等。 最后,我们需要将发布WFS服务与Web应用程序集成。我们可以使用Java、JavaScript、PHP或其他编程语言来构建自定义Web应用程序,使用WFS服务来查询、检索、修改和更新GIS数据。我们可以使用OpenLayers、Leaflet或其他开源GIS库来构建可视化和交互式Web地图应用程序。 综上所述,通过GeoServer发布WFS服务是非常简单和方便的,只需要完成一系列设置和操作,就可以在Web应用程序中使用WFS服务来访问和管理GIS数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值