阅读排行
首页 > 技术文章

WMS GetFeatureInfo (Tile Layer)——WMS获取要素信息（瓦片图层）

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>WMS GetFeatureInfo (Tile Layer)</title>  
  5.     <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
  6.     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
  7.     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
  8.     <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  
  9.   </head>  
  10.   <body>  
  11.     <div id="map" class="map"></div>  
  12.     <div id="info"> </div>  
  13.     <script>  
  14.       // WMS瓦片数据源  
  15.      var wmsSource = new ol.source.TileWMS({  
  16.         url: ‘https://ahocevar.com/geoserver/wms‘,  
  17.         params: {‘LAYERS‘: ‘ne:ne‘, ‘TILED‘: true},  
  18.         serverType: ‘geoserver‘,  
  19.         crossOrigin: ‘anonymous‘  
  20.       });  
  21.   
  22.       // WMS瓦片图层  
  23.       var wmsLayer = new ol.layer.Tile({  
  24.         source: wmsSource  
  25.       });  
  26.   
  27.       var view = new ol.View({  
  28.         center: [0, 0],  
  29.         zoom: 1  
  30.       });  
  31.   
  32.       var map = new ol.Map({  
  33.         layers: [wmsLayer],  
  34.         target: ‘map‘,  
  35.         view: view  
  36.       });  
  37.   
  38.       // 在地图上单击的时候获取要素信息  
  39.       map.on(‘singleclick‘, function(evt) {  
  40.         document.getElementById(‘info‘).innerHTML = ‘‘;  
  41.         var viewResolution = /** @type {number} */ (view.getResolution());  
  42.         var url = wmsSource.getGetFeatureInfoUrl(  
  43.             evt.coordinate, viewResolution, ‘EPSG:3857‘,  
  44.             {‘INFO_FORMAT‘: ‘text/html‘});  
  45.         if (url) {  
  46.           document.getElementById(‘info‘).innerHTML =  
  47.               ‘<iframe seamless src="‘ + url + ‘"></iframe>‘;  
  48.         }  
  49.       });  
  50.   
  51.       // 根据map的forEachLayerAtPixel方法来判断当前像素位置是否有要素，如果有则改变鼠标样式  
  52.       map.on(‘pointermove‘, function(evt) {  
  53.         if (evt.dragging) {  
  54.           return;  
  55.         }  
  56.         var pixel = map.getEventPixel(evt.originalEvent);  
  57.         var hit = map.forEachLayerAtPixel(pixel, function() {  
  58.           return true;  
  59.         });  
  60.         map.getTargetElement().style.cursor = hit ? ‘pointer‘ : ‘‘;  
  61.       });  
  62.     </script>  
  63.   </body>  
  64. </html>  
文章来自：https://www.cnblogs.com/zb347954263/p/8276366.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3