Система карт

Создавайте потрясающие географические визуализации с интерактивными картами, хороплитной окраской данных и анимированными показами.

[Мировая карта Природная Земля] (…/images/map-world-natural-earth.png)

Обзор

Система карт предусматривает:

• World & Regional Maps — предварительно загруженные карты из CDN (мир, США, Европа и др.)
• Множественные проекции — Меркатор, Природная Земля, Ортографический (глобус), Альберы и многое другое
• Region Highlighting — Страны, штаты или провинции
• Визуализация данных — Хороплетные карты с цветовыми шкалами
• Маркеры и ярлыки - Добавить точки интереса
• Профессиональное качество — многопользовательская поддержка сложных стран

Загрузить карту

Из шаблонов

Самый простой способ начать работу - использовать шаблон карты:

1. Откройте панель Templates
2. Найдите категорию Maps
3. Выберите шаблон «Глобальная карта расширения» или «Визуализация данных США»

Из панели генератора

1. Откройте панель Generator
2. Выберите Карта в качестве фонового типа
3. Выберите карту (Мир, США, Европа и т.д.)
4. Настройка проекции и стиля

Типы карт

Прогнозы

Выберите правильную проекцию для визуализации:

Природная Земля (по умолчанию)

Лучше всего для карт мира. Сбалансированное искажение выглядит естественно.

[Проекция естественной Земли] (…/images/map-world-natural-earth.png)

Меркатор

Сохраняет углы, знакомый взгляд. Подходит для навигационных карт.

[Проекция Меркатора] (…/images/map-mercator-projection.png)

Орфографический (Глобус)

Земля как 3D-сфера. Отлично подходит для сфокусированных взглядов региона.

Орфографический глобус (…/images/map-orthographic-globe.png)

Альберс США

Специальная проекция для карт США, включающая Аляску и Гавайи, позиционируется.

[Алберс США] (…/images/map-usa-albers.png)

Другие прогнозы

• Робинсон — Компромиссная проекция, полезная для карт мира
• Winkel Tripel - Низкое искажение прогноза мира
• Conic Equal Area — подходит для среднеширотных регионов

Выделение регионов

Единая страна/государство

Нажмите на любой регион, чтобы выбрать его Затем используйте панель свойств, чтобы изменить цвет.

Несколько регионов

Используйте API или шаблоны для выделения нескольких областей:

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

Анимированные откровения

Шаблоны могут оживлять основные моменты региона с ошеломляющим временем для эффектов повествования.

[Высоко освещенные регионы] (…/images/map-world-highlighted.png)

Форматы региональных ID

Различные карты используют разные форматы 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 для стран со сложными формами (Россия, Франция, США), чтобы обеспечить правильное отображение всех частей территории.

Многополигональные страны

Некоторые страны состоят из нескольких разъединенных частей:

• Россия Материк + Калининград + острова
• Франция — материк + Корсика + заморские территории
• США — материк + Аляска + Гавайи (на картах мира)
• Индонезия — тысячи островов
• Фиджи** — несколько островов

Система карт автоматически использует Paper.js CompoundPath для этих стран, когда качество настроено на professional.

Взаимодействие

Эффекты Hover

Включить подсветку на виселице:

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

Click События

Отвечайте на клики региона:

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'
});

Источники данных:

• [Природная Земля] (https://naturalearthdata.com) — Данные карты общественного достояния
• [GADM] (https://gadm.org) — Детальные административные границы
• Mapshaper — Упрощение файлов GeoJSON

Советы

1. Использовать WorldHighRes для профессионального экспорта с полигонами
2. **Проекция Земли лучше всего подходит для большинства карт мира
3. Albers USA специально разработан для карт США
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:

• Анимированные регионы появляются в панели Timeline
• Скраб через время для предварительного просмотра изменений цвета
• Игра / пауза анимации с контролем временной шкалы
• Экспорт анимации в видео или GIF

[Timeline with Map Animations] (…/images/timeline-with-keyframes.png)

Прекратить анимацию

// 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', ...]

Workflow: Редактирование карт на основе таблиц

1. Загрузите карту и выделите некоторые регионы
2. Экспорт в CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Редактирование в таблицах Excel/Google (изменение цветов, выделенный набор=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'
});

Полный рабочий процесс: редактирование → реимпорт → анимация

1. Загрузка и экспорт Оригинальная карта:

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

2. Изменить границы во внешних инструментах:

   • QGIS - полнофункциональный редактор ГИС
   • Mapshaper - Онлайн-упрощение и редактирование
   • [geojson.io] (https://geojson.io) - Быстрый онлайн редактор

3. Возвратить отредактированную карту:

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

4. ** Ваша персональная карта:

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

Map Source Информация

Получите информацию о загруженной карте:

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

Внешние ресурсы

Источники данных Map

Инструменты конверсии и редактирования

Формат преобразования Workflow

Shapefile → GeoJSON (с использованием Mapshaper):

1. Перейти на mapshaper.org
2. Перетащите файл .shp (наряду с файлами .dbf и .prj)
3. Нажмите Упростить, чтобы уменьшить размер файла (использовать 10-20% для веб-страниц)
4. Нажмите Экспорт → Выберите GeoJSON
5. Импорт в PinePaper с app.importCustomMap()

TopoJSON → GeoJSON:

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

File Size Советы

Ссылка API

Для управления программной картой см. [Карточная система API Документация] (/api/features/maps).