Question

我目前正试图在上传到Mapbox的服务器时，使用来自shapefile（转换为GeoJSON）的数据来渲染地图。

我的演示输出可以在以下位置查看： https://ciatph.github.io/amia-lowres-hover.html

我想询问我是否有效地渲染了地图，如演示页面中所使用的那样。到目前为止，我有：

上传了GeoJSON 数据集
将数据集导出为 Tileset
将Tileset添加到样式
使用样式加载初始基本地图
使用上传的数据集作为另一个图层的数据源（位于初始地图之上）。此图层侦听并响应鼠标悬停和单击事件
使用上传的数据集作为另一个图层的数据源，使用过滤器为步骤＃5中创建的图层不同地为悬停区域着色。

Screenshot of relevant Mapbox script

我对这种方法的疑问是：

有没有办法将Style的内部（GeoJSON）数据集用于map.addSource（）部分，这样就不需要重新加载或重新定义它了创建交互式图层？如果此时再次重新下载网络活动，我就会关注它。我也有兴趣知道这是否可行，因为我们有大量几乎100MB的大型GeoJSON数据。从Amazon S3临时服务器移动到mapbox后，这会自动转换为Tileset，并且没有创建数据集来与map.addSource（）部分一起使用
我可以使用Mapbox的底图默认样式（即mapbox：// styles / mapbox / streets-v9），省略步骤＃4。如果我采用这种方法，数据集加载（对于步骤＃5）是否对大数据有效且足够快，而不是通过样式使用或加载？

我希望你能帮我解决问题，并启发更多可销售和有效的方法。谢谢。

Answer 1

让我们首先澄清你目前的情况：

您的style包含一个ID为ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz的矢量图块集，在您的样式中称为amia-lowres-tileset矢量图块源中的composite。
它也可以通过ID ciatph/cj64in9zo1ksx32mr7ke3g7vb作为数据集访问，因为您已将其作为数据集上传。
您的脚本正在运行时加载数据集。

我没有看到您需要引用数据集而不是tileset的任何理由。因此，删除添加数据集的代码，并更新两个样式以引用tileset（source: "composite"）。

    // Only used for coloring hover effect. Data informatiion be retrieved from styles alone
    /*      
    map.addSource("dataSource", {
        "type": "geojson",
        'data': 'https://api.mapbox.com/datasets/v1/ciatph/cj64in9zo1ksx32mr7ke3g7vb/features?access_token=pk.eyJ1IjoiY2lhdHBoIiwiYSI6ImNqNXcyeTNhcTA5MzEycHFpdG90enFxMG8ifQ.gwZ6uo6pvx4-RZ1lHODcBQ'
    });    
    */

    // add layer to color the raw source data
    map.addLayer({
        'id': 'municipalities',
        "type": "fill",
        "source": "composite",
        "source-layer": "amia-lowres-tileset",
        "layout": {},
        "paint": {
            "fill-color": "#627BC1",
            "fill-opacity": 0.5
        }
    });

    // add a conditional layer to play over the source data on hover event
    map.addLayer({
        "id": "state-fills-hover",
        "type": "fill",
        "source": "composite",
        "source-layer": "amia-lowres-tileset",
        "layout": {},
        "paint": {
            "fill-color": "#ff4",
            "fill-opacity": 1
         },
         "filter": ["==", "MUNI_CITY", ""]
    });

https://codepen.io/stevebennett/pen/OjvMWO

使用自定义Mapbox Style的内部GeoJSON数据作为源

1 个答案: