Интеграция локального стиля JSON в карту mapbox.js (и фильтрация более 100 полигонов в Mapbox)

Я использую фильтры в Mapbox Studio для стилизации файла geoJSON с 189 полигонами. Я смог отфильтровать свои данные для создания слоев, но он распознал только 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>

json mapbox mapbox-gl-js polygon
person nsCode    schedule 04.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы пытаетесь загрузить файл GeoJSON как «набор данных», а не как «набор плиток». Вы получите гораздо лучшую производительность (и не столкнетесь с описанным вами ограничением), если загрузите его как набор плиток и стиль, основанный на этом.

Если вы действительно хотите добавить файл GeoJSON локально, используйте _1 _.

person Steve Bennett    schedule 03.01.2017