OpenLayers中的点击功能可获取更多信息OpenLayers3和GeoServer

编程问答 2022-06-07

问题描述

当我在地图上单击该多边形时，我尝试将与先前与GeoServer一起在OpenLayers3上显示的某个多边形相关的信息带入该窗口中，该信息应显示该信息并放大几何图形。 >

到目前为止，我在论坛上已经了解到其他人在我之前所做的事情：

  var tot = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                        url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',params: {'LAYERS': 'ADMINISTRATIE:pdf','STYLES':'TEREN',tiled:true,transparent: true },format: new ol.format.GeoJSON(),ratio: 1,serverType:'geoserver'
                        
              })
          });   
             
          
          map.addLayer(tot);

map.on("singleclick",function (evt) {
        console.log("test");
          this.forEachFeatureAtPixel(evt.pixel,function (feature,layer) {
            console.log(feature);
          });
      });

我在这里尝试singleclick事件，转到地图上并显示“测试”，但该功能根本不想显示：（

map.on("singleclick",layer) {
            console.log(feature);
          });
      });

我对这些概念非常陌生，现在我正在学习一个小项目，在该项目中我想做一些基本的事情，为此，我寻求您的帮助。谢谢！

解决方法

我尝试过这样：

<!DOCTYPE html>
<html>
  <head>
    <title>WMS GetFeatureInfo (Tile Layer)</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      var wmsSource = new ol.source.TileWMS({
        url: 'http://localhost:10000/geoserver/ADMINISTRATIE/wms',params: {'LAYERS': 'ADMINISTRATIE:pdf','STYLES':'TEREN',tiled:true,transparent: true },serverType: 'geoserver',crossOrigin: 'anonymous'
      });

      var wmsLayer = new ol.layer.Tile({
        source: wmsSource
      });

      var view = new ol.View({
        center: [0,0],zoom: 1
      });

      var map = new ol.Map({
        layers: [wmsLayer],target: 'map',view: view
      });

      map.on('singleclick',function(evt) {
        document.getElementById('info').innerHTML = '';
        var viewResolution = /** @type {number} */ (view.getResolution());
        var url = wmsSource.getGetFeatureInfoUrl(
            evt.coordinate,viewResolution,'EPSG:3857',{'INFO_FORMAT': 'text/html'});
        if (url) {
          document.getElementById('info').innerHTML =
              '<iframe seamless src="' + url + '"></iframe>';
        }
      });

      map.on('pointermove',function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel,function() {
          return true;
        });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });
    </script>
  </body>
</html>

它不显示地图，并给我这个错误：

Access to image at 'http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244:1 GET http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244 net::ERR_FAILED
Image (async)
nx @ ol.js:719
k.load @ ol.js:646
jg @ ol.js:124
k.fl @ ol.js:387
setTimeout (async)
k.Zo @ ol.js:392
(anonymous) @ ol.js:378
requestAnimationFrame (async)
k.render @ ol.js:389
k.Tk @ ol.js:389
b @ ol.js:15
Na.b @ ol.js:18
Va @ ol.js:20
k.set @ ol.js:20
k.I @ ol.js:21
I @ ol.js:380
(anonymous) @ test.php:33
test.php:1 Access to image at 'http://localhost:10000/geoserver/ADMINISTRATIE/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ADMINISTRATIE%3Apdf&STYLES=TEREN&tiled=true&transparent=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX=0%2C0%2C20037508.342789244%2C20037508.342789244' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
clickfeature-selectionopenlayers-3