openlayer3 加载geoserver发布的WFS服务
转自原文 openlayer3加载geoserver发布的WFS服务
1 参考一
1.1 问题
1.2 调用代码
//参数字段
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 问题的解决
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服务的更多相关文章
- openlayers 3加载GeoServer发布的wfs类型服务
转:https://blog.csdn.net/u013323965/article/details/52449502 问题产生: openlayer3加载WFS存在跨域问题,需要用json ...
- World Wind Java开发之十三——加载Geoserver发布的WMS服务（转）
这篇是转载的平常心博客,原地址见:http://www.v5cn.cn/?p=171 1.WMSTiledImageLayer类说明 一个WMSTiledImageLayer类对象只能对应一个WMS发 ...
- ArcGIS api fo silverlight学习一（silverlight加载GeoServer发布的WMS地图）
最好的学习资料ArcGIS api fo silverlight官网:http://help.arcgis.com/en/webapi/silverlight/samples/start.htm 一. ...
- OSGEarth加载 geoserver 发布 TMS
geoserver配好数据并用自带的gwc切片好后, 访问 http://localhost:9999/geoserver/gwc/service/tms/1.0.0/ 在OsgEarth的earth ...
- skyline加载arcgis发布的wms服务
function AddWMSLayer(LayerName) {var _WMSUrl =“http://10.0.4.141:6080/arcgis/services/poss1/MapServe ...
- 如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务
如何在Skyline中加载ArcGISServer发布的WMS和WMTS服务? 我这里的测试环境是ArcGISServer10.1和TerraExplorer Pro7.0,主要过程截图如下,
- arcgis for js 4.6加载本地发布好的2维地图
我本地发布好的地图服务信息如下图所示: 我们在代码中使用到的url是图中所示的REST URL 加载代码如下: <!DOCTYPE html> <html> <head& ...
- OpenLayers调用ArcGIS Server发布的WFS服务
OpenLayers调用ArcGIS Server发布的WFS服务 原创: 蔡建良 2013-08-20 一． 开发环境 1) Openlayers2.13+arcgis server9.3 2) W ...
- sql2008r2,以前好好可以用的,但装了vs2017后,连接不上了,服务也停了,结果手动也 启动不了, 无法加载或初始化请求的服务提供程
日志: 2017-12-14 12:33:17.53 服务器 A self-generated certificate was successfully loaded for encryption.2 ...
随机推荐
- debian卸载vmware
原因: 由于vagrant默认支持virtualbox,而要支持vmware需要一个商用付费的插件.所以卸载vmware,使用virtualbox 具体操作: $ sudo vmware-instal ...
- Linux学习-额外(单一)核心模块编译
编译前注意事项 由于我们的核心原本就有提供很多的核心工具给硬件开发商来使用, 而硬件开发商也需要针对核心 所提供的功能来设计他们的驱动程序模块,因此, 我们如果想要自行使用硬件开发商所提供的模块 来进 ...
- poj2195 bfs+最小权匹配
题意:给个矩阵,矩阵里有一些人和房子(人数和房子数相等),一个人只进一个房子(可以路过房子而不进),每走一步花费1美金,求所有人都进入房子的最小花费,这是典型的二分图带权匹配问题. 这题就是建图有点麻 ...
- 控制台窗口和powershell运行服务会卡住的解决办法
之前使用nodejs做了一个简单的web服务,通过控制台窗口运行,通过浏览器访问发现有时候浏览器等很久数据都加载不出来,以为是代码有问题,后来发现是控制台卡住了,按一下enter键就好了,当时百度了一 ...
- selenium 自动化测试 Chrome 大于 63 版本 不能重定向问题解决办法
Chrome 一些信息: Chrome 63 以后,浏览器默认屏蔽了重定向 Chrome 63 版本,设置了禁止更新,有些情况还是会更新到最新版本 解决过程: 在博客上查到 selenium 里 给 ...
- 缓存淘汰算法之LFU
1. LFU类 1.1. LFU 1.1.1. 原理 LFU(Least Frequently Used)算法根据数据的历史访问频率来淘汰数据,其核心思想是“如果数据过去被访问多次,那么将来被访问的频 ...
- [python 测试框架学习篇] 分享 uiautomator测试框架
uiautomator测试框架 :https://testerhome.com/topics/4194
- IO Streams：缓冲流
我们迄今为止看到的大多数示例都使用无缓冲的I / O.这意味着每个读或写请求都由底层操作系统直接处理.这使程序效率变得很低,因为每个这样的请求经常触发磁盘访问,网络活动或一些相对昂贵的其他操作. 为了 ...
- Welcome-to-Swift-03字符串和字符（Strings and Characters）
String是例如“hello, world“”,“海贼王” 这样的有序的Character(字符)类型的值的集合,通过String类型来表示. Swift 的String和Character类型提供 ...
- NOJ——1624死胡同（胡搞模拟）
[1624] 死胡同 时间限制: 1000 ms 内存限制: 65535 K 问题描述 一个死胡同由排成一列的 n 个格子组成,编号从 1 到 n .实验室的“猪猪”一开始在1号格子,开始向前走,每步 ...