Polygon GeoJSON功能将在控制台中加载，但不会显示在传单中 [英] Polygon GeoJSON Features Will Load in Console But Will Not Display in Leaflet

问题描述

GIS数据和python对我来说是旧帽子，但是对于Web开发和地理空间Web应用程序我还是很陌生.

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

我遵循了要带到以下脚本的教程和课程，但是我无法使生成的geojson对象(多边形层)显示在传单中.但是，我可以将多边形图层的所有功能记录到控制台.此外，在控制台中，我可以清楚地看到geojson对象的正确类型，属性和坐标数组.我还可以清楚地看到控制台内传单地图对象内的所有功能.

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.

任何输入将不胜感激.如果需要，我将很乐意发布getData.php代码.我只是不认为这是问题所在.

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

推荐答案

添加您生成的GeoJSON对象的示例肯定有助于了解您的情况.

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:

• 传单需要[latitude, longitude]订单
• GeoJSON期望[longitude, latitude]订单

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

另请参见 https://macwright.org/lonlat/

因此，您的Leaflet GeoJSON图层组实际上很有可能被添加到地图上，但是您必须缩小地图才能在完全不同的地方看到要素并变形.

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.

您似乎还没有在传单中指定适当的 CRS 地图实例，或者您需要将后端的坐标转换为Leaflet的默认

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.

请注意，GeoJSON规范要求WGS84 CRS ，这是相同的输入EPSG:3857.

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

这篇关于Polygon GeoJSON功能将在控制台中加载，但不会显示在传单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！