如何在GeoDjango中显示PostGIS数据库中的多边形/线？

后端配置与数据接口实现 #

1. 确认GeoDjango与PostGIS基础配置
   确保settings.py中已正确配置：

INSTALLED_APPS = [
    # 其他应用
    'django.contrib.gis',
    # 你的业务应用
]

DATABASES = {
    'default': {
        'ENGINE': 'django.contrib.gis.db.backends.postgis',
        'NAME': 'your_db_name',
        'USER': 'your_db_user',
        'PASSWORD': 'your_db_password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

2. 定义地理模型
   创建包含多边形/线字段的模型，继承GeoDjango的GeoModel：

from django.contrib.gis.db import models

class SpatialFeature(models.Model):
    name = models.CharField(max_length=100)
    # 多边形字段，指定坐标系为WGS84（与前端地图常用坐标系匹配）
    polygon = models.PolygonField(srid=4326, null=True, blank=True)
    # 线字段
    line = models.LineStringField(srid=4326, null=True, blank=True)

    def __str__(self):
        return self.name

3. 编写GeoJSON接口视图
   直接返回符合规范的GeoJSON数据，无需依赖第三方库：

from django.http import JsonResponse
from .models import SpatialFeature

def spatial_data_api(request):
    features = SpatialFeature.objects.all()
    geojson = {
        "type": "FeatureCollection",
        "features": []
    }
    for feat in features:
        feature = {"type": "Feature", "properties": {"name": feat.name}}
        # 根据实际存储的字段选择geometry
        if feat.polygon:
            feature["geometry"] = feat.polygon.json
        elif feat.line:
            feature["geometry"] = feat.line.json
        geojson["features"].append(feature)
    return JsonResponse(geojson)

4. 配置URL路由
   在项目的urls.py中添加接口路径：

from django.urls import path
from .views import spatial_data_api

urlpatterns = [
    # 其他路由
    path('api/spatial-data/', spatial_data_api, name='spatial-data-api'),
]

前端Leaflet展示实现 #

使用L.geoJSON加载后端数据，确保坐标系匹配：

<div id="map" style="width: 100%; height: 600px;"></div>

<script>
// 初始化地图，设置中心坐标与缩放级别
const map = L.map('map').setView([30.65, 104.06], 12); // 示例：成都坐标

// 添加底图（可替换为本地或合规的底图服务）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

// 请求后端GeoJSON数据并渲染
fetch('/api/spatial-data/')
    .then(res => res.json())
    .then(data => {
        L.geoJSON(data, {
            // 自定义样式
            style: () => ({
                color: '#2E8B57',
                weight: 2,
                fillColor: '#90EE90',
                fillOpacity: 0.4
            }),
            // 绑定弹窗展示属性
            onEachFeature: (feature, layer) => {
                layer.bindPopup(`<strong>${feature.properties.name}</strong>`);
            }
        }).addTo(map);
    })
    .catch(err => console.error('数据加载失败:', err));
</script>

常见问题排查（针对L.geoJSON失败情况） #

• 坐标系不匹配：PostGIS中的数据srid需与前端地图一致（通常为4326），若不一致可在视图中转换：feat.polygon.transform(4326)
• GeoJSON格式错误：检查后端返回的JSON是否符合规范，可本地验证格式正确性
• 路由或接口错误：确认接口URL正确，直接在浏览器访问接口查看返回数据
• 跨域问题：若前后端分离，需在Django中配置CORS（使用django-cors-headers库）
• 数据为空：检查PostGIS数据库中是否存在有效地理数据，模型与数据库表映射正确

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