1
Я использую фильтры в Mapbox Studio для создания файла geoJSON с 189 полигонами. Я смог отфильтровать свои данные для создания слоев, но он узнал только 100 моих полигонов. Я провел некоторое исследование и увидел, что на самом деле Studio может обрабатывать только 100. Я использую этот стиль для интеграции в карту mapbox.js (я был в состоянии сделать это), но не смог отформатировать оставшиеся 89 полигонов из-за фильтра. Я загрузил JSON этой карты. Могу ли я просто добавить оставшиеся слои в JSON? Если да, как бы связать локальный файл JSON как мой стиль карты с моим кодом mapbox.js?Интеграция локального стиля JSON в карту mapbox.js (и фильтрация более 100 полигонов в Mapbox)
mapbox.js код (с неисправным MapBox Студия стиля):
<!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>