GeoJSON занадто громіздкий - що робити?

Я використовую leaflet.js, щоб дозволити користувачам Інтернету вибирати регіон. Дійсні регіони - це штати США, канадські провідники та країни світу (крім США та Канади). Я створив власне форм-файл за допомогою Qgis і зберег його як геойсон. Я максимально спростив геометрію.

Отриманий форматний файл - 400 кбіт, але геойсон перевищує мегабайт. Це більше, ніж я хотів би. Мені потрібно зменшити накладні витрати мережі, що беруть участь у передачі цієї інформації.

Який правильний спосіб це зробити? Можливі варіанти:

1. Подайте файл geojson gzipped, розпакуйте на клієнті.
2. Проаналізуйте файл форми на клієнті до geojson
3. Створіть мою власну плитку з формфайлу та обслуговуйте їх

Якщо хтось міг би сказати мені, який варіант найкращий (або жоден із перерахованих вище), я би вдячний!

Перш ніж спуститися будь-якими більш трудомісткими стежками, найпростіший варіант - зменшити геометрію. Які ваші набори даних? Як ви їх спростили? На скільки це зменшило розмір файлу geojson?

Якщо ви впевнені, що зробили все, що можете, на вищезазначене, то найнижчий висячий плід ваших варіантів

1. Подайте файл geojson gzipped, розпакуйте на клієнті.

Усі сучасні веб-переглядачі роблять розпакування gzipped даних автоматично, тому це лише випадок налаштування веб-сервера для упаковки даних перед відправкою. Зазвичай це відносно прямий вперед, багато матеріалів для Apache , IIS або Nginx

Моя порада полягає в тому, щоб спробувати це спершу, протестуйте, потім, якщо затримка / відповідь / розмір даних неприйнятний, перейдіть до інших варіантів. Я б також з обережністю намагався оптимізувати передчасну оптимізацію, я б хотів визначити, для чого потрібно зменшити розмір даних, і як тільки у вас є важкі причини (та цифри) для цього, потім ітеративно впроваджуйте зміни та повторне тестування, щоб побачити, що вигоди, які ви отримуєте.

Mapshaper.org - це зручний безкоштовний онлайн-інструмент, який дозволяє завантажувати файл geojson, відображати його як карту, а потім вибирати один із трьох алогітритів спрощення, за допомогою яких можна регулювати силу за допомогою повзунка.

Він оновлює карту і виділяє червоним кольором будь-які місця, де є втрата цілісності, як перекриття між двома регіонами. Існує кнопка "виправити", яка зазвичай (але не завжди) вирішує подібні проблеми.

Ви можете знайти рівень спрощення, який є прийнятним, та експортувати щойно спрощений файл geojson.

Очевидно, це залежить від того, який рівень деталізації вам потрібен, але результати можуть бути вражаючими. Наприклад, ось карта Шотландії з файлом geojson 40mb:

99% додаток зменшує його до 441 kb-файлу без перекриттів і втрати деталей, невидимих ​​на цьому рівні збільшення:

Додаток 99,95% (до 29 кб) показує, яке спрощення шляху застосовується (і досі вдається уникнути перекриттів, і цілком підходить для таких видів, як хлороплет національного рівня):

Цікаво, чи можете ви використати стиснення, знайдене в цій відповіді, що говорить про стиснення GeoJSON з topojson .

Я не знаю, чи Ліфлет таки зможе прочитати GeoJSON - щось спробувати =)

Більше про topojson: https://github.com/mbostock/topojson/

Я згоден з @Kelso вище щодо спрощення вашої геометрії.

Якщо у вас немає доступу до вашого сервера, щоб легко знизити дані за допомогою gzip, ви можете переглянути бібліотеку MessagePack, щоб серіалізувати ваш geoJSON у бінарні дані (я вважаю, що це реалізація специфікації BSON, яка використовується такими речами, як MongoDB зберігати дані, але я можу помилятися) . Є бібліотеки в Python та javascript (серед інших), які можна використовувати для серіалізації / десериалізації даних.

Я б запропонував просто створити власний процедурний масив об’єктів Leaflet Polygon. Я згоден з тим, що GeoJSON є занадто великим. Назви ключових об'єктів є дуже описовими, але, можливо, і зайвими. Я роблю такі речі:

objects = [];
objects.push( new L.polygon([[1,1],[1,2],[3,4]],options );
objects.push( new L.polygon([[4,7],[8,27],[35,66]],options );
objects.push( new L.polygon([[3,5],[56,24],[13,49]],options );
objects.push( new L.polygon([[13,7],[7,68],[23,9]],options );
layerGroup = L.layerGroup(objects).addTo(map);

Це прямо. Це набагато легше, ніж GeoJSON, як це:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Polygon",
      "coordinates": [1,1],[1,2],[3,4]},
      },

    //etc...

І повторіть для кожного полігону ... тьфу ... так занадто роздутий imo. Додає багато байтів у ваш JS. Як я вже казав, ключові імена є приємними та описовими ... але вони довгі та додають багато зайвих байдів у ваш JS.