從文件加載 GeoJSON

Question

首先要說我正在嘗試學習 Openlayers，我正在使用 6.4.3 版本。 我想從 postgresql 查詢生成的文件中加載 GeoJON，我將數據發送到查詢，執行它並生成一個.json 文件 (GeoJSON)。 好的，問題是當我想在 map 上加載文件時。 As I'm doing now, it already shows me the file loaded on the map, I want to load it at the moment that I select something in the html select. 正如我所說，它顯示我已經加載，我做了一個 select，我運行查詢並清除 map，直到我重新加載頁面，我看不到新數據。

var vectorData = new ol.source.Vector({
    //url: 'data/data.json',
    projection: 'EPSG:3857',
    format: new ol.format.GeoJSON(),
});
var vectorlayer = new ol.layer.Vector({ 
    source: vectorData,
    visible:true,
    displayInLayerSwitcher: false,
    style: styleFunction,
});
fetch('data/data.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (json) {
    var features = new ol.format.GeoJSON().readFeatures(json, {dataProjection: 'EPSG:3857', featureProjection: 'EPSG:3857'});
    vectorData.addFeatures(features);
    //map.getView().fit(vectorData.getExtent());//zoom to
    //vectorData.refresh();
});

一旦我運行它，除了在 map 上加載數據外，我還想縮放到數據，現在當我打開 map 時，getExtent（正在評論）使它出現在數據的開頭。 我試着把vectorData.refresh(); 在將數據發送到執行查詢的 php 文件的腳本中，但它不起作用。

function search(){
        var data = document.getElementById("formData");
        object = document.getElementById('data');
        var txt='';
        txt = "\""+object.value+"\"";
        url_object = 'data='+txt;
        xhr(url_object);
    }

    var xmlhttp; 
    function xhr(formParcel){ 
            if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = RespuestaModel;
            xmlhttp.open("POST", "DataConsult.php", true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.send(formParcel);
    }

    function RespuestaModel(){
            if(xmlhttp.readyState == 4) {
                if(xmlhttp.status == 200) {
                    vectorData.refresh();
                }
            }
    }

Answer 1

我解決了。 Loader 沒有收到 Post 發送的數據。 因此，現在我進行查詢的頁面接收 json 格式的數據。 此外，我從 Map 層陣列中刪除了 vecLayer，然后將其添加到 map 中，因為 vecLayer 不存在。 我把它全部放在一個 function 中，現在它可以工作了。 我將不得不調整 map.getView ()。 適合（vectorParcels.getExtent（））； 因為它對我來說放大得太大了，如果我想要可視化的多邊形很大，它不會抓住 map 容器 div。

DataParcel.php

...
$params = json_decode(file_get_contents('php://input'), true);
$parcel = $params["parcel"];
...

帶有加載器方法的 OL 腳本

function drawParcel(parcelId){
    var vectorParcels = new ol.source.Vector({
        format: new  ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            var proj = projection.getCode();
            var url = "functionsPHP/DataParcel.php"
            var xhr = new XMLHttpRequest();

            var params = {
                parcel: parcelId
            }

            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            var onError = function() {
               vectorParcels.removeLoadedExtent(extent);
            }
            xhr.onerror = onError;
            xhr.onload = function() {
                xhr.responseText;
                console.log(xhr.responseText);
                if (xhr.status == 200) {
                    vectorParcels.addFeatures(
                    vectorParcels.getFormat().readFeatures(xhr.responseText));
                    map.getView().fit(vectorParcels.getExtent());
                    $("#formParcel")[0].reset();
               } else {
                 onError();
               }
             }
             xhr.send(JSON.stringify(params));
        },
    });
    var vectorlayer = new ol.layer.Vector({
        source:vectorParcels,
        visible:true,
        displayInLayerSwitcher: false,
        style: styleFunction,               
    });

    map.addLayer(vectorlayer)
}