GeoServer

openlayers3调用GeoServer发布的wfs

by giser · 2019-04-02

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层

参考：
1. http://blog.csdn.net/u013323965/article/details/52449502

转载自：https://blog.csdn.net/tuoxinquyu/article/details/76090821

相关推荐

Tags: geoserver openlayers3调用GeoServer发布的wfs

You may also like...