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

来源：互联网发布：ubuntu uefi 引导修复编辑：程序博客网时间：2024/05/16 03:07

作者：郜科科

原文链接：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>

最后贴上一张效果图：

阅读全文

1 0