Django 3.2如何在HTML模板中展示PointField的OpenStreetMap地图

核心结论 #

• 纯只读展示点位的场景完全不需要创建表单，用轻量前端逻辑即可实现和Django admin中OSMGeoAdmin完全一致的OpenStreetMap点位展示效果，实现成本极低。
• OSMGeoAdmin自带的表单相关逻辑是为了支持点位编辑、坐标录入等交互操作，只读场景完全可以跳过这部分冗余逻辑。

最简实现方案 #

OSMGeoAdmin后台本身就是基于Leaflet库加载OSM瓦片实现地图效果，直接在前端复用这套逻辑即可，步骤如下：

1. 后端预处理坐标
   不需要前端解析WKT格式字符串，直接利用GeoDjango模型字段的内置属性拿到经纬度即可，注意PointField的x属性为经度、y属性为纬度，不要混淆。
   展示单个点位时，直接调整视图的context传值：

   # views.py 调整示例
   from django.shortcuts import render
   # 原代码用filter返回的是QuerySet集合，直接取实例属性会报错，单个对象建议用get查询
   my_obj = MyClass.objects.get(对应筛选条件)
   context = {
       'my_class': my_obj,
       'point_lng': my_obj.location.x,
       'point_lat': my_obj.location.y,
   }
   return render(request, 'my_class.html', context)
   

   如果需要展示多个点位，直接把坐标批量序列化传入模板即可：

   point_list = [
       {
           'lng': obj.location.x,
           'lat': obj.location.y,
           'desc': obj.description
       } for obj in MyClass.objects.filter(对应筛选条件)
   ]
   context['point_list'] = point_list
   

2. 模板层渲染地图
   首先把Leaflet的CSS、JS静态文件放到Django项目的static目录下，在模板中引入后，添加定高的地图容器，写少量初始化JS即可：

   <!-- 引入本地存放的Leaflet静态资源 -->
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/leaflet.css' %}">
   <script src="{% static 'js/leaflet.js' %}"></script>
   
   <!-- 地图容器，必须设置固定高度否则无法显示 -->
   <div id="osm-map" style="width: 100%; height: 420px; margin: 1rem 0;"></div>
   
   <script>
       // 初始化地图，缩放级别15和admin默认展示效果一致，注意Leaflet坐标顺序是【纬度在前，经度在后】
       const map = L.map('osm-map').setView([{{ point_lat }}, {{ point_lng }}], 15);
   
       // 加载OSM瓦片层，配置和admin后台保持一致，地址替换为可访问的OSM瓦片服务路径即可
       L.tileLayer('/your-osm-tile-service/{z}/{x}/{y}.png', {
           maxZoom: 19,
           attribution: '© OpenStreetMap contributors'
       }).addTo(map);
   
       // 在点位位置添加标记，和admin的标记效果完全相同
       L.marker([{{ point_lat }}, {{ point_lng }}]).addTo(map);
   
       // 多点位场景下放开下方注释，循环生成标记即可，还可以绑定弹窗显示描述内容
       // {% for point in point_list %}
       // L.marker([{{ point.lat }}, {{ point.lng }}]).bindPopup('{{ point.desc }}').addTo(map);
       // {% endfor %}
   </script>
   

避坑提示 #

• 地图容器必须设置明确的高度值，否则地图会因为高度为0无法正常渲染。
• 严格注意经纬度顺序：GeoDjango输出坐标顺序是（经度，纬度），Leaflet初始化需要传（纬度，经度），顺序写反会导致定位位置完全错误。
• 整个实现不需要额外引入Django表单相关模块，没有冗余依赖，加载速度比复用admin组件更快。

内容的提问来源于stack exchange，提问作者Alfonso_MA