转自原文 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. TCP的三次握手和四次握手

    三次握手(建立连接) 首先,服务器进程(B)先创建传控制块TCB(用来存储连接信息,如连接表,发送和接收序号等),准备接收客户进程(A)的请求.然后服务器进程处于LISTEN(收听)状态,等待客户的连 ...

  2. debian7不能apt安装emacs24

    维护者在主页上 http://emacs.naquadah.org/ 提到: These packages are not maintained anymore I don't use these p ...

  3. Linux学习-Linux 的开机流程分析

    开机流程一览 系统开机的经过可以汇整成底下的流程的: 加载 BIOS 的硬件信息与进行自我测试,并依据设定取得第一个可开机的装置; 读取并执行第一个开机装置内 MBR 的 boot Loader (亦 ...

  4. HBase0.94.2-cdh4.2.0需求评估测试报告1.0之四

    第二组:文件存储读过程记录 第一组:一个列,四个分区,随机ID 测试列和分区 测试程序或命令 导入文件大小(Mb) 导入文件个数(个) 是否触发flush事件(布尔) 是否触发compact事件(布尔 ...

  5. spoj104 HIGH - Highways 矩阵树定理

    欲学矩阵树定理必先自宫学习一些行列式的姿势 然后做一道例题 #include <iostream> #include <cstring> #include <cstdio ...

  6. 精通CSS高级Web标准解决方案（1-3 规划、组织与维护样式表）

    对文档应用样式 对代码进行注释/*......*/ 结构性注释 自我提示 删除注释.优化样式表 样式指南:解释代码与站点的视觉设计是如何组织在一起的 站点结构.文件结构.命名规则 编码标准:(X)ht ...

  7. TensorFlow——深入MNIST

    程序(有些不甚明白的地方改日修订): # _*_coding:utf-8_*_ import inputdata mnist = inputdata.read_data_sets('MNIST_dat ...

  8. Android中动态改变控件的大小的一种方法

    在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...

  9. 关于 __int128

    __int128 是 GCC 提供的扩展(extension),可以当作 128 位整数使用. 关于 __int128 和 __int128_t Normally, _t suffix means a ...

  10. Coloring Torus（Atcoder Grand Contest 030 C）

    怎么外国都喜欢考脑筋急转弯…… 题意 输入 $k$,要求构造一个 $n\times n$ 的矩阵($n$ 自选),使得恰好用 $k$ 中颜色把每个点都染色,并且同一种颜色的格子周围 相邻的每种颜色数量 ...