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

我所做的是通过django作为json传递，然后在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， {style：{

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

   });

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

1 个答案: