Σύστημα χαρτών

Δημιουργήστε εκπληκτικές γεωγραφικές οπτικοποιήσεις με διαδραστικούς χάρτες, χρωματισμό δεδομένων χοροπλέγματος και κινούμενα σχέδια.

Παγκόσμιος Χάρτης Φυσική Γη

Επισκόπηση

Το σύστημα χαρτών παρέχει:

• Παγκόσμιοι & Περιφερειακοί Χάρτες — Προφορτωμένοι χάρτες από το CDN (κόσμος, ΗΠΑ, Ευρώπη κ.λπ.)
• Πολλαπλές Προβολές — Mercator, Natural Earth, Orthographic (globe), Albers, και άλλα
• Περιοχή Τονισμός — Χώρες, κράτη ή επαρχίες
• Data Visualization — Χάρτες Choropleth με χρωματικές κλίμακες
• Markers & Labels — Προσθήκη σημείων ενδιαφέροντος
• Επαγγελματική ποιότητα — Υποστήριξη πολυπολυγώνων σε πολύπλοκες χώρες

Φόρτωση ενός χάρτη

Από πρότυπα

Ο ευκολότερος τρόπος για να ξεκινήσετε είναι να χρησιμοποιήσετε ένα πρότυπο χάρτη:

1. Ανοίξτε τον πίνακα Templates
2. Βρείτε την κατηγορία Maps
3. Επιλέξτε ένα πρότυπο όπως “Global Expansion Map” ή “US Data Visualization”

Από τον πίνακα γεννήτριας

1. Άνοιγμα του πίνακα Generator
2. Επιλέξτε Χάρτης ως τον τύπο φόντου
3. Επιλέξτε ένα χάρτη (Παγκόσμιος, ΗΠΑ, Ευρώπη, κλπ.)
4. Configure προβολής και styling

Τύποι χαρτών

Προβολές

Επιλέξτε τη σωστή προβολή για την οπτικοποίησή σας:

Φυσική Γη (Προκαθορισμένο)

Το καλύτερο για παγκόσμιους χάρτες. Ισορροπημένη παραμόρφωση, φαίνεται φυσικό.

(…/images/map-world-natural-earth.png)

Μερκάτορας

Διατηρεί γωνίες, οικεία εμφάνιση. Καλό για χάρτες πλοήγησης.

Προβολή Ελεγκτών

Ορθογραφικά (Globe)

Δείχνει τη Γη ως τρισδιάστατη σφαίρα. Μεγάλη για εστιασμένες απόψεις περιοχή.

Ορθογραφική Σφαίρα

Albers ΗΠΑ

Ειδική προβολή για χάρτες των ΗΠΑ που περιλαμβάνει την Αλάσκα και Χαβάη επανατοποθετείται.

ΗΠΑ Albers

Άλλες Προβολές

• Robinson — Συμβιβαστική προβολή, καλό για παγκόσμιους χάρτες
• Winkel Tripel — Χαμηλή προβολή κόσμου παραμόρφωσης
• Κονική ίση έκταση — Καλό για τις περιφέρειες μέσου πλάτους

Τονιστικές περιφέρειες

Ενιαία χώρα/Κράτος

Κάντε κλικ σε οποιαδήποτε περιοχή για να την επιλέξετε , στη συνέχεια, χρησιμοποιήστε τον πίνακα ιδιοτήτων για να αλλάξετε το χρώμα του.

Πολλαπλές περιφέρειες

Χρησιμοποιήστε το 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:

Οπτικοποίηση δεδομένων (Χορόπλεθ)

Περιοχές χρωμάτων με βάση τις τιμές δεδομένων:

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

Settings ποιότητας

Σημαντικό: Χρησιμοποιήστε την ποιότητα professional για χώρες με σύνθετα σχήματα (Russiaωσία, Γαλλία, ΗΠΑ) για να διασφαλίσετε ότι όλα τα τμήματα εδάφους θα γίνουν σωστά.

Πολυπολικές χώρες

Ορισμένες χώρες αποτελούνται από πολλαπλά αποσυνδεδεμένα μέρη:

• Russiaωσία — ηπειρωτική χώρα + Καλίνινγκραντ + νησιά
• Γαλλία — ηπειρωτική χώρα + Κορσική + υπερπόντια εδάφη
• USA — Ηπειρωτική + Αλάσκα + Χαβάη (σε παγκόσμιους χάρτες)
• Ινδονησία — Χιλιάδες νησιά
• Φίτζι — Πολλαπλά νησιά

Το σύστημα χαρτών χρησιμοποιεί αυτόματα Paper.js CompandPath για αυτές τις χώρες όταν η ποιότητα έχει οριστεί στο professional.

Διαδραστική δράση

Εφέ Hover

Ενεργοποίηση επισήμανσης 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.
});

Πρότυπα χάρτη

Παγκόσμιος χάρτης επέκτασης

Δείχνει επιχειρηματική επέκταση σε όλες τις περιοχές με κινούμενη φάση-based επισήμανση.

Οπτικοποίηση δεδομένων ΗΠΑ

Εμφανίζει δεδομένα σε όλες τις πολιτείες των ΗΠΑ με χρωματισμό χοροπλέθου.

Εισαγωγή προσαρμοσμένου χάρτη

Για λεπτομερείς περιφερειακούς χάρτες που δεν περιλαμβάνονται, χρησιμοποιήστε το 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'
});

Ολοκλήρωση χρονοδιαγράμματος

Οι κινούμενες περιφέρειες ενσωματώνονται με το UI:

• Οι κινούμενες περιοχές εμφανίζονται στον πίνακα χρονοδιαγραμμάτων
• Τρίψτε το χρόνο για να προεπισκόπηση αλλαγές χρωμάτων
• Αναπαραγωγή/παύση κινουμένων σχεδίων με τον έλεγχο του χρονοδιαγράμματος
• Εξαγωγή κινουμένων σχεδίων σε βίντεο ή GIF

! Χρονολόγιο με Animations Χάρτης

Σταμάτημα κινουμένων σχεδίων

// 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 (αλλαγή χρωμάτων, σύνολο τονίζεται=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'
});

Πλήρης ροή εργασίας: Επεξεργασία → Επανεισαγωγή → Animate

1. Φορτίο και εξαγωγή ο αρχικός χάρτης:

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

2. Επεξεργασία ορίων σε εξωτερικά εργαλεία:

   • QGIS - Ολοκληρωμένος επεξεργαστής GIS
   • Mapshaper - Ηλεκτρονική απλοποίηση και επεξεργασία
   • geojson.io - Γρήγορη σε απευθείας σύνδεση επεξεργαστής

3. Επανεισαγωγή επεξεργασμένο χάρτη σας:

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

4. Ζωντανός ο προσαρμοσμένος χάρτης σας:

   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 (χρησιμοποιώντας Mapshaper):

1. Μετάβαση στο mapshaper.org
2. Σύρετε και dropίξτε το αρχείο .shp σας (μαζί με τα αρχεία .dbf και .prj)
3. Κάντε κλικ Simplify για να μειώσετε το μέγεθος του αρχείου (χρησιμοποιήστε 10-20% για το web)
4. Κάντε κλικ Εξαγωγή → επιλέξτε GeoJSON
5. Εισαγωγή στο PinePaper με app.importCustomMap()

TopoJSON → GeoJSON:

Τα αρχεία TopoJSON μετατρέπονται αυτόματα όταν εισάγονται σε PinePaper.

Συμβουλές μεγέθους αρχείου

Αναφορά API

Για τον έλεγχο προγραμματικού χάρτη, βλέπε [Χάρτης Σύστημα API Documentation] (/api/features/maps).