Question

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

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

<!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>

Answer 1

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

如果您确实想在本地添加GeoJSON文件，请使用map.addSource。

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

1 个答案: