从文件加载 GeoJSON

Question

首先要说的是，我正在尝试学习 Openlayers，我正在使用 6.4.3 版本。我想从 postgresql 查询生成的文件加载 GeoJON，我将数据发送到查询，我执行它并生成一个 .json 文件（GeoJSON）。好的，问题是当我想在地图上加载文件时。正如我现在所做的那样，它已经向我显示了地图上加载的文件，我想在 select html select 中的某些内容时加载它。正如我所说，它显示我已经加载，我做了一个 select，我运行查询并清除了地图，直到我重新加载页面，我才看到新数据。

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();
});

一旦我运行它，除了在地图上加载数据外，我还想缩放数据，现在 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 格式接收数据。我还从地图层数组中删除了 vecLayer，稍后将其添加到地图中，因为 vecLayer 不存在。我把它全部放在一个函数中，现在它可以工作了。 我必须调整 map.getView()。 fit(vectorParcels.getExtent());因为它放大对我来说太大了，如果我想可视化的多边形很大，它不会抓住地图容器 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)
}

从文件加载 GeoJSON

Load GeoJSON from file

javascript

ajax

openlayers