Térképrendszer

Hozzon létre lenyűgöző földrajzi megjelenítések interaktív térképek, choropleth adat színezés, és animált felfedi.

Áttekintés

A térképrendszer a következőket tartalmazza:

• • • World & Regional Maps * * - előre betöltött térképek a CDN-ről (világ, USA, Európa, stb.)
• • • Multiple Projections * * - Mercator, Natural Earth, Ortographic (Global), Albers, and more
• • • Regionális kiemelés * * - Kiemelt országok, államok, vagy tartományok
• • • Data Visualization * * - Choropleth térképek színes skálákkal
• • • Markers & Labels * * - Érdeklődési pontok hozzáadása
• • • Professional Quality * * - Multi-poligon támogatás komplex országok számára

Térkép betöltése

Sablonokból

A legegyszerűbb módja a kezdésnek egy térkép sablon használata:

1. Nyissa meg a * * sablonok * * panelt
2. Keresse meg a * * Térképek * * kategóriát
3. Válasszon egy sablont, mint “Global Expansion Map” vagy “US Data Visualization”

Generátor panel

1. Nyissa meg a * * generátor * * panelt
2. Válassza ki a * * térképet * * háttértípusként
3. Válasszon egy térképet (világ, USA, Európa stb.)
4. A kivetítés és a stílus beállítása

Térképtípusok

Előrejelzések

Válassza ki a megfelelő vetítést a megjelenítéshez:

Természetes Föld (alapértelmezés)

A legjobb a világtérképeknek. Kiegyenlített torzulás, természetesnek tűnik.

Mercator

Tartózkodási szögek, ismerős megjelenés. Jó a navigációs-stílusú térképekhez.

Ortográfiai (Globe)

3D gömbként mutatja a Földet. Nagy a fókuszált régió nézetei.

Albers USA

Az amerikai térképek speciális kivetítése, beleértve Alaszkát és Hawaiit.

Egyéb előrejelzések

• • • Robinson * * - Kompromisszum kivetítés, jó a világtérképeknek
• • • Winkel Tripel * * - A világ alacsony torzulása
• • • Conic Equal Area * * - Jó a szélességi középosztálynak

A régiók kiemelése

Egyetlen ország / állam

Kattintson bármelyik régióra, ha ki szeretné választani, majd használja a Properties panel változtatni a színét.

Több régió

Használja a API vagy sablonok kiemelésére több régió:

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

Animációs megjelenések

A sablonok élesíthetik a régió csúcsait, a történetmesélési effektusok szakaszos időzítésével.

Régió ID Formats

A különböző térképek különböző azonosító formátumokat használnak:

Data Visualization (Choropleth)

Adatértékeken alapuló színrégiók:

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

Színskálák

Jelölőanyagok

Pontjelölők hozzáadása meghatározott koordinátákhoz:

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

Minőségi beállítások

• • Fontos: * * Az professional minőség használata komplex formával rendelkező országokban (Oroszország, Franciaország, USA) annak biztosítására, hogy a terület minden része helyesen végezze.

Többpólusú országok

Egyes országok több különálló részből állnak:

• • • Oroszország * * - Mainland + Kalinyingrád + szigetek
• • • Franciaország * * - Mainland + Korzika + tengerentúli területek
• • • USA * * - Mainland + Alaszka + Hawaii (világtérképen)
• • • Indonézia * * - több ezer sziget
• • • Fidzsi * * - Több sziget

A térképrendszer automatikusan használja a Paper.js CompoundPath-t ezekre az országokra, amikor a minőség professional-ra van állítva.

Interaktivitás

Hover hatások

A lebegőpontos kiemelés engedélyezése:

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

Kattintson az Eseményekre

Válasz a régióra kattintva:

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

Térkép

Globális bővítési térkép

Az üzleti terjeszkedést mutatja a régiók között animált fézeralapú kiemeléssel.

US Data Visualization

Adatokat jelenít meg az USA államaiban kórus színezéssel.

Egyedi térkép importálása

A részletes regionális térképek nem tartalmazza, használja az importCustomMap():

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

Adatforrások:

