Django模板场景下如何将抽离的GeoJSON变量导入HTML script标签

以下方案均基于Django静态文件托管逻辑实现，需确保你已正确配置Django的STATIC_URL和STATICFILES_DIRS，且模板文件开头已引入{% load static %}标签

1. 变量存储的文件类型选择 #

.js文件完全适用，你也可以根据后续使用场景选择更匹配的格式：

• 若这份GeoJSON数据仅用于当前前端业务，不需要被GIS工具、后端接口等其他模块单独读取编辑，直接存为.js文件成本最低，不需要额外的解析逻辑
• 若这份地理数据后续有通用复用需求，建议存为专用的.geojson格式文件，符合地理数据的通用规范，后续跨场景使用更便捷

2. 导入抽离变量的实现方法 #

根据你选择的存储格式，对应两种实现方案：

方案1：使用.js文件存储的导入方式 #

该方案无需额外异步请求，变量直接全局可用，操作最简便：

1. 把你原script标签中的areas变量完整定义代码，复制到单独的static/js/areas.js文件中，文件内容示例：

const areas = {
  // 你原有的10000行GeoJSON数据内容
};

2. 在Django模板的HTML中，在你原有业务script标签的上方，引入这个js文件即可，后续直接使用areas变量：

<script src="{% static 'js/areas.js' %}"></script>
<!-- 你的业务逻辑script标签 -->
<script>
  // 此处可以直接调用areas变量
  console.log(areas)
</script>

方案2：使用.geojson文件存储的导入方式 #

该方案数据格式更规范，适合需要复用GeoJSON文件的场景：

1. 把你原areas变量的值（纯GeoJSON内容，不要加变量定义语句）复制到static/geojson/areas.geojson文件中，文件内容直接以GeoJSON结构开头即可：

{
  "type": "FeatureCollection",
  "features": [
    // 原有的地理要素内容
  ]
}

2. 在业务script标签中通过fetch请求异步加载解析即可：

<script>
async function initMap() {
  const response = await fetch("{% static 'geojson/areas.geojson' %}")
  const areas = await response.json()
  // 拿到areas变量后，在此处执行你的后续业务逻辑
}
initMap()
</script>

内容的提问来源于stack exchange，提问作者임승원