如何通过Leaflet地图边界框查询Django PostGIS/Postgres数据库？

1. 前端Leaflet代码修改 #

你之前的代码是页面首次加载时渲染全量数据，现在需要调整为监听地图视口变化，动态拉取对应范围的标记：

var myMap = L.map("mapid", {zoomControl: false});
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 18 }).addTo(myMap);
myMap.setView([-34, 151], 12);
// 存储当前标记组，方便更新时清空
var markerGroup = L.featureGroup().addTo(myMap);
// 防抖计时器，避免拖动地图时频繁发请求
let requestTimer = null;

// 加载指定边界框内的标记
function loadMarkersByBounds() {
  // 获取当前地图视口的边界框，格式为 [西经, 南纬, 东经, 北纬]
  const bounds = myMap.getBounds();
  const bbox = [
    bounds.getWest(),
    bounds.getSouth(),
    bounds.getEast(),
    bounds.getNorth()
  ];
  // 发起请求到后端接口
  fetch(`/api/get-markers/?min_lng=${bbox[0]}&min_lat=${bbox[1]}&max_lng=${bbox[2]}&max_lat=${bbox[3]}`)
    .then(res => res.json())
    .then(data => {
      // 清空旧标记
      markerGroup.clearLayers();
      // 渲染新标记
      data.forEach(item => {
        L.marker([item.latitude, item.longitude]).addTo(markerGroup);
      })
    })
}

// 监听地图移动/缩放结束事件，触发重新加载
myMap.on('moveend', () => {
  clearTimeout(requestTimer);
  requestTimer = setTimeout(loadMarkersByBounds, 300);
})

// 页面首次加载时先拉取当前视口的标记
loadMarkersByBounds();

2. 后端Django代码修改 #

2.1 确认模型配置 #

因为你的业务表不由Django托管，需要在模型的Meta配置里明确指定managed=False，并填写实际的表名：

from django.contrib.gis.db import models

class YourBusinessModel(models.Model):
    # 你原来的其他字段，要和数据库实际字段对应
    latitude = models.FloatField()
    longitude = models.FloatField()
    geom = models.PointField(blank=True, null=True, srid=4326)
    
    class Meta:
        managed = False # 关键：禁止Django修改表结构
        db_table = "你的实际业务表名" # 替换成你数据库里的表名

另外要确认settings.py的INSTALLED_APPS里已经添加了django.contrib.gis。

2.2 编写极简视图函数（无需类视图/DRF） #

直接用普通函数视图处理请求，完成空间查询后返回JSON即可：

from django.http import JsonResponse
from django.contrib.gis.geos import Polygon
from .models import YourBusinessModel

def get_markers(request):
    # 获取前端传的边界框参数
    min_lng = float(request.GET.get("min_lng"))
    min_lat = float(request.GET.get("min_lat"))
    max_lng = float(request.GET.get("max_lng"))
    max_lat = float(request.GET.get("max_lat"))
    # 生成边界面对象
    bbox_polygon = Polygon.from_bbox((min_lng, min_lat, max_lng, max_lat))
    # 空间查询：筛选所有在边界框内的点
    queryset = YourBusinessModel.objects.filter(geom__within=bbox_polygon)
    # 手动拼接返回数据，不需要序列化器
    res = []
    for item in queryset:
        res.append({
            "latitude": item.latitude,
            "longitude": item.longitude
            # 需要其他字段也可以在这里加
        })
    return JsonResponse(res, safe=False)

2.3 绑定接口路由 #

在你app的urls.py里添加路由规则：

from django.urls import path
from . import views

urlpatterns = [
    # 你原来的其他路由
    path("api/get-markers/", views.get_markers, name="get_markers"),
]

注意事项 #

• 要确保PostGIS扩展已经在你的数据库中开启，执行过CREATE EXTENSION postgis;
• 如果查询速度慢，可以给geom字段添加空间索引提升效率
• 边界框的坐标顺序不要搞混，上述代码已经统一为PostGIS兼容的顺序，不需要额外转换

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