javascript - Geopackage 未在传单中呈现

Question

无法让 geopackage 文件显示在 Leaflet-geopackage 中，我正在运行 Ubuntu 16.04、Vue 2.6.14 和 Chrome 版本 95.0.4638.54。

我有一个 mapbox 图像，它将使用此代码块进行渲染。

     var mapDiv = L.map("mapContainer", {zoomControl: false}).setView([36.7783, -119.4179], 5);
     L.tileLayer(
       "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
       {
         attribution:
           'Map data (c) <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
         maxZoom: 18,
         id:'mapbox/light-v9',
         accessToken:"XXXXX",
       }
     ).addTo(mapDiv);

然后使用 geopackage-js (leaflet-geopackage) 我尝试使用这个块将县级信息放在地图上。

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

此控制台消息失败

Loading GeoPackage @/assets/geo/: 248.341064453125 ms
sql-asm-memory-growth.js?77f5:82 Uncaught (in promise) Error: file is not a database
    at a.handleError (sql-asm-memory-growth.js?77f5:82)
    at a.prepare (sql-asm-memory-growth.js?77f5:80)
    at SqljsAdapter.each (sqljsAdapter.js?732b:265)
    at SqljsAdapter.all (sqljsAdapter.js?732b:241)
    at GeoPackageConnection.all (geoPackageConnection.js?c43a:197)
    at GeometryColumnsDao.Dao.queryForAllEq (dao.js?4966:357)
    at GeometryColumnsDao.queryForTableName (geometryColumnsDao.js?5899:78)
    at GeoPackage.getFeatureDao (geoPackage.js?07f8:530)
    at GeoPackage.iterateGeoJSONFeatures (geoPackage.js?07f8:1516)
    at eval (leaflet-geopackage.js?865f:183)
a.handleError @ sql-asm-memory-growth.js?77f5:82
a.prepare @ sql-asm-memory-growth.js?77f5:80
SqljsAdapter.each @ sqljsAdapter.js?732b:265
SqljsAdapter.all @ sqljsAdapter.js?732b:241
GeoPackageConnection.all @ geoPackageConnection.js?c43a:197
Dao.queryForAllEq @ dao.js?4966:357
GeometryColumnsDao.queryForTableName @ geometryColumnsDao.js?5899:78
GeoPackage.getFeatureDao @ geoPackage.js?07f8:530
GeoPackage.iterateGeoJSONFeatures @ geoPackage.js?07f8:1516
eval @ leaflet-geopackage.js?865f:183
Promise.then (async)
xhr.onload @ leaflet-geopackage.js?865f:178
load (async)
onAdd @ leaflet-geopackage.js?865f:176
_layerAdd @ leaflet-src.js?e11e:6567
whenReady @ leaflet-src.js?e11e:4428
addLayer @ leaflet-src.js?e11e:6629
addTo @ leaflet-src.js?e11e:6505
setupLeafletMap @ ReportChoroplethCounties.vue?a461:36
mounted @ ReportChoroplethCounties.vue?a461:44
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ VM251619 ReportChoroplethCounties.vue:34
./src/components/ReportChoroplethCounties.vue @ 68.8ada1ba8.0.3.1.js:269
__webpack_require__ @ app~._m.8ada1ba8.0.3.1.js:871
hotApplyInternal @ app~._m.8ada1ba8.0.3.1.js:767
hotApply @ app~._m.8ada1ba8.0.3.1.js:429
(anonymous) @ app~._m.8ada1ba8.0.3.1.js:404
Promise.then (async)
hotUpdateDownloaded @ app~._m.8ada1ba8.0.3.1.js:403
hotAddUpdateChunk @ app~._m.8ada1ba8.0.3.1.js:379
webpackHotUpdateCallback @ app~._m.8ada1ba8.0.3.1.js:75
(anonymous) @ 68.8ada1ba804fbefbb0671.hot-update.js:1
leaflet-geopackage.js?865f:179 Loading GeoPackage @/assets/geo/gadm36_USA.gpkg: 13.707275390625 ms
sql-asm-memory-growth.js?77f5:82 Uncaught (in promise) Error: file is not a database
    at a.handleError (sql-asm-memory-growth.js?77f5:82)
    at a.prepare (sql-asm-memory-growth.js?77f5:80)
    at SqljsAdapter.each (sqljsAdapter.js?732b:265)
    at SqljsAdapter.all (sqljsAdapter.js?732b:241)
    at GeoPackageConnection.all (geoPackageConnection.js?c43a:197)
    at GeometryColumnsDao.Dao.queryForAllEq (dao.js?4966:357)
    at GeometryColumnsDao.queryForTableName (geometryColumnsDao.js?5899:78)
    at GeoPackage.getFeatureDao (geoPackage.js?07f8:530)
    at GeoPackage.iterateGeoJSONFeatures (geoPackage.js?07f8:1516)
    at eval (leaflet-geopackage.js?865f:183)
a.handleError @ sql-asm-memory-growth.js?77f5:82
a.prepare @ sql-asm-memory-growth.js?77f5:80
SqljsAdapter.each @ sqljsAdapter.js?732b:265
SqljsAdapter.all @ sqljsAdapter.js?732b:241
GeoPackageConnection.all @ geoPackageConnection.js?c43a:197
Dao.queryForAllEq @ dao.js?4966:357
GeometryColumnsDao.queryForTableName @ geometryColumnsDao.js?5899:78
GeoPackage.getFeatureDao @ geoPackage.js?07f8:530
GeoPackage.iterateGeoJSONFeatures @ geoPackage.js?07f8:1516
eval @ leaflet-geopackage.js?865f:183
Promise.then (async)
xhr.onload @ leaflet-geopackage.js?865f:178
load (async)
onAdd @ leaflet-geopackage.js?865f:176
_layerAdd @ leaflet-src.js?e11e:6567
whenReady @ leaflet-src.js?e11e:4428
addLayer @ leaflet-src.js?e11e:6629
addTo @ leaflet-src.js?e11e:6505
setupLeafletMap @ ReportChoroplethCounties.vue?a461:36
mounted @ ReportChoroplethCounties.vue?a461:44
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ ReportChoroplethCounties.vue?a2da:29
./src/components/ReportChoroplethCounties.vue @ 68.8ada1ba8.0.3.1.js:269
__webpack_require__ @ app~._m.8ada1ba8.0.3.1.js:871
hotApplyInternal @ app~._m.8ada1ba8.0.3.1.js:767
hotApply @ app~._m.8ada1ba8.0.3.1.js:429
(anonymous) @ app~._m.8ada1ba8.0.3.1.js:404
Promise.then (async)
hotUpdateDownloaded @ app~._m.8ada1ba8.0.3.1.js:403
hotAddUpdateChunk @ app~._m.8ada1ba8.0.3.1.js:379
webpackHotUpdateCallback @ app~._m.8ada1ba8.0.3.1.js:75
(anonymous) @ 68.1e98547e0c527424230d.hot-update.js:1

如下所示，来自 repo geopackage-js 的河流示例运行良好。

L.geoPackageTileLayer({
    geoPackageUrl: 'http://ngageoint.github.io/GeoPackage/examples/rivers.gpkg',
    layerName: 'rivers_tiles'
}).addTo(map);

与发布此问题的人不同：Geopackage not rendering polygons to map

我确实有正确的图层名称，但我仍然无法可视化县级信息。为什么内部 .gpkg 不起作用，但可以通过 http 链接下载的东西（如 Rivers 示例）起作用？如何解决此问题以使用本地 .gpkg 文件？

javascript - Geopackage 未在传单中呈现

0 回答 0

Related

Reference