Sistem hartă

Creaţi vizualizări geografice uimitoare cu hărţi interactive, colorarea datelor coroplete şi revelaţiile animate.

[World Map Natural Earth] (…/images/map-world-natural-earth.png)

Prezentare generală

Sistemul Hartă oferă:

• World & Regional Maps
• Proiecții multiple
• Region Highlighting
• Data Visualization
• Markers & Labels
• Calitate Profesională

Se încarcă o hartă

Din șabloane

Cel mai simplu mod de a începe este utilizarea unui șablon hartă:

1. Deschide panoul Templates
2. Găsiți categoria Maps
3. Alegeți un șablon ca “Global Expansion Map” sau “US Data Visualization”

Din panoul generator

1. Deschide panoul Generator
2. Selectează Map ca tip de fundal
3. Alegeți o hartă (World, USA, Europa etc.)
4. Configurează proiecția și stilul

Tipuri de hărți

Proiectări

Alegeţi proiecţia potrivită pentru vizualizare:

Pământ natural (Default)

Cel mai bun pentru hărţile lumii. Distorsiune echilibrată, pare naturală.

[Proiecţie naturală a Pământului] (…/images/map-world-natural-earth.png)

Mercator

Păstrează unghiurile, aspectul familiar. Bun pentru hărți de navigare stil.

Ortografie (Globe)

Arată Pământul ca o sferă 3D. Grozav pentru punctele de vedere concentrate din regiune.

[Ortografic Globe] (…/images/map-orthographic-globe.png)

Albers USA

Proiecţie specială pentru hărţile americane care includ Alaska şi Hawaii repoziţionate.

[USA Albers] (…/images/map-usa-albers.png)

Alte proiecții

• Robinson
• Winkel Tripel
• Suprafaţa Egală Conică

Sublinierea regiunilor

Țara/statul unic

Faceți clic pe orice regiune pentru a o selecta , apoi utilizați panoul Proprietăți pentru a schimba culoarea.

Regiuni multiple

Utilizați API sau șabloane pentru a evidenția mai multe regiuni:

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

Dezvăluiri animate

Șabloanele pot anima regiunea scoate în evidență cu o sincronizare greoaie pentru efectele povestirii.

Formate de identificare a regiunii

Diferite hărți folosesc diferite formate de identificare:

Vizualizarea datelor (Choropoleth)

Regiunile de culoare bazate pe valorile datelor:

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

Scala culorilor

Marcaje

Se adaugă markeri la coordonate specifice:

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

Configurări de calitate

Important: Utilizați calitatea professional pentru țările cu forme complexe (Rusia, Franța, SUA) pentru a se asigura că toate părțile teritoriului red corect.

Ţări multipoligone

Unele țări constau în mai multe părți deconectate:

• Rusia bază + Kaliningrad + insule
• Franţa
• USA
• Indonesia
• Fiji

Sistemul Harta foloseste automat Paper.js CompoundPath pentru aceste tari cand calitatea este setata la professional.

Interactivitate

Efectele Hover

Activează evidențierea hover:

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

Click Evenimente

Răspundeţi la clicuri din regiune:

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

Modele hartă

Harta extinderii globale

Arată expansiunea întreprinderilor pe regiuni cu evidențiere de fază animată.

Vizualizarea datelor din SUA

Afișează date în statele americane cu colorat coropleth.

Import hartă personalizată

Pentru hărți regionale detaliate care nu sunt incluse, utilizați importCustomMap():

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

Surse de date:

• Earth Natural
• GADM
• Mapshaper

Sfaturi

1. Folosiţi WorldHighRes pentru exporturile profesionale cu ţări multi-poligon
2. Proiecţia naturală a Pământului funcţionează cel mai bine pentru majoritatea hărţilor lumii
3. Albers USA este special conceput pentru hărțile SUA
4. Orthographic crează vederi dramatice ale globului pentru prezentări
5. Calitatea profesională previne corupția în țările complexe

Scurtături tastatură

Hartă Regiune Animație

Animează regiunile cu hartă cu modificări de culoare integrate în timp. Perfect pentru a arăta modificări de date în timp, secvențe de expansiune globală, sau crearea de vizualizări de date angajarea.

Animație de regiune de bază

Animează regiuni specifice cu tranziții de culoare bazate pe taste-cadru:

// 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
    ]
  }
});

Wave Animation

Creați un val de culoare în toate regiunile bazate pe poziția geografică:

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

Integrare temporală

Regiunile animate se integrează cu UI Cronologie:

• Regiunile animate apar în panoul Cronologie
• Scrub prin timp pentru a previzualizarea modificări de culoare
• Play/pause animations with the timeline controls
• Export animații în video sau GIF

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

Oprirea animațiilor

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

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

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

Obţinerea regiunilor animate

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

Exportă și importă CSV

Datele din regiunea de export și import, inclusiv culorile, evidențierea stării și starea de selecție pentru vizualizarea bazată pe date.

Date privind regiunea exportatoare

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

Format 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

Date privind regiunea de import

Importă date CSV pentru a actualiza starea regiunii:

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

Selecţie programmatică

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

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

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

Fluxul de lucru: Editarea hărții foii de calcul

1. Încărcaţi o hartă şi evidenţiaţi unele regiuni
2. Exportă în CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Editare în foi Excel/Google (schimbare culori, set evidențiat=1)
4. Importă înapoi: app.importMapRegionDataCSV(updatedCsv)

Acest flux de lucru este ideal pentru:

• Utilizatori netehnici care editează datele hărții
• Actualizări vrac pentru multe regiuni
• Integrarea conductelor de date
• Configurații de hărți controlate prin versiune

Exportă și importă GeoJSON

Exportați hărți ca GeoJSON pentru editarea în instrumente externe, cum ar fi QGIS sau Mapshaper, apoi re-importa cu modificările.

Exportă harta modificată

Exportă harta cu culori și stiluri curente:

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

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

Exportă sursa originală

Descărcați exact GeoJSON care a fost folosit pentru a încărca harta (limite nemodificate):

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

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

Importă hărți personalizate

Importați datele dvs. editate GeoJSON sau ale hărții externe:

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

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

Flux complet de lucru: Editare → Reimport → Anime

1. Load and export the original map:

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

2. Limitele Edit în instrumente externe:

   • QGIS - editor GIS complet
   • Mapshaper - Simplificare și editare online
   • geojson.io - Editor online rapid

3. Re-import harta editată:

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

4. Animează harta ta personalizată:

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

Hartă Informații sursă

Obţineţi informaţii despre harta încărcată:

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

Resurse externe

Hartă Surse de date

Unelte de conversie și editare

Fluxul de lucru de conversie format

Name

1. [Mapshaper.org] (https://mapshaper.org)
2. Glisați și fixați fișierul .shp (împreună cu fișierele .dbf și .prj)
3. Faceți clic pe Simplify pentru a reduce dimensiunea fișierului (utilizați 10-20% pentru web)
4. Click Export → alege GeoJSON
5. Importă în PinePaper cu app.importCustomMap()

TopoJSON → GeoJSON:

Fișierele TopoJSON sunt convertite automat atunci când sunt importate în PinePaper.

Sfaturi de dimensiune a fișierului

Referință API

Pentru controlul hărții programatice, a se vedea documentația Map System API.