传单渲染多边形列表中的一个多边形

Question

我有一张带有 django 的传单地图。我正在从数据库传递 geojson。出于某种原因，我没有收到任何错误，但它只渲染了一个多边形，而不是大约 3,000 个。其他一切似乎都正常工作。

从技术上讲，它不是多面体，因为这个形状内部没有任何形状，而是在同一个地方渲染了一堆形状。

function initmap(){


            var map = new L.map('map',{

                            center: [1.0,1.0],
                            layers: [osmLayer,markers,parcelLayer],
            minZoom: 1,
                            zoom: 3 }
                    ).setView([lat,long],13 );


    }       



            var osmLayer = new  L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                    subdomains: ['a','b','c']
    });



    var markers = new L.FeatureGroup();


    var parcelFeature = ['{"geometry": {"type": "Polygon", "coordinates": [[[a,b],[c,d],[e,f],[g,h]]]}, "type": "Feature"}',
 '{"geometry": {"type": "Polygon", "coordinates": [[[i,j],[k,l],[m,n],[o,p]]], "type": "Feature"}'];
     parcelFeature = JSON.parse(parcelFeature[0]);      

      var parcelLayer =  L.geoJson([parcelFeature],{
                     style : {

                   "color": "#000000",
                    "weight": 3,
                     "opacity": 10.65

                            }   
        });

            parcelLayer.on("loaded", function(e) {map.fitBounds(e.target.getBounds());} );      


    //marker icon
    var ceIcon = L.icon({
        iconUrl: "/static/maps/leaflet/images/somepng.png",
        iconSize: [45,45],
        iconAnchor:   [0, 0], 
        popupAnchor:  [-3, -76]  
    });



    //add markers

        marker = new L.marker([lat,long], {icon:ceIcon});
        markers.addLayer(marker);   

        marker = new L.marker([lat,long], {icon:ceIcon});
        markers.addLayer(marker);   

        marker = new L.marker([lat,long], {icon:ceIcon});
        markers.addLayer(marker);   

        marker = new L.marker([lat,long], {icon:ceIcon});
        markers.addLayer(marker);   



    initmap();

Answer 1

我所做的是将其作为 json 通过 django 传递，然后拆分为 javascript 每个 json 项目并将其添加到新列表中。

var parcelFeature = [];
        var parcel_json = {{  parcel_json|safe }};


        for(i = 0; i < parcel_json.length; i++){
        var pjson = parcel_json[i];
        pjson = JSON.parse(pjson);
        parcelFeature.push(pjson);

        }

在此之后，我使用了默认的 L.geoJson 层，并且渲染正确。不确定问题。

var parcelLayer = L.geoJson(parcelFeature, { 风格 :{

               "color": "#000000",
               "weight": 1,
               "opacity": 100},
       "fillColor":"#FFFFFF",   
    onEachFeature: function(feature, layer) {
               // does this feature have a property named popupContent?
                if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent);
               console.dir(feature.properties.popupContent);
             } }

   });

传单渲染多边形列表中的一个多边形

Leaflet rendering one polygon in a list of polygons

javascript

polygon

leaflet