• [Natural Earth] (https://naturalearthdata.com) - Nyilvános domain térkép adatok
• [GADM] (https://gadm.org) - Részletes adminisztratív határok
• [Mapshaper] (https://mapshaper.org) - GeoJSON fájlok egyszerűsítése

Tippek

1. • • Használja a világ HighRes * * a professzionális export több-sokszög országok
2. • • Natural Earth Projection * * works best for the world maps
3. • • Albers USA * * kifejezetten amerikai térképekre tervezték
4. • • Ortographic * * létrehozza a drámai globális kilátást a prezentációkra
5. • • Szakmai minőség * * megakadályozza a korrupciót az összetett országokban

Billentyűzet billentyűparancsok

Térkép Régió Animáció

Animáció térkép régiók idő- integrált színváltozások. Tökéletes az adatok időbeli változásainak, a globális bővítési folyamatoknak vagy az adatok megjelenítésének megjelenítésére.

Alaprégió animáció

Animáció specifikus régiók kulcskereten alapuló színes átmenetek:

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

Hullámanimáció

Hozzon létre egy színhullám minden régióban alapuló földrajzi helyzet:

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

Idővonal-integráció

Az animált régiók integrálódnak a Timeline UI-val:

• Animációs régiók jelennek meg a Timeline panel
• Átmossa az időt, hogy előnézeti színváltozások
• Lejátszás / szünet animációk az idővonal vezérlők
• Animációk exportálása videóra vagy GIF

Animációk leállítása

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

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

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

Animációs régiók

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

CSV Export & Import

Exportálás és import régió adatok, beleértve a színek, kiemelés státusz, és kiválasztási állapot adatvezérelt vizualizations.

Területi adatok exportálása

// 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 formátum:

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

Régió-adatok importálása

CSV adatok importálása a régió államainak frissítése céljából:

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

A program kiválasztása

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

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

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

Munkafolyamat: SpreadSheep-alapú térkép szerkesztés

1. Térkép betöltése és néhány régió kiemelése
2. Exportálás CSV-re: app.downloadMapRegionDataCSV('regions.csv')
3. Szerkesztés Excel / Google Táblázatokban (színek megváltoztatása, kiemelve = 1)
4. Import vissza: app.importMapRegionDataCSV(updatedCsv)

Ez a munkafolyamat ideális:

• Nem-technikai felhasználók szerkesztése térkép adatok
• Tömeges frissítések sok régióban
• Adatvezeték-integráció
• Version- vezérelt térképkonfigurációk

GeoJSON Export & Import

Export térképek GeoJSON szerkesztő külső eszközök, mint a QGIS vagy Mapshaper, majd re- import a módosítások.

Módosított térkép exportálása

Exportálja a térképet a jelenlegi színek és stílusok:

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

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

Eredeti forrás exportálása

Töltse le a pontos GeoJSON, hogy használt betöltésére a térkép (változatlan határok):

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

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

Egyedi térképek importálása

A szerkesztett GeoJSON vagy külső térkép adatok importálása:

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

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

Teljes munkafolyamat: Szerkesztés → Újraimport → Animáció

1. • • Load and export * * az eredeti térkép:

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

2. • • Határok szerkesztése * * külső eszközökben:
   • [QGIS] (https://qgis.org) - Teljes értékű GIS szerkesztő
   • [Mapshaper] (https://mapshaper.org) - Online egyszerűsítés és szerkesztés
   • [geojson.io] (https://geojson.io) - Gyors online szerkesztő
3. • • Re- import * * a szerkesztett térkép:

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

4. • • Animate * * your egyedi térkép:

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

Térképforrás

Információ a jelenleg betöltött térképről:

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

Külső források

Térkép adatforrások

Konvertálás és szerkesztés

Formátum átalakító munkamenet

Shapefile → GeoJSON (a Mapshaper használatával):

1. Ugrás a [mapshaper.org] -ra (https://mapshaper.org)
2. Húzza le és dobja el az .shp fájlt (.dbf és .prj fájlokkal együtt)
3. Kattintson * * Egyszerűsítés * * a fájl méretének csökkentésére (használja 10- 20% a web)
4. Kattintson * * Export * * → válasszon * * GeoJSON * *
5. Import PinePaper app.importCustomMap()-val

TopoJSON → GeoJSON:

A TopoJSON fájlok automatikusan átalakulnak, ha importálnak PinePaper-re.

Fájl mérete tippek

API hivatkozás

A programozott térképvezérléshez lásd a [Térképrendszer API Dokumentáció] (/api/features/maps).