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的输入相同。