Mapbox 使用自定义地图框样式'；将内部GeoJSON数据作为源

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

我的演示输出可在以下位置查看：

我想询问我是否已经按照演示页面中使用的方式有效地渲染了地图。到目前为止，我已经：

上传了GeoJSON数据集

将数据集导出到一个Tileset

将瓷砖集添加到样式中

使用样式加载初始底图

将上载的数据集用作另一层的数据源（位于初始地图顶部）。该层侦听并响应鼠标悬停和单击事件

使用上载的数据集作为另一个层的数据源，并使用过滤器为步骤5中创建的层的悬停区域添加不同的颜色

我对这种方法的问题是：

• 是否有一种方法可以将样式的内部（GeoJSON）数据集用于map.addSource（）部分，这样就不需要重新加载或重新定义它来创建交互层？我担心的是网络活动是否会在此时重新下载。我还想知道这是否可行，因为我们有将近100MB的大型GeoJSON数据。当从AmazonS3临时服务器移动到mapbox时，它会自动转换为Tileset，并且没有创建数据集来处理map.addSource（）部分

• 我可以将Mapbox的默认样式用于basemap（即。，mapbox://styles/mapbox/streets-v9)，并省略步骤4。如果我采用这种方法，数据集加载（对于步骤#5）对于大数据是否足够高效和快速，而不是通过样式使用或加载

---

我希望你能帮我解答我的疑问，并告诉我更畅销、更有效的方法。谢谢。

让我们从澄清您的现状开始：

• 您的包含id为ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz的矢量平铺集，在您的样式中称为

  amia lowres平铺集

  ，位于

  复合

  矢量平铺源中
• 它也可以通过ID

  ciatph/cj64in9zo1ksxx32mr7ke3g7vb作为数据集访问，因为您将其作为数据集上载

• 您的脚本正在运行时加载数据集

我看不出有任何理由需要引用数据集而不是tileset。因此，删除添加数据集的代码，并更新这两种样式以引用tileset（

source:“composite”

）

---

让我们先澄清一下您目前的情况：

• 您的包含id为ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz的矢量平铺集，在您的样式中称为

  amia lowres平铺集

  ，位于

  复合

  矢量平铺源中
• 它也可以通过ID

  ciatph/cj64in9zo1ksxx32mr7ke3g7vb作为数据集访问，因为您将其作为数据集上载

• 您的脚本正在运行时加载数据集

我看不出有任何理由需要引用数据集而不是tileset。因此，删除添加数据集的代码，并更新这两种样式以引用tileset（

source:“composite”

）

---

非常感谢您的解决方案和详细解释，@Steve Bennett。资料来源：图层的“合成”资料来源：我的一天：）非常感谢您的解决方案和详细解释，@Steve Bennett。来源：图层的“合成”来源：my day:）

    // 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", ""]
    });