Openlayers实现WFS服务及单击要素查询

带迦起舞

已于 2023-03-01 16:32:52 修改

阅读量8.9k

点赞数 4

分类专栏： WebGIS 文章标签： WebGIS WFS

于 2017-07-26 14:45:22 首次发布

本文链接：https://blog.csdn.net/sinat_28797501/article/details/76146804

版权

WebGIS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

Openlayers实现WFS服务及单击要素查询

作者：郜庆科

原文链接：http://blog.csdn.net/u013323965/article/details/52449502

openlayers实现WFS时会出现跨域访问问题，解决方法参考上述链接。在原文基础上进行了WFS服务并融合单击要素查询属性功能，代码如下：

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" http-equiv="Access-Control-Allow-Oringin" content="http://localhost">
    <link rel="stylesheet" href="SRC/ol.css" type="text/css">
    <style>
      .map { height: 400px; width: 100%;}
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <input type="button" name="home" value="home" onclick="select_home()">
    <input type="button" name="road" value="road" onclick="select_road()">
    <div id="info"></div>
    <script>
    function wfs(name){
      var wfsParams = {    
            service : 'WFS',    
            version : '1.0.0',    
            request : 'GetFeature',    
            typeName : name,  //图层名称     
            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  
      });    
      return vectorLayer;
    }

    var wfs_layer = null;

    function clcall(){
      if(wfs_layer){
        map.removeLayer(wfs_layer);
        wfs_layer = null;
      }
    }

    function select_home(){
      var name = 'map:home';
      clcall();
      wfs_layer = wfs(name);
      map.addLayer(wfs_layer);
    }

    function select_road(){
      var name = 'map:road';
      clcall();
      wfs_layer = wfs(name);
      map.addLayer(wfs_layer);
    }

    
    var baseLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    var map = new ol.Map({
      layers: [baseLayer],
      target: document.getElementById('map'),
      view: new ol.View({
        center: [114.3, 30.6],
        projection: 'EPSG:4326',
        maxZoom: 19,
        zoom: 12
      })
    });

	//实现高亮显示
    var featureOverlay = new ol.layer.Vector({
      source: new ol.source.Vector(),
      map: map,
      style: new ol.style.Style({
        image: new ol.style.Circle({
                radius: 5,
                fill: null,
                stroke: new ol.style.Stroke({color: 'red', width: 1})
              })
        })
    });

    var highlight;
    var displayFeatureInfo = function(pixel) {

      var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
        return feature;
      });

      var info = document.getElementById('info');
      if (feature) {
        info.innerHTML = feature.getId() + '<br>';
        var keys = feature.getKeys();
        var properties = feature.getProperties();
        for (var i = 0;i<keys.length;i++)
        {
          info.innerHTML += keys[i] + ' ： ';
          info.innerHTML += properties[keys[i]] + '<br>';
        }
      } else {
        info.innerHTML = ' ';
      }

      if (feature !== highlight) {
        if (highlight) {
          featureOverlay.getSource().removeFeature(highlight);
        }
        if (feature) {
          featureOverlay.getSource().addFeature(feature);
        }
        highlight = feature;
      }

    };

      // map.on('pointermove', function(evt) {
      //   if (evt.dragging) {
      //     return;
      //   }
      //   var pixel = map.getEventPixel(evt.originalEvent);
      //   displayFeatureInfo(pixel);
      // });

    map.on('click', function(evt) {
      displayFeatureInfo(evt.pixel);
    });

    </script>
  </body>
</html>

最后贴上一张效果图：