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

Question

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

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

我想问一下我是否像演示页面中那样有效地渲染了地图。到目前为止，我有：

上传了一个 GeoJSON 数据集
将数据集导出到 Tileset
将 Tileset 添加到样式
使用样式加载初始底图
使用上传的 Dataset 作为另一个 Layer 的数据源（在初始地图之上）。该层监听并响应鼠标悬停和点击事件
使用上传的 Dataset 作为另一个 Layer 的数据源，并使用过滤器为步骤中创建的图层的悬停区域着色不同#5.

Screenshot of relevant Mapbox script

我对这种方法的问题是：

有没有办法为 map.addSource() 部分使用 Style 的内部 (GeoJSON) 数据集，这样它就不需要重新加载或重新定义创建交互式图层？如果此时再次重新下载网络 activity，我很担心。我也很想知道这是否可行，因为我们有几乎 100MB 的大型 GeoJSON 数据。从 Amazon S3 临时服务器移动到 mapbox 时，这会自动转换为 Tileset，并且没有创建数据集来播放 map.addSource() part
我可以使用 Mapbox 的默认底图样式（即 mapbox://styles/mapbox/streets-v9），并省略第 4 步。如果我采用这种方法，数据集加载（对于第 5 步）对于大数据是否足够高效和快速，而不是通过 Style 使用或加载？

我希望你能帮助我解决我的疑问，并启发我更畅销和更有效的方法。谢谢。

Answer 1

让我们先弄清楚你目前的情况：

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

我看不出有任何理由需要引用数据集而不是图块集。因此，删除添加数据集的代码，并将两种样式更新为引用图块集 (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 样式的内部 GeoJSON 数据作为源

Using a custom Mapbox Style's internal GeoJSON data as a source

shapefile

geojson

mapbox

mapbox-gl-js