转:https://blog.csdn.net/u013323965/article/details/52449502

问题产生:

     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中调用会存在跨域的问题产生
 
但出现了如图所示的问题,查看开发工具发现json数据没有套上回调名。

调用代码

在代码中,我将输出格式改变为javascript来解决jsonp
 //参数字段
var wfsParams = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'cite:bou2_4p', //图层名称
outputFormat : 'text/javascript', //重点,不要改变
format_options : 'callback:loadFeatures' //回调函数声明
}; var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) { //加载函数
var url = 'http://localhost:8080/geoserver/wfs';
$.ajax({
url: url,
data : $.param(wfsParams), //传参
type : 'GET',
dataType: 'jsonp', //解决跨域的关键
jsonpCallback:'loadFeatures' //回调 });
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 25
})),
projection: 'EPSG:4326'
});
//回调函数使用
window.loadFeatures = function(response) {
vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response)); //载入要素 };
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
但出现了如图所示的问题,查看开发工具发现json数据没有套上回调名。

问题的解决

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

openlayers 3加载GeoServer发布的wfs类型服务的更多相关文章

  1. openlayer3 加载geoserver发布的WFS服务

    转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题,需 ...

  2. World Wind Java开发之十三——加载Geoserver发布的WMS服务(转)

    这篇是转载的平常心博客,原地址见:http://www.v5cn.cn/?p=171 1.WMSTiledImageLayer类说明 一个WMSTiledImageLayer类对象只能对应一个WMS发 ...

  3. ArcGIS api fo silverlight学习一(silverlight加载GeoServer发布的WMS地图)

    最好的学习资料ArcGIS api fo silverlight官网:http://help.arcgis.com/en/webapi/silverlight/samples/start.htm 一. ...

  4. OSGEarth加载 geoserver 发布 TMS

    geoserver配好数据并用自带的gwc切片好后, 访问 http://localhost:9999/geoserver/gwc/service/tms/1.0.0/ 在OsgEarth的earth ...

  5. 如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务

    如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务? 我这里的测试环境是ArcGISServer10.1和TerraExplorer Pro7.0,主要过程截图如下,

  6. Openlayers Overlay加载gif图片

    说明: 项目中使用vector图层做图片撒点功能,发现加载gif没有效果.网上查找资料发现,openlayers不支持gif图片样式. 后面采用overlay的方式,gif图片赋值给DOM元素 解决方 ...

  7. arcgis for js 4.6加载本地发布好的2维地图

    我本地发布好的地图服务信息如下图所示: 我们在代码中使用到的url是图中所示的REST URL 加载代码如下: <!DOCTYPE html> <html> <head& ...

  8. OpenLayers 3加载本地Google切片地图

    OpenLayers  提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...

  9. Assembly.LoadFrom() 方法加载程序集,无法转换类型

    有些情况在开发一个C#框架的时候,要用到反射加载另外程序集,这是必然考虑的事情.这样做的好处就是多个工程同时作业的时候,可以互不干扰,替换DLL文件即可. Assembly.Load();这个方法只能 ...

随机推荐

  1. Agri-Net - poj 1258 (Prim 算法)

      Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44373   Accepted: 18127 Description F ...

  2. linux下LAMP环境搭建

    ++++++++++++++++++++++++++++++++++++++++++++++ linux下LAMP环境搭建 ++++++++++++++++++++++++++++++++++++++ ...

  3. 最小生成树——Prim(普利姆)算法

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解Prim算法的idea 并用 源代码加以实现: 0.2)最小生成树的基础知识,参见 http://blog. ...

  4. F - Monkey Banana Problem

    F - Monkey Banana Problem Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & ...

  5. Eclipse下使用maven搭建多模块项目

    暂时将项目分为如下几层: domain(域模型层).dao(数据库访问层).service(业务逻辑层).web(表现层),有需要再另行添加(如common等): 目录结构: 一.app 该层为父层, ...

  6. WCF基础之大型数据和流

    在WCF的实际应用中,有可能存在10M,100M甚至G级别的传输,这个时候我们就不得不考虑编码和传输模式,当然得选择相应的绑定(binding) 如上图所示,我可以直接使用系统提供的相应绑定,然后设置 ...

  7. 【译】理解Spring MVC Model Attribute 和 Session Attribute

    作为一名 Java Web 应用开发者,你已经快速学习了 request(HttpServletRequest)和 session(HttpSession)作用域.在设计和构建 Java Web 应用 ...

  8. Django安装debug tool bar

    1.安装Django Debug Toolbarpip install django-debug-toolbar 2.设置项目的DEBUG属性DEBUG = True 3.INSTALLED_APPS ...

  9. SM30 表格维护生成器

    1)SE11创建自建表,结构如下: 2) 创建表维护 3) 针对上面创建的函数组ZMM_MAT_DESC,做以下增强处理 添加的Module 代码如下: module mod_customize in ...

  10. 运行“cordova build android” - 无法找到属性android:fontVariationSettings和android:ttcIndex

    :app:processArm64DebugResourcesC:\Users\xfcao\.gradle\caches\transforms-1\files-1.1\xwalk_core_libra ...