Polygon GeoJSON功能將在控制台中加載，但不會顯示在傳單中

Question

GIS數據和python對我來說是舊帽子，但是對於Web開發和地理空間Web應用程序我還是很陌生。

我遵循了要帶到以下腳本的教程和課程，但無法將得到的geojson對象（多邊形層）顯示在傳單中。 但是，我可以將多邊形圖層的所有功能記錄到控制台。 此外，在控制台中，我可以清楚地看到geojson對象的正確類型，屬性和坐標數組。 我還可以清楚地看到控制台內傳單地圖對象中的所有功能。

任何投入將不勝感激。 如果需要，我將很樂意發布getData.php代碼。 我只是不認為這是問題所在。

var map,
            fieldsin = ["campus_nam", "status", "schnumber", "type"],
            autocomplete = [];

        $(document).ready(initialize);

        function initialize(){
            map = L.map("mapdiv", {
                center: [36.10, -80.25],
                zoom: 12
            });
            var backgroundLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

            //adding postgresql layers to map with getData.php
            getData(fieldsin);
        };

        function getData(fieldsin){
            $.ajax({
                url: "php/getData.php",
                data: { table: "public.school_campus", fields: fieldsin },
                success: function(data){
                    mapData(data);
                }
            })
        };
        function mapData(data){
            //remove existing map layers
            map.eachLayer(function(layer){
                //if not the tile layer
                if (typeof layer._url === "undefined"){
                    map.removeLayer(layer);
                }
            })

            //create geojson container object
            var geojson = {
                "type": "FeatureCollection",
                "features": []
            };

            //split data into features
            var dataArray = data.split(", ;");
            //pop off the last value of the array because it is an empty string.
            dataArray.pop();
            //build geojson features
            dataArray.forEach(function(d){

                d = d.split(", "); //split the comma seperated data string up into individual attribute values
                var test = d[fieldsin.length].concat("}");

                //feature object container
                var feature = {
                    "type": "Feature",
                    "properties": {}, //properties object container
                    //"geometry": JSON.parse(d[fieldsin.length]) //parse geometry
                    "geometry": JSON.parse(d[fieldsin.length]) //parse geometry
                };

                //bulding properties for properties container above
                for (var i=0; i<fieldsin.length; i++){
                    feature.properties[fieldsin[i]] = d[i];
                };

                //add feature names to autocomplete list
                if ($.inArray(feature.properties.campus_nam, autocomplete) == -1){
                    autocomplete.push(feature.properties.campus_nam);
                };

                //console.log(feature.geometry)

                geojson.features.push(feature);

                //var campusLayer = L.geoJSON(geojson).addTo(map);
                var campusLayer = L.geoJSON(geojson, {
                    style: {
                        fillColor: "#CC9900",
                        color: "#66ffff",
                        weight: 1
                    },
                    onEachFeature: function (feature, layer) {
                        var html = "";
                        for (prop in feature.properties){
                            html += prop+": "+feature.properties[prop]+"<br>";
                        };
                        layer.bindPopup(html);
                    }
                }).addTo(map);
            });
        };

Answer 1

添加您所生成的GeoJSON對象的樣本肯定有助於了解您的情況。

但是，我高度懷疑您只是將坐標反轉了：

• 傳單要求[latitude, longitude]順序
• GeoJSON期望[longitude, latitude]順序

另請參閱https://macwright.org/lonlat/

因此，您的Leaflet GeoJSON圖層組實際上很有可能被添加到地圖上，但是您必須縮小地圖才能在完全不同的地方看到要素並變形。

看起來您還沒有為Leaflet地圖實例指定適當的CRS ，或者您需要將后端的坐標轉換為Leaflet的默認EPSG：3857 。

請注意，GeoJSON規范要求使用WGS84 CRS ，這與EPSG：3857的輸入相同。