如何为加载kepler.gl的单HTML页面添加来自本地API的数据

你已经完成了kepler.gl UMD版本的单页初始化，只需要在原有代码基础上补充接口请求和数据注入逻辑即可，具体操作如下：

操作步骤 #

• 找到原有代码中初始化并挂载kepler.gl实例的位置，在实例初始化完成后追加下方代码
• 将代码中的本地接口地址、字段配置替换为你自己的业务参数即可

// 1. 请求本地接口数据，替换为你自己的接口地址
fetch('http://localhost:你的服务端口/你的接口路径')
  .then(response => response.json())
  .then(apiResult => {
    // 2. 构造kepler.gl可识别的数据集格式
    // 示例假设接口返回JSON数组结构：[{id:1, lat:39.9, lng:116.3, count:22}, ...]
    const customDataset = {
      data: {
        // 字段配置需和接口返回的字段一一对应，支持类型：string、real、integer、boolean、timestamp
        fields: [
          {name: 'id', type: 'integer'},
          {name: '纬度', type: 'real'},
          {name: '经度', type: 'real'},
          {name: '数值', type: 'integer'}
        ],
        // 将接口返回的对象数组转为二维数组
        rows: apiResult.map(item => [item.id, item.lat, item.lng, item.count])
      },
      info: {
        label: '本地接口数据集',
        id: 'local_api_data_01'
      }
    }

    // 3. 将数据集注入kepler.gl地图
    keplerGl.addDataToMap({
      datasets: customDataset
    })
  })
  .catch(error => console.error('接口请求出错：', error))

注意事项：

• 如果接口返回的是CSV格式字符串，不需要手动构造fields和rows，直接将customDataset.data赋值为CSV字符串即可
• 请提前为本地接口配置CORS跨域规则，避免浏览器拦截请求
• 若需要同时指定图层样式、默认地图视角等配置，可在addDataToMap的入参中新增config字段传入对应配置即可

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