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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值