将PostGIS点对象转换为geoJSON以进行地图绘制。

Question

我有一个Django应用程序，其中包含一组PostGIS活动的postgres数据库，我正在尝试使用leaflet和Mapbox在前端视图上绘制这些活动。

我正在将这些活动在视图中序列化，并将它们作为geoJSON呈现在模板中 ({{ props.activitiesJson|safe }})。

[可以将其呈现为html并在页面上查看JSON对象]。

views.py（示例）

def map(request):

    mapbox_key = settings.MAPBOX_API_KEY
    activities = Activity.get_activities_near(lat, lng, radius)

    props = {'activitiesJson' : serializers.serialize('geojson', activities),}

    context = {
    'props' : props,
    'mapbox_key': mapbox_key
}

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

模板：

var map_activities = JSON.parse("{{ props.activitiesJson }}");
L.geoJSON(map_activities).addTo(map); 

如果我直接在模板上呈现{{ props.activitiesJson }}或{{ props.activitiesJson|safe }}（不在脚本中或解析它），我会看到这个数据结构：

{"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"type": "Feature", "properties": {"cause": 1, "name": "Test Action", "slug": "test-action", "is_active": true, "image": "test.jpeg", "description": "test description", "date_start": null, "date_end": null, "skills_required": false, "on_site": false, "address_street": "123 Main St.", "address_street_2": "", "address_city": "New York", "address_state": "NY", "address_zip": "10013", "address_country": "", "location_city": "", "location_state": "", "location_country": "", "skills_list": [], "pk": "1"}, "geometry": null}]}

但是尝试使用JSON.parse()解析它会抛出语法错误：

JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data 

我该如何有效地将geoJSON对象分配给我的map_activities变量？我需要解析它吗？（即，var map_activities = {{ props.activitiesJson|safe }};）

谢谢。

- Chris B.

---

你能贴出 JSON.parse("{{ props.activitiesJson|safe }}"); 渲染后的 JSON 长什么样子吗？ - Kamil Niski

@KamilNiski 添加了直接渲染 {{ props.activitiesJson|safe }} - 由于"Uncaught SyntaxError: missing ) after argument list"，我无法使用console.log或render JSON.parse()。 - Chris B.

Answer 1

最终（不确定是否是最佳实践），对我来说正确的方法不是解析geoJSON对象，而是直接将其传递给变量。

var map_activities = {{ props.activitiesJson|safe }};

- Chris B.

---

如果您的活动包含任何用户提供的输入，则此方法是XSS安全漏洞！将其中一个活动名称设置为</script><script>alert('XSS')</script>，并查看会发生什么。您必须使用escapejs过滤器。 - Daniel Hepper

Answer 2

另外，我们可以尝试下面的代码。

def map(request):    
   activities = Activity.get_activities_near(lat, lng, radius)
   activitiesData = []
   for activity in activities:
      listdata = {'id': activity.id, 'name': activity.name} # As per requirement
      activitiesData.append(listdata)
   response = HttpResponse(json.dumps(activitiesData))
   return response

- Anoop Kumar