Как повысить производительность при вставке большого количества функций в карту с помощью leaflet.js

Question

С прототипом ниже я добавляю множество функций в шагах в osm. Я загружаю около 8500 функций multipolygon. У некоторых из них есть много координат, поэтому всего около 150 МБ текстовых данных. Загрузка их по одному приводит к краху браузера. Загрузка его в куски работает, но это тоже не быстро. Особенно, если вы хотите прокручивать или увеличивать масштаб после завершения загрузки. Я немного стесняюсь загружать все это за один раз, так как это 150 МБ данных.

Какие варианты я должен улучшить? Чтобы быть ясным: я не говорю о загрузке. Я говорю об рендеринге карты с функциями.

Вот код заглушки:

addToMap = function (id, totalCount) { 
    var idTo = id+99; 
    jQuery.get('getData.php', {id: id, idTo: idTo}, function (result) { 
     var geojson; 

     function onEachFeature(feature, layer) { 
      layer.on({ 
       mouseover: highlightFeature, 
       mouseout: resetHighlight, 
       click: zoomToFeature 
      }); 
     } 

     function resetHighlight(e) { 
      geojson.resetStyle(e.target); 
      info.update(); 
     } 

     geojson = L.geoJson(result, { 
      style: getStyle, 
      onEachFeature: onEachFeature 
     }).addTo(map); 

     if (id < totalCount) { 
      jQuery('#count').html(idTo+' of '+totalCount); 
      addToMap(idTo+1, totalCount); 
     } else { 
      jQuery('#loader').remove(); 
     } 
    }, 'json'); 
} 

Answer 1

Секрет, чтобы сделать много вещей очень очень быстро это ... не оказывать много вещей.

Это может показаться противоречивым, но на самом деле это очень просто. Вам не нужно, чтобы сделать все, вам просто нужно сделать:

• Материал, который находится внутри экрана (плюс немного Маржа из-оф-экран)
• Материала, который измеряет меньше один пиксель (потому что никто никогда не будет замечать Субпиксель артефакты)

по умолчанию, листовка, на деле упрощения векторных геометрий, чтобы сэкономить время (Дугласа peucker до нескольких пикселей), но это упрощает все геометрии (который является вычислительно дорогостоящим) и рендеринга, основанного только на ограничивающих прямоугольниках геометрии (который делает большие геометрии, которые не видны, и визуализирует все точки больших геометрий, для которых видна только небольшая битка).

К счастью, несколько последних событий помогают с этим: векторные плитки и geojson-vt. Прочитайте https://www.mapbox.com/blog/introducing-geojson-vt/

Общая идея состоит в том, что набор данных подвергается предварительному счету (который принимает нетривиальное количество времени, но может быть выполнен за нитью), нарезая данные на плитки. Нарезка в плитки означает, что будет показана только видимая часть больших геометрий, что позволит сэкономить огромное количество времени. Это также приведет к упрощению некоторых линий, в зависимости от уровня плиточной пирамиды.

Эти плитки карт соответствуют тому же стандарту, что и растровые плитки, поэтому алгоритмы видимости можно обменивать.

Насколько мне известно, есть только одна рабочая реализация geojson-vt и листовка: Leaflet.VectorGrid (или вы можете проверить plugins list, которые могут содержать дополнительные плагины в будущем). Я предлагаю вам взглянуть на него.

Answer 2

В дополнение к другим ответам:

• Преобразование GeoJSON в TopoJson, чтобы уменьшить размер его. Вот одна утилита для этого - https://github.com/topojson/topojson

• Основываясь на вашем уровне масштабирования, отобразите только те части важных или достаточно важных функций.(как писал Иван Санчесец)