本文详解在前端使用 `fetch` 调用 django 返回的 geojson 接口时，因误用 `json.stringify()` 导致数据变为字符串、丢失结构化属性（如 `.features`）的典型错误，并提供完整、安全的前后端联调方案。
你在前端代码中执行了以下链式调用：
fetch('/guidebook/api/peak-data/')
.then(response => response.json()) // ✅ 将 HTTP 响应体解析为 JS 对象（如 GeoJSON）
.then(response => JSON.stringify(response)) // ❌ 再次转成字符串 —— 这是问题根源！
.then(data => {
console.log('Type of data:', typeof data); // → "string"
console.log('Type of features:', typeof data.features); // → undefined（字符串无 .features 属性）
});response.json() 已将响应体（原始 JSON 字符串）成功解析为 JavaScript 对象（例如一个包含 type, features, crs 等字段的标准 GeoJSON 对象）。而紧接着的 JSON.stringify(response) 又将其反向序列化为字符串，导致后续所有 .features、.features[0].geometry.coordinates 等访问全部失效。
✅ 正确做法是：仅解析一次，后续直接操作 JS 对象。修正后的前端代码如下：
fetch('/guidebook/api/peak-data/')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // ✅ 解析为对象，保留 GeoJSON 结构
})
.then(geojsonData => {
console.log('Parsed GeoJSON object:', geojsonData);
console.log('Type of data:', typeof geojsonData); // → "object"
console.log('Features count:', geojsonData.features?.length || 0);
// ✅ 安全提取坐标示例（假设每个 feature 是 Point 类型）
const coordinates = geojsonData.features
?.filter(f => f.geometry?.type === 'Point')
.map(f => f.geometry.coordinates);
console.log('All peak coordinates:', coordinates);
// 后续可传给 Leaflet / Mapbox 等地图库渲染
})
.catch(error => {
console.error('Failed to fetch or parse peak data:', error);
});⚠️ 同时，后端 Django 也需确保返回格式合规：
- serialize('geojson', ...) 默认返回的是 字符串格式的 GeoJSON（非 Python dict），因此 JsonResponse(..., safe=False) 是必要且正确的；
- 但务必确认 content_type='application/json' 已显式设置（你已做到），并避免额外包装或双层序列化。
? 补充建议：
- 在 Django 视图中可加日志验证输出内容：
def get_peak_data(request): peaks = Peak.objects.all() peak_data = serialize('geojson', peaks, geometry_field='peak_coordinates') # 可选：调试时打印类型与前100字符 print("Serialized type:", type(peak_data), "Preview:", peak_data[:100]) return JsonResponse(peak_data, safe=False, content_type='application/json') - 前端开发中，推荐使用 console.dir(geojsonData) 替代 console.log() 查看对象层级结构；
- 若需进一步校验 GeoJSON 合法性，可在前端引入 geojson-validation 库。
总结：response.json() 是解析入口，JSON.stringify() 是导出出口——二者不可在同一数据流中连续使用。保持数据为原生对象形态，才能可靠访问 .features、.properties、.geometry 等 GeoJSON 标准字段，实现地理数据的精准提取与可视化。
