Dowemo
0 0 0 0

a wfs that openlayers3 calls GeoServer.

<!doctype html><html><head><metacharset="utf-8"><title>Load wfs</title><!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --><scriptsrc="js/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><scriptsrc="js/ol.js"></script><!--<script src="js/p-ol3.debug.js"></script>--><scriptsrc="js/jquery-2.1.1.min.js"></script><scriptsrc="js/drag.js"></script></head><divid="map"style="width: 100%"></div><buttonid="loadJson"onClick="loadJson();">Load Json</button><body><scripttype="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) {returnnew 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>

execute results:
part of the red in the diagram is the wfs layer added.
图中用红色笔圈出来的部分就是添加的wfs层

reference:
1. http://blog.csdn.net/u013323965/article/details/52449502




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs