转自原文 openlayer3加载geoserver发布的WFS服务

openlayers3调用GeoServer发布的wfs

1 参考一

1.1 问题

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中调用会存在跨域的问题产生

1.2 调用代码

在代码中，我将输出格式改变为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

     });

     map.addLayer(vectorLayer);

但出现了如图所示的问题，查看开发工具发现json数据没有套上回调名。

1.3 问题的解决

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

2 参考二

openlayers3调用GeoServer发布的wfs

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Load wfs</title>

    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->

    <script src="js/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <script src="js/ol.js"></script>

    <!--<script src="js/p-ol3.debug.js"></script>-->

    <script src="js/jquery-2.1.1.min.js"></script>

    <script src="js/drag.js"></script>

</head>

<div id="map" style="width: 100%"></div>

<button id="loadJson" onClick="loadJson();">Load Json</button>

<body>

    <script type="text/javascript">

    //======================================          

    var osmLayer = new ol.layer.Tile({

        source: new ol.source.OSM()

    });

    var map = new ol.Map({

      controls: ol.control.defaults(),

      layers:[

        osmLayer

      ],

      target: 'map',

        view: new ol.View({

            center: [590810,4915303],

            zoom: 2,

            projection: 'EPSG:3857'

        })

    });

    map.addLayer(wfsVectorLayer);

    //======================================方法一

    var wfsVectorLayer;

    wfsVectorLayer = new ol.layer.Vector({

        source: new ol.source.Vector({

          format: new ol.format.GeoJSON({

            geometryName: 'the_geom'

          }),

          url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=tiger:tiger_roads&outputFormat=application/json&srsname=EPSG:4326'

        }),

        style: function(feature, resolution) {

          return new ol.style.Style({

            stroke: new ol.style.Stroke({

              color: 'blue',

              width: 5

            })

          });

        }

      });

    //======================================方法二

    //参数字段

    var wfsParams = {

        service : 'WFS',

        version : '1.0.0',

        request : 'GetFeature',

        typeName : 'topp:tasmania_roads',  //图层名称

        outputFormat : 'text/javascript',  //重点，不要改变

        format_options : 'callback:loadFeatures'  //回调函数声明

    };    

     //使用jsonp，可以解决跨域的问题，GeoServer中的web.xml文件关于jsonp的注释要去掉，就可以支持跨域了

     var vectorSource = new ol.source.Vector({

         format: new ol.format.GeoJSON(),

         loader: function(extent, resolution, projection) {  //加载函数

             var url = 'http://localhost:8888/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));  //载入要素

         //坐标转换，将返回的数据的坐标转换到当前使用地图的坐标系，否则，无法正常显示

         vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response,{

             dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系

             featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系

         }));  //载入要素  

     };

     var vectorLayer = new ol.layer.Vector({

         source: vectorSource

     });

     map.addLayer(vectorLayer);

    //======================================

    </script>

</body>

</html>

执行结果：
图中用红色笔圈出来的部分就是添加的wfs层

openlayer3 加载geoserver发布的WFS服务的更多相关文章

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

    转:https://blog.csdn.net/u013323965/article/details/52449502 问题产生:      openlayer3加载WFS存在跨域问题,需要用json ...

  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加载arcgis发布的wms服务

    function AddWMSLayer(LayerName) {var _WMSUrl =“http://10.0.4.141:6080/arcgis/services/poss1/MapServe ...

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

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

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

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

  8. OpenLayers调用ArcGIS Server发布的WFS服务

    OpenLayers调用ArcGIS Server发布的WFS服务 原创: 蔡建良 2013-08-20 一． 开发环境 1) Openlayers2.13+arcgis server9.3 2) W ...

  9. sql2008r2,以前好好可以用的,但装了vs2017后,连接不上了,服务也停了,结果手动也 启动不了, 无法加载或初始化请求的服务提供程

    日志: 2017-12-14 12:33:17.53 服务器 A self-generated certificate was successfully loaded for encryption.2 ...

随机推荐

  1. Linux操作系统启动流程

    一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下几步:1)开机BIOS自检,加载硬盘.2)读取MBR,进行MBR引导.3)grub引导菜单(Boot L ...

  2. vmware10下载地址

    https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-10.0.1-1379776.x86_64.bundle ...

  3. 天气API接口的使用

    最近项目中使用到了天气预报的功能,需要从网上获取天气数据,然后显示在公司系统的页面上. 在这里和大家分享下我的做法,希望能对大家有所帮助,如果有错误,欢迎大家指正. 先给大家看看效果: 下面开始进行讲 ...

  4. hdu4861 我只能说这是找规律=.=

    先说明一下题意,因为开始我就没太读懂,感觉作者不是没交代清楚就是让做题的人自己去领悟,开始我不知道球是可以随便选的,然后那个关系式到底是最后一个数模p,还是整体模P........最后确定是整体模P ...

  5. ASP.Net 更新页面输出缓存的几种方法

    ASP.Net 自带的缓存机制对于提高页面性能有至关重要的作用,另一方面,缓存的使用也会造成信息更新的延迟.如何快速更新缓存数据,有时成了困扰程序员的难题.根据我的使用经验,总结了下面几种方法,概括了 ...

  6. WordCount 2.0（结对项目）

    序言 合作伙伴 201631062220      201631062120 项目码云地址: https://gitee.com/zhege/WordCount 作业详细要求 系统分析与设计结对项目 ...

  7. Response.End报错

    以下摘抄自博问:https://q.cnblogs.com/q/31506/       try catch中使用Response.End() 我在WebForm中用ajax发送请求到页面index. ...

  8. 九度oj 题目1465：最简真分数

    题目描述: 给出n个正整数,任取两个数分别作为分子和分母组成最简真分数,编程求共有几个这样的组合. 输入: 输入有多组,每组包含n(n<=600)和n个不同的整数,整数大于1且小于等于1000. ...

  9. 【bzoj4004】[JLOI2015]装备购买 贪心+高斯消元求线性基

    题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量zi(aj ,.....,am) 表示 (1 <= i <= n; 1 <= j < ...

  10. CSS3box-shadow属性的使用

    每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看. 一.语法: E {box-shadow: inset x-offset y-offset blur-radi ...