在来自 Geodjango 模型的传单地图中显示多边形

如何解决在来自 Geodjango 模型的传单地图中显示多边形

我正在使用 geodjango 和 django-leaflet 开发地理空间地图应用程序，它允许用户在地图上绘制多边形并将该多边形保存到模型中。我认为从模型中提取保存的多边形并将其渲染在嵌入在模板中的 Leaflet 地图上会很简单。但是，我在这样做时遇到了相当大的困难。这主要是因为我是一名新的 Web 开发人员（我对 JS 尤其陌生）。这是我到目前为止所拥有的：

models.py:

class newJob(BaseModel):
    job_name = models.CharField(max_length=64)
    job_desc = models.CharField(max_length=64)
    job_loc = models.PolygonField()
    user = models.ForeignKey(User,on_delete=models.SET_NULL,null=True,blank=True)

使用我创建的表单（未显示）将空间数据成功保存到模型中。然后我创建了一个简单的基于函数的视图来从数据库中提取所需的数据。我创建了一个“原始”对象 (job_loc)，并将数据序列化为 geojson 以创建 json_loc（因为我不确定哪个最适合使用）。

views.py：

def viewjob(request):

        req = request.GET

        job_name = newJob.objects.values_list('job_name',flat=True).get(pk=req['search'])
        job_desc = newJob.objects.values_list('job_desc',flat=True).get(pk=req['search'])
        job_loc = newJob.objects.values_list('job_loc',flat=True).get(pk=req['search'])

        json_loc = newJob.objects.filter(pk=req['search'])
        json_loc = serialize('geojson',json_loc,geometry_field='job_loc')
        context = {

        'job_name': job_name,'job_desc': job_desc,'job_loc': job_loc,'json_loc': json_loc

        }

        print(context)

        return render(request,'viewjob.html',context)

还有我模板中的代码。我希望我可以将 job_loc 或 json_loc 传递给 leaflet 并完成它（鉴于我正在处理的所有内容都是地理空间的），但显然情况并非如此。>

  {{ json_loc }}
 
  {{job_loc}}

  <script type="text/javascript">
      function map_init(map,options) {
          // zoom to point
          map.setView([51.9923,-2.1580],12);

          // get polygon
          var polygon = "{{ json_loc }}";
          var polygon = L.polygon(polygon).addTo(map);
      }
  </script>


  {% leaflet_map "yourmap" callback="window.map_init_basic" %}

如果我呈现上述代码，这是一个屏幕截图（可能有助于查看分别从 json_loc 和 job_loc 返回的数据）：

我听说 Ajax 可能是这里的一个潜在解决方案，但我不确定如何实现它。我希望在不使用 Ajax 调用的情况下直接将数据加载到地图中（即多边形从页面渲染的视图中传递，然后直接插入到地图中）。

谁能指导我以最佳方式完成这项工作？

解决方法

为此目的使用 the json_script tag。

{{ json_loc|json_script:"json-loc" }}

<script type="text/javascript">
  function map_init(map,options) {
    // zoom to point
    map.setView([51.9923,-2.1580],12);

    // get polygon
    var polygonData = JSON.parse(document.getElementById('json-loc').textContent);
    var polygon = L.polygon(polygonData).addTo(map);
  }
</script>

,

事实证明，使用 Django GeoJSON 的解决方案非常简单。使用 Django GeoJSON，无需在视图中序列化多边形数据。

简单地将原始空间数据从您的数据库传递到 views.py 中，然后像这样传递到您的模板中：

def index(request):

        req = request.GET
        job_loc = yourModel.objects.values_list('location',flat=True).get(pk=req['search'])

        context = {
            'job_loc': job_loc,}

        return render(request,'app/viewjob.html',context)

然后在您的模板中{% load geojson_tags %}：

  <script type="text/javascript">
    function map_init(map,options) {
      map.setView([51.9923,-0.5],7);
      L.geoJson({{ job_loc|geojsonfeature|safe}}).addTo(map);
    }

  </script>