Карта системи

Створення приголомшливих географічних візуалізацій з інтерактивними картами, розкриттям даних, а також показаннями анімації.

Огляд

Система мапи:

• Світ та регіональні карти — Попередні карти з CDN (Світ, США, Європи та ін.)
• Мультипле проекції — мерехтувальник, Природні Землі, Ортографічні (глоби), Альбери та багато іншого
• Region Highlighting — Країни Highlight, штати або провінції
• Дата Візуалізація* — Карти Чорношкірі з кольоровими масштабами
• Маркери та етикетки* — Додавання точок процентів
• Професійна якість* — підтримка багатополігонів для складних країн

Завантаження карти

Від шаблонів

Найпростіший спосіб розпочати використання шаблону карти:

1. Відкрити панель****
2. Знайти категорію****
3. Виберіть шаблон, як “Глобальна карта розвідки” або “Використання даних США”

Від генератора панель

1. Відкрити панель*****
2. Виберіть Map як тип фону
3. Виберіть карту (Світ, США, Європа тощо)
4. Налаштування проекції та укладання

Типи карт

Проекти

Виберіть правильний виступ для візуалізації:

Природні Землі (Default)

Кращі за світові карти. Збалансоване спотворення, виглядає природно.

Про нас

Збереження кутів, звичний вигляд. Навігаційні карти.

Ортографічна (Globe)

Виставки Землі як 3D-сфера. Відмінно підходить для цільових регіонів.

[Ортографічний глобус] (…/images/map-orthographic-globe.png)

Альберс США

Спеціальна проекція на карти США, що включає Аляска та Гаваї, що переставляється.

Інші проекти

• Robinson* — Компромісна проекція, хороша для світових карт
• Winkel Tripel* — Низький рівень спотворення
• Conic Equal Area** — Добре для середніх регіонів

Висотні Регіони

Одноразова країна / Держава

Натисніть на будь-який регіон, щоб вибрати його , потім використовуйте панель властивостей для зміни кольору.

Кілька регіонів

Використовуйте API або шаблони для виділення декількох регіонів:

// Highlight North American countries
app.mapSystem.highlightRegions(
  ['United States of America', 'Canada', 'Mexico'],
  { fillColor: '#22c55e', strokeColor: '#16a34a' }
);

Анімовані пропозиції

Шаблони можуть анімувати регіон виділяється за допомогою стиглих термінів для сюжетуРозгортання ефектів.

Формати ідентифікаторів регіону

Різні карти використовують різні формати ID:

Візуалізація даних (Choropleth)

Колірні регіони на основі значень даних:

app.mapSystem.applyDataColors({
  'California': 39538223,
  'Texas': 29145505,
  'Florida': 21538187
}, {
  colorScale: 'blues',
  showLegend: true,
  legendTitle: 'Population'
});

Кольори

Маркери

Додайте маркери точки на конкретних координати:

app.mapSystem.addMarker({
  lat: 37.7749,
  lon: -122.4194,
  label: 'San Francisco',
  color: '#ef4444',
  pulse: true  // Animated pulse effect
});

Налаштування якості

Імпортант:* Використовуйте якість professional для країн з складними формами (Росія, Франція, США) для забезпечення всіх елементів території, які надають належність.

Multi-Polygon Країни

Деякі країни складаються з декількох відключених частин:

• Росія* — материк + Калінінград + острови
• Франція* — материк + Корсика + закордонні території
• США* — материк + Аляска + Гаваї
• Індонезія* — Тисячі островів
• Fiji* — кілька островів

Система карти автоматично використовує Paper.js CompoundPath для цих країн, коли якість встановлюється до professional.

Інтерактивність

Hover ефекти

Увімкнути виділення конюшини:

app.mapSystem.loadMap('world', {
  enableHover: true,
  hoverFill: '#93c5fd'
});

Натисніть Події

Відповідь на регіон кліків:

