Question

我有以下观点：

class IndexView(generic.TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)

        states = models.State.objects.all()
        geojson = json.loads(GeoJSONSerializer().serialize(queryset=states)
        context['states'] = geojson

        return context

    def post(self, request, *args, **kwargs):
        states = models.State.objects.all()
        geojson = json.loads(GeoJSONSerializer().serialize(queryset=states)

        return JsonResponse(geojson)

模板：

  <body>

    <style>
        #gs_map {
            height: 800px;
            width: 1200px;
            //.leaflet-container { height: 100%; }
        }

    </style>

    <script type='text/javascript'>
        function map_init (map, options, possible)
        {
            map.setView([38.255874, -85.758552], 3);

            geojson = L.geoJson( {{ states|safe }}, {style: style, onEachFeature: onEachFeature } ).addTo(map)

            function get_states()
            {
              $.ajax({url: '/',
                      type: 'POST',
                      data: {codes: states},
                      datatype: 'json',
                      beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', "{{csrf_token}}")},
                      success: function(response)
                      {
                          /* TODO
                          How do I refresh the map here?*/

                      },
                      complete: function(){},
                      error: function(xhr, textStatus, thrownError){}})
            }

            states = ['CO']
            document.getElementById('test').onclick = get_states;
        }
    </script>

    {% leaflet_map "gs_map" callback='window.map_init' %}

    <button type='submit' value='Test button' id='test'> Click Me </button>


  </body>

我想刷新现有（或替换）传单地图数据。我希望用户能够单击一个按钮并从服务器获取最新数据。 Ajax调用有效，并且我能够将数据打印到控制台，但是由于map_init函数使用状态|安全上下文数据，因此我不知道如何实际刷新传单代码。

如何用新的ajax json数据替换传单数据？

相关信息：

django-leaflet docs

SO leaflet only refresh without AJAX

Interactive Map I am trying to replicate but with refreshing

Answer 1

Leaflet GeoJSON图层只是一个FeatureGroup，它具有能够将GeoJSON数据转换为不同类型的对象（如标记，圆形或多边形）的附加功能。在实践中（添加数据之后）只是一个FeatureGroup（由几个不同的要素/图层组成）。

传单不提供替换FeatureGroup中所有功能的功能。但是，您可以使用clearLayers函数删除所有功能。 GeoJSON图层支持使用addData函数将新的GeoJSON数据添加到图层。

如果您在jQuery ajax成功函数中调用了这两个函数，则应该可以替换数据（注意：未经测试）：

success: function(response)
{
    // Remove all current features from the  
    geojson.clearLayers();
    // Create new layers from your new geoJSON data
    geojson.addData(response); 
},

django中的刷新传单地图

1 个答案: