Polygon GeoJSON Features Will Load in Console But

2019-08-23 23:48发布

问题:

GIS data and python are old hat to me but I am very new to web development and geospatial web applications.

I have followed a tutorial and a class that I am taking to get to the below script but I cannot get the resulting geojson object (the polygon layer) to display within leaflet. I can however, log all of the features of the polygon layer to the console. Furthermore, within the console I can clearly see the correct type, properties, and coordinate arrays of the geojson object. I can also clearly see all of the features within the leaflet map object within the console.

Any input would be greatly appreciated. If needed I will be happy to post the getData.php code. I just don't think that is the problem.

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

回答1:

Adding a sample of your resulting GeoJSON object would have surely helped in understanding your situation.

However I highly suspect that you have simply inverted the coordinates:

  • Leaflet expects [latitude, longitude] order
  • GeoJSON expects [longitude, latitude] order

See also https://macwright.org/lonlat/

Therefore there is a very high chance your Leaflet GeoJSON Layer Group is actually added onto your map, but you would have to zoom out to see your features on a completely different place and distorded.

Looks like you also have not specified the appropriate CRS to your Leaflet map instance, or you need to convert the coordinates from your backend to the Leaflet's default EPSG:3857.

Note that the GeoJSON spec requests WGS84 CRS, which is the same input for EPSG:3857.