Question

GIS数据和python对我来说是老生常谈，但我对Web开发和地理空间Web应用程序都很陌生。

我已经按照一个教程和一个类来学习下面的脚本，但我无法得到生成的geojson对象（多边形图层）以在leaflet中显示。但是，我可以将多边形图层的所有功能记录到控制台。此外，在控制台中我可以清楚地看到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对象的示例肯定有助于了解您的情况。

但是我非常怀疑你只是颠倒了坐标：

Leaflet预计[latitude, longitude]订单
GeoJSON期望[longitude, latitude]订单

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

因此，您的Leaflet GeoJSON图层组很可能实际添加到地图上，但您必须缩小才能在完全不同的位置查看您的功能并进行缩放。

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

请注意GeoJSON规范requests WGS84 CRS，它与EPSG的输入相同：3857。

Polygon GeoJSON功能将在控制台中加载，但不会在传单

1 个答案: