javascript FeatureLoader未加载OpenLayers中的要素

尝试在OpenLayers 6中使用featureLoader，以便可以访问featuresloadend事件，但当我尝试加载功能时，什么也没有显示。进一步检查pointLayer显示没有功能添加到Layer。

const pointSource = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      loader: function(extent, resolution, projection, success, failure) {
        var proj = projection.getCode();
        var url = '/awdndb/monitor/geoawdndata?product=scqc1440&begin=2022-09-20&end=2022-09-20&sensor=AirTempMax2m&units=si';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        var onError = function() {
          vectorSource.removeLoadedExtent(extent);
          failure();
        }
        xhr.onerror = onError;
        xhr.onload = function() {
          if (xhr.status == 200) {
            var features = pointSource.getFormat().readFeatures(JSON.parse(xhr.responseText));
            pointSource.addFeatures(features);
            success(features);
          } 
          else {
            onError();
          }
        }
        xhr.send();
      }
    })

    const pointLayer = new ol.layer.Vector({
      source: pointSource,
      title: 'pointLayer',
      style: pointFunction
    });
    
    //Setup Overlay
    const overlay = new ol.Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    });

    //Setup Map Object
    const map = new ol.Map({
      target: 'map',
      overlays: [overlay],
      view: new ol.View({
        center: [-10997148, 4569099],
        zoom: 5
      })
    });
    
    map.addLayer(baseLayer);
    map.addLayer(pointLayer);

json太大了，以至于包含了整个代码）：

{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4326"}},"features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.98,48.86]},"properties":{"name":"Williams 6N","state":"MN","county":"Lake of the Woods","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",20.58," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-100.61,38.51]},"properties":{"name":"Lane","state":"KS","county":"Lane","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",37.86," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-96.59,39.21]},"properties":{"name":"Manhattan","state":"KS","county":"Riley","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",37.46," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-108.72,37.53]},"properties":{"name":"Yellow Jacket","state":"CO","county":"Montezuma","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",24.62," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-102.57,48.49]},"properties":{"name":"Powers Lake 6SE","state":"ND","county":"Mountrail","sensors":
...

根据OpenLayers documentation，如果您将vectorsource功能作为功能集合提供，则只能获得vector.getSource（）.getFeature（）结果。下面是我如何使用fetch async await请求解决这个问题的，希望它能有所帮助。

const getData = async () => {
    try {
        const request = new Request(wfsUrl, {
            method: 'GET',
            mode: 'cors'
        });
        const response = await fetch(request)
        if (response.ok) {

            const responseJSON = await response.json();
            console.log(responseJSON)

            const layer = new VectorLayer({
                source: new VectorSource({
                    features: new GeoJSON().readFeatures(responseJSON)

                }),
                style: function() {
                    return new Style({
                        stroke: new Stroke({
                            color: 'white',
                            lineDash: [4],
                            width: 3,
                        }),
                        fill: new Fill({
                            color: 'rgba(0, 0, 255, 0.1)',
                        }),
                    })
                },
                name: 'New'

            })

            map.addLayer(layer)

        } else {
            throw new Error('Network response was not ok');
        }
    } catch (error) {
        console.error('There was a problem fetching the data:', error);
    }

}

getData()

javascript FeatureLoader未加载OpenLayers中的要素

1条答案

相关问题

热门标签

最新问答