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

Question

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

我演示输出可浏览： https://ciatph.github.io/amia-lowres-hover.html

我想，询问我是否已经呈现在地图有效地在演示页面中使用。到目前为止，我有：

1. 上传一个GeoJSON的数据集
2. 导出的数据集为地形设置
3. 添加了地形设置成风格
4. 使用的样式来加载初始base map
5. 使用上传的数据集作为另一个数据源层（在最初的地图上）。这层监听和响应鼠标悬停并单击事件
6. 使用的上传数据集作为数据源为另一个层使用滤镜设置不同的颜色悬停区域在步骤＃5所创建的图层。

Screenshot of relevant Mapbox script

我对这种做法的问题是：

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

我希望你能帮助我与我的查询和开导我的更实用和有效的方法。谢谢。

Answer 1

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

• 你style包含ID ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz矢量地形设置，提到在样式为amia-lowres-tileset的composite矢量瓷砖源内。
• 它也可以通过ID ciatph/cj64in9zo1ksx32mr7ke3g7vb作为数据集访问，因为您已将其作为数据集上载。
• 您的脚本正在加载运行时的数据集。

我没有看到任何理由需要引用数据集而不是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