在Geodjango模型的传单地图中显示多边形 [英] Display Polygon in Leaflet Map from Geodjango Model
问题描述
我正在使用 geodjango 和 django-leaflet 开发地理空间地图应用程序，该应用程序允许用户在地图上绘制多边形并将其保存到模型中.我认为从模型中提取保存的多边形并将其呈现在嵌入模板的Leaflet地图中会很简单.但是，我这样做有很大的困难.这主要是由于我是一名新的Web开发人员(我对JS尤其陌生).这是我到目前为止的内容:
I'm developing a geospatial mapping application using geodjango and django-leaflet which lets users draw a polygon on a map and save that polygon to a model. I thought it would be simple to extract the saved polygon from the model and render it on a Leaflet map embedded in a template. However, I'm having considerable difficulty doing so. This is mostly due to me being a new web developer (I'm especially new to JS). Here's what I have so far:
models.py:
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 (因为我不确定哪个最好使用).
The spatial data is saved successfully to the model using the form I have created (not shown). I have then created a simple function-based view to pull the required data from the database. I have created a 'raw' object (job_loc) and also serialized the data to geojson to create json_loc (as I'm not sure which is best to work with).
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 并完成此操作(假设我正在使用的所有功能都是地理空间的)，但这显然不是这种情况.
And the code in my template. I was hoping that I could pass job_loc or json_loc to leaflet and be done with it (given everything I'm working with is geospatial), but that's clearly not the case.
{{ 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 返回的数据):
Here is a screenshot if I render the above code (might be helpful to see the data that's returned from json_loc and job_loc, respectively):
我听说这里Ajax可能是一个潜在的解决方案，但是我不确定如何实现这一点.我原本希望在不使用Ajax调用的情况下直接将数据加载到地图中(即，多边形是从页面渲染视图上传递的，然后直接插入到地图中).
I've heard that Ajax might be a potential solution here, but I'm unsure on how to implement this. I was expecting to load the data into the map directly without using an Ajax call (i.e. the polygon is passed from the view on page render, then inserted into the map directly).
有人能指导我完成这一工作的最佳方法吗?
Can anyone guide me on the best way to acomplish this?
推荐答案
It turns out the solution was very straightforward with the use of Django GeoJSON. Using Django GeoJSON, there's no need to mess around with serialising the polygon data in your view.
只需将数据库中的原始空间数据传递到views.py中，然后像这样传递到模板中即可:
Simply pass the raw spatial data from your database into views.py and then into your template like so:
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模型的传单地图中显示多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
