【问题标题】:Geopackage not rendering polygons to mapGeopackage 未将多边形渲染到地图
【发布时间】:2021-02-15 04:56:35
【问题描述】:

创建地图的代码:

 <div id="map" style="width: 1000px; height: 700px"></div>
 <script> 
    var map = L.map('map').setView([0,0], 1);
    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.ey31IjoibnVtaW51czEiLCJhIjoiY2treTN3YzduekdwMDJubXNhMWNpemdicyJ9.McJEAeE0Jbj999Oz4pbsZg', {
        attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
    }).addTo(map);

    var marker = L.marker([18.52, 73.86]).addTo(map);

这是正确地创建地图。现在,我正在尝试添加一个包含状态数据的地理包:https://biogeo.ucdavis.edu/data/gadm3.6/gpkg/gadm36_IND_gpkg.zip

当我使用教程代码在地图上绘制河流时,效果很好:

var rivers = L.geoPackageFeatureLayer([], {
     geoPackageUrl: 'http://ngageoint.github.io/GeoPackage/examples/rivers.gpkg',
     layerName: 'rivers',

     style: {color: 'green'}
    }).addTo(map);

    L.geoJson(stateData).addTo(map); 

而且,当我将此状态地理包上传到地理包查看器https://ngageoint.github.io/geopackage-js/ 时,它会正确绘制所有内容。然而,当我尝试在我的地图中实现同样的事情时,地图渲染得很好,但地图上没有绘制状态线;根本没有迹象表明甚至存在以下代码:

var stater = L.geoPackageFeatureLayer([], {
     geoPackageUrl: 'assets/geospatial/gadm_states.gpkg',
     layerName: 'stater',

     style: {color: 'red'}
    }).addTo(map);

我想可能是因为 gpkg 文件中有多个图层,而我没有正确指定什么,所以我从 GeoPackage Viewer 下载了我想要的图层作为 geojson 文件,但这不起作用任何一个。有没有人知道出了什么问题?

【问题讨论】:

    标签: javascript leaflet geopackage


    【解决方案1】:

    我认为您正在编造stater 层的名称。

    我已下载(并未压缩)部分 GADM 数据集,并查看其中包含哪些命名层,然后在其上运行 ogrinfo:

    $ wget https://biogeo.ucdavis.edu/data/gadm3.6/gpkg/gadm36_ESP_gpkg.zip
     [snip]
     2021-02-15 10:49:45 (3,56 MB/s) - “gadm36_ESP_gpkg.zip” saved [9767512/9767512]
    
    $ unzip gadm36_ESP_gpkg.zip
    Archive:  gadm36_ESP_gpkg.zip
      inflating: gadm36_ESP.gpkg         
      inflating: license.txt  
    
    $ ogrinfo gadm36_ESP.gpkg 
    
    INFO: Open of `gadm36_ESP.gpkg'
          using driver `GPKG' successful.
    1: gadm36_ESP_0 (Multi Polygon)
    2: gadm36_ESP_1 (Multi Polygon)
    3: gadm36_ESP_2 (Multi Polygon)
    4: gadm36_ESP_3 (Multi Polygon)
    5: gadm36_ESP_4 (Multi Polygon)
    

    ...所以 geopackage 有五个不同的主题层,命名为 gadm36_ESP_0 到 gadm36_ESP_5。

    现在,我可以将该文件放在一个小型网络服务器中并设置一些基本的 Leaflet 示例以从 我知道存在的地理包中的一个层加载数据:

    var provinces = L.geoPackageFeatureLayer([], {
         geoPackageUrl: 'https://ivan.sanchezortega.es/cors/2021-02-15-gpkg/gadm36_ESP.gpkg',
         layerName: 'gadm36_ESP_2',
    
         style: {color: 'red'}
    }).addTo(map);
    

    ...live example 按预期工作:

    所以:

    • 请检查您的地理包的结构,并知道它包含哪些命名层。
    • 始终检查您的browser's console 是否有错误,因为
      • 错误的图层名称将导致“NULL 几何列错误”
      • 托管地理包的 Web 服务器可能配置错误(例如 HTTPS 或 CORS 问题)

    【讨论】:

    • 非常感谢,您为我解决了两个问题:我遇到了 CORS 问题并且我使用了错误的图层名称。
    • 是否可以在地理包文件中窥视以查看其中各种多边形的名称,然后在代码中引用它们?例如,如果我想更改以字母“A”开头的名称表示状态的多边形的颜色,您对我如何最好地做到这一点有任何建议吗?
    • 这是一个不同的问题。请不要在 cmets 中提出复杂的问题。
    • 好的;我已经发布了一个新问题 (stackoverflow.com/questions/66208220/…) 如果您可以并且想要回答它
    猜你喜欢
    • 2013-07-11
    • 2012-12-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-01
    • 1970-01-01
    • 2012-02-05
    相关资源
    最近更新 更多