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

Question

我正在使用 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)

使用我创建的表单（未显示），空间数据已成功保存到模型中。然后我创建了一个简单的基于函数的视图来从数据库中提取所需的数据。我创建了一个 'raw' 对象 (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 调用直接将数据加载到地图中（即多边形从页面渲染视图传递，然后直接插入到地图中）。

谁能指导我完成此任务的最佳方法？

Answer 1

为此目的使用 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>

Answer 2

事实证明，使用 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>

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

Display Polygon in Leaflet Map from Geodjango Model

django

leaflet

gis

postgis

geodjango