app.mapSystem.on('regionClick', (event) => {
  console.log('Clicked:', event.regionId);
  // Show info panel, highlight related regions, etc.
});

Шаблони карт

Глобальна карта розвідки

Показує розширення бізнесу по регіонах з анімованим фазовим підсвічуванням.

Візуалізація даних США

Відображає дані по США з хроплевою фарбою.

Користувальницькі карти Імпорт

Для докладних регіональних карт не включено, використовуйте importCustomMap():

// Load from GeoJSON
await app.mapSystem.importCustomMap(geoJsonData, {
  projection: 'mercator',
  idProperty: 'name'
});

Джерела даних:

• Природні Землі — дані публічної карти
• GADM — Детальні адміністративні межі
• Mapshaper — Спрощуємо файли GeoJSON

Навігація

1. Використовуйте світові HighRes для професійних експортерів з багатополігонними країнами
2. Природний простір Землі* найкраще підходить для більшості світових карт
3. Albers США* призначений для карт США
4. Ортографічний* створює драматичні краєвиди світу для презентацій
5. Професійна якість* запобігає корупції у складних країнах

Клавіатури клавіатури

Карта Регіон Анімація

Аніматові паперові регіони з вбудованими кольоровими змінами. Ідеально підходить для відображення змін даних за часом, глобальних послідовностей розширення або створення візуалізації даних.

Базова анімація регіону

Анімувати певні регіони з кольоровими переходами на основі ключів:

// Load a world map first
await app.loadMap('world', {
  projection: 'naturalEarth',
  fillColor: '#e2e8f0'
});

// Animate specific regions
app.animateMapRegions({
  duration: 5,
  loop: true,
  regions: {
    'USA': [
      { time: 0, fillColor: '#ef4444' },      // Red at start
      { time: 2.5, fillColor: '#22c55e' },    // Green at midpoint
      { time: 5, fillColor: '#ef4444' }       // Red at end (loops)
    ],
    'France': [
      { time: 0, fillColor: '#3b82f6' },      // Blue at start
      { time: 5, fillColor: '#fbbf24' }       // Yellow at end
    ]
  }
});

Хвиля Анімація

Створення хвилі кольору по всіх регіонах на основі географічного положення:

app.animateMapWave({
  duration: 10,
  loop: true,
  colors: ['#ef4444', '#fbbf24', '#22c55e', '#3b82f6'],
  waveDirection: 'horizontal'  // 'horizontal', 'vertical', 'radial'
});

Інтеграція з часом

Анімовані регіони інтегруються з Timeline UI:

• Анімовані регіони з’являються в часовій панелі
• Скраб через час для зміни кольору попереднього перегляду
• Play/pause анімації з таймером
• Експорт анімації на відео або GIF

Стопінг анімації

// Stop all region animations
app.stopMapAnimations();

// Stop specific regions
app.stopMapAnimations({ regions: ['USA', 'Canada'] });

// Stop but preserve current colors
app.stopMapAnimations({ resetColors: false });

Отримання анімованих регіонів

const animated = app.getAnimatedMapRegions();
// Returns: [{ regionId, keyframes, duration, loop }, ...]

CSV Експорт та імпорт

Експортувати та імпортувати дані регіону, включаючи кольори, висвітлення статусу та вибір стану для візуалізації даних.

Експорт даних регіону

// Export all regions with current state
const csv = app.exportMapRegionDataCSV();

// Export with custom options
const csv = app.exportMapRegionDataCSV({
  includeHighlighted: true,  // Include highlight status column
  includeSelected: true,     // Include selection status column
  includeColors: true        // Include fill/stroke colors
});

// Download directly as CSV file
app.downloadMapRegionDataCSV('my-map-data.csv');

Формат CSV:

regionId,name,highlighted,selected,fillColor,strokeColor
USA,United States of America,1,0,#22c55e,#16a34a
CAN,Canada,0,0,#e5e7eb,#9ca3af
FRA,France,1,1,#3b82f6,#2563eb

Імпорт даних регіону

Імпорт даних CSV для оновлення країн регіону:

// Import from CSV text
app.importMapRegionDataCSV(csvText, {
  applyColors: true,      // Apply fill/stroke colors from CSV
  applyHighlight: true,   // Update highlight status
  applySelection: true    // Update selection status
});

Програмний вибір

// Select regions programmatically
app.selectMapRegions(['USA', 'Canada', 'Mexico']);

// Deselect regions
app.deselectMapRegions(['Mexico']);

// Get highlighted regions
const highlighted = app.getHighlightedMapRegions();
// Returns: ['USA', 'France', ...]

Робочий потік: Розкладні карти редагування

1. Навантаження карти і виділити деякі регіони
2. Експорт до CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Редагування в Excel / Google Sheets (змінити кольори, встановити виділено=1)
4. Імпорт назад: app.importMapRegionDataCSV(updatedCsv)

Цей робочий процес ідеально підходить для:

• Нетехнічні дані для редагування карт
• Настроювання оновлення до багатьох регіонів
• Інтеграція газопроводів
• Параметри керованої карти

GeoJSON Експорт та імпорт

Експорт карти як GeoJSON для редагування в зовнішніх інструментах, таких як QGIS або Mapshaper, а потім переімпорт з модифікаціями.

Експорт модифікованої карти

Експорт карти з поточними кольорами та стилями:

// Export as GeoJSON (includes current colors/styles)
const geoJson = app.exportMapGeoJSON();

// Download directly
app.downloadMapGeoJSON('my-styled-map.geojson');

Експорт оригінального джерела

Завантажте точний GeoJSON, який був використаний для завантаження карти (незмінені межі):

// Get original source data
const original = app.getOriginalMapGeoJSON();

// Download for external editing
app.downloadOriginalMapGeoJSON('world-source.geojson');

Імпорт користувальницьких карт

Імпортувати ваші редаговані дані GeoJSON або зовнішньої карти:

// Import from URL
await app.importCustomMap('https://example.com/my-map.geojson');

// Import from object
await app.importCustomMap(editedGeoJson, {
  projection: 'naturalEarth'
});

Повний робочий процес: Редагування → Re-імпорт → Анімат

1. Load і експорт** оригінальна карта:

   await app.loadMap('world');
   app.downloadOriginalMapGeoJSON('world-source.geojson');
   

2. Редагувати межі в зовнішніх інструментах:

   • QGIS - Повнофункціональний редактор ГІС
   • Mapshaper - Інтернет спрощення та редагування
   • geojson.io - Швидкий редактор онлайн

3. Re-імпорт** Ваш редагований номер:

   await app.importCustomMap(editedGeoJson, { projection: 'naturalEarth' });
   

4. Animate** мапа на замовлення:

   app.animateMapRegions({
     duration: 5,
     regions: { 'MyRegion': [{ time: 0, fillColor: '#ef4444' }, ...] }
   });
   

Карта Джерело інформації

Отримати інформацію про на даний момент завантажену карту:

const info = app.getMapSourceInfo();
// {
//   source: 'world',
//   projection: 'naturalEarth',
//   quality: 'standard',
//   regionCount: 177,
//   hasOriginalGeoJSON: true,
//   isCustomImport: false
// }

Зовнішні ресурси

Джерела даних карт

Перетворення та редагування інструментів

Формати роботи

Файл: GeoJSON (using Mapshaper):

1. mapshaper.org
2. Перетягніть файл .shp (обов’язково з файлами .dbf та .prj)
3. Натисніть Simplify, щоб зменшити розмір файлу (застосувати 10-20% для веб)
4. Виберіть Експорт********
5. Імпорт в PinePaper з app.importCustomMap()

TopoJSON → GeoJSON:

Файли TopoJSON автоматично перетворюються при імпорті в PinePaper.

Поради щодо розміру файлів

API Посилання

Для програмного керування картою див. Map System API Документація.