如何在Django后端项目中集成使用kepler.gl前端地图组件

1. 现有适配库情况 #

目前没有和django-leaflet对等的、可以直接一键安装调用的Django-kepler官方适配库。kepler.gl本身是Uber开源的基于WebGL的地理可视化框架，官方仅提供了React版本的核心包、原生JS调用的UMD包，没有针对Django做专门的封装包。

2. 手动对接实现方案 #

• 前端集成kepler.gl的两种方式 #

  • 如果你用React栈开发前端：直接安装官方kepler.gl npm包，按照官方文档初始化地图实例即可，不需要依赖Django封装。
  • 如果你用原生JS/普通Django模板开发：直接引入kepler.gl的UMD预构建包到Django模板文件中，无需额外编译步骤。

• 后端数据对接逻辑 #

  1. 先在Django侧定义对应的数据接口，支持返回kepler.gl可识别的GeoJSON、CSV等格式的地理数据，接口可以用Django REST Framework写，也可以直接在视图函数中构造响应返回。
  2. 前端加载完kepler.gl实例后，调用Django提供的接口拉取数据，调用kepler.gl的addDataToMap方法将数据注入到地图实例中即可完成渲染。

• 模板集成示例（原生JS方案） #

  直接在Django的HTML模板中加入以下代码片段即可快速实现基础渲染：

  <!-- 先引入kepler.gl依赖的UMD包，资源放到Django静态资源目录下即可 -->
  <script src="{% static 'js/kepler-gl.min.js' %}"></script>
  <div id="kepler-map" style="width: 100%; height: 800px;"></div>
  <script>
    // 初始化地图实例
    const keplerMap = KeplerGl.KeplerGl({
      container: document.getElementById('kepler-map')
    });
    // 请求Django后端数据接口
    fetch('/your-django-data-api/')
      .then(res => res.json())
      .then(geoData => {
        keplerMap.addDataToMap({
          datasets: {
            info: {label: '自定义地理数据集名称'},
            data: geoData
          }
        });
      });
  </script>
  

  注意：你需要将kepler.gl的静态资源放到Django的STATICFILES_DIRS指定的静态资源目录下，按照Django静态资源引用规则引入即可。

• 交互数据回传后端 #

  如果需要把前端kepler.gl中用户操作后的数据、配置回存到Django后端，直接监听kepler.gl的实例事件，拿到对应数据后通过POST请求提交给Django的保存接口即可，接口按照常规的Django表单/序列化器逻辑处理即可。

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