Dowemo

a wfs that openlayers3 calls GeoServer.


<!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>









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