Leaflet使用leaflet-geopackage加载本地gpkg文件无法渲染问题咨询

问题根因 #

你遇到的file is not a database报错，核心原因是以下两点：

• 路径解析不匹配：代码中使用的@/assets/是Vue/Webpack的开发阶段路径别名，leaflet-geopackage库本身不识别该别名，浏览器发起请求时会将@视为路径的一部分，最终请求到的是404页面的HTML内容而非二进制gpkg文件，SQL解析引擎自然无法识别为数据库文件。
• 静态资源未被正确打包：默认的Vue脚手架配置不会将.gpkg后缀的文件识别为静态资源，不会将其打包到最终的输出目录，即使路径写对也无法正常访问到文件。

解决步骤 #

方法1：通过import导入资源（推荐）

1. 先修改Vue配置，让webpack识别gpkg后缀的文件：
   如果是Vue CLI3/4版本，在项目根目录的vue.config.js中添加如下配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.gpkg$/,
          type: 'asset/resource',
          generator: {
            filename: 'assets/geo/[name].[hash:8][ext]'
          }
        }
      ]
    }
  }
}

如果是旧版本用file-loader的项目，配置如下：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('geopackage')
      .test(/\.gpkg$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/geo/[name].[hash:8].[ext]'
      })
  }
}

2. 调整代码中的gpkg引入方式：

// 在组件script顶部导入gpkg文件
import usaGpkg from '@/assets/geo/gadm36_USA.gpkg'

// 加载图层时直接使用导入后的变量
var stater = L.geoPackageFeatureLayer([], {
  geoPackageUrl: usaGpkg,
  layerName: "gadm36_USA_2",
  style: {color: "black"}
}).addTo(mapDiv);

方法2：放置到public目录（无需修改webpack配置）

将gpkg文件放到项目的public/geo/目录下（没有对应目录就新建），加载时直接写绝对路径即可：

var stater = L.geoPackageFeatureLayer([], {
  geoPackageUrl: '/geo/gadm36_USA.gpkg',
  layerName: "gadm36_USA_2",
  style: {color: "black"}
}).addTo(mapDiv);

校验排查 #

如果修改后仍有报错，可以按以下步骤排查：

• 打开浏览器控制台的网络面板，确认gpkg文件请求状态为200，响应内容为二进制格式而非HTML
• 用QGIS打开本地的gpkg文件，确认文件本身没有损坏，目标图层确实存在

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