将本地JSON样式集成到mapbox.js map中（并在mapbox中过滤100多个多边形）_Json_Polygon_Mapbox_Mapbox Gl Js

将本地JSON样式集成到mapbox.js map中（并在mapbox中过滤100多个多边形）

json mapbox

将本地JSON样式集成到mapbox.js map中（并在mapbox中过滤100多个多边形）,json,polygon,mapbox,mapbox-gl-js,Json,Polygon,Mapbox,Mapbox Gl Js,我正在使用Mapbox Studio中的过滤器为带有189个多边形的geoJSON文件设置样式。我能够过滤我的数据来创建图层，但它只识别了我的100个多边形。我做了一些研究，发现实际上，Studio只能处理100个。我正在使用此样式集成到mapbox.js地图中（我可以这样做），但由于过滤器问题，无法格式化剩余的89个多边形。我下载了这个地图的JSON。我可以手动将剩余的层添加到JSON中吗？如果是这样，我将如何将本地JSON文件作为我的地图样式链接到我的mapbox.js代码中 mapbox.

我正在使用Mapbox Studio中的过滤器为带有189个多边形的geoJSON文件设置样式。我能够过滤我的数据来创建图层，但它只识别了我的100个多边形。我做了一些研究，发现实际上，Studio只能处理100个。我正在使用此样式集成到mapbox.js地图中（我可以这样做），但由于过滤器问题，无法格式化剩余的89个多边形。我下载了这个地图的JSON。我可以手动将剩余的层添加到JSON中吗？如果是这样，我将如何将本地JSON文件作为我的地图样式链接到我的mapbox.js代码中

mapbox.js代码（带有错误的mapbox Studio样式）：


正文{margin:0；padding:0；}
.map{位置：绝对；顶部：0；底部：0；宽度：100%；}
.传奇{
背景色：#D6；
边界半径：3px；
底部：30px；
盒影：0 1px2pRGBA（0,0,0,0.10）；
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
填充：10px；
位置：绝对位置；
右：10px；
z指数：1；
}
.图例h4{
利润率：0.10px；
}
.图例分区跨度{
边界半径：50%；
显示：内联块；
高度：10px；
右边距：5px；
宽度：10px；
}
HVI
1.
0.5
0
mapboxgl.accessToken='pk.eyj1ijoic3rhbwxlcm4ilcjhijoi2l3mnkwz2tndewej6anztm240c2d3byj9.ZTqhEH-1r0WelPq2n0rshQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/stamlern/ciwa09zej000f2pmrr8lm10ju',
中间：[-73.949,40.71]，
缩放：10.1
});

听起来您试图将GeoJSON文件作为“数据集”而不是“tileset”上传。如果您将其作为tileset上传，并基于此进行样式设置，您将获得更好的性能（并且不会遇到您描述的限制）

如果确实要在本地添加GeoJSON文件，请使用。

如果确实希望在本地添加GeoJSON文件，请使用

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        .map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map' class='map'></div>

<style>

.legend {
    background-color: #d6d6d6;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    right: 10px;
    z-index: 1;
}

.legend h4 {
    margin: 0 0 10px;
}

.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}

</style>

<div id='map'></div>

<div id='HVI-legend' class='legend'>
    <h4>HVI</h4>
    <div><span style='background-color: #EB6769'></span>1</div>
    <div><span style='background-color: #F3B3B4'></span>0.5</div>
    <div><span style='background-color: #FCFCFF'></span>0</div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RhbWxlcm4iLCJhIjoiY2l3MnkwZ2tnMDEwejJ6anZtM240c2d3byJ9.ZTqhEH-1r0WelPq2n0rshQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/stamlern/ciwa09zej000f2pmrr8lm10ju',
    center: [-73.949, 40.71],
    zoom: 10.1
});

</script>

</body>
</html>