Sistem Peta Air

Keanekaragaman geografis yang menakjubkan dengan peta interaktif, pewarnaan data choropleth, dan penyingkapan animasi.

[World Peta Alam Bumi] (…/images/map-world-natural-earth.png)

Selayang Pandang

Parameter Sistem Peta menyediakan:

• ***Peta Daerah & Dunia — Peta pra-muat dari CDN (dunia, Amerika Serikat, Eropa, dll)
• **Proyeksi ganda — Mercator, Alam Bumi, Ortografi (globe), Albers, dan banyak lagi
• *** Versi* Yang Menonjolkan** — menonjolkan negara, negara bagian, atau provinsi
• *Data Visualisasi — Peta Choropleth dengan sisik warna
• *Markers & Label — Tambah poin kepentingan
• *Kualitas Profesi — Dukungan multipoligon untuk negara kompleks

Memuatkan Peta

Dari Templat

Cara termudah untuk memulai menggunakan templat peta:

1. Buka panelTemplat*
2. *Maps kategori
3. " atau US Data Visualisasi "

Dari Panel Generator

1. Buka panelGenerator**
2. PilihMap sebagai jenis latar belakang
3. Pilih peta (Dunia, USA, Eropa, dll)
4. Atur proyeksi dan gaya

Jenis Peta OFIN

Projeksi

Pilih proyeksi yang tepat untuk visualisasi Anda:

Bumi Alam Hikmah (Default)

Terbaik untuk peta dunia. Keseimbangan seimbang, terlihat alami.

Proyeksi Bumi Alam

Mercator

Melestarikan sudut, terlihat akrab. Bagus untuk peta gaya navigasi.

Pembesar Proyeksi

Ortografi (Globe)

Dia menunjukkan Bumi sebagai bola 3 dimensi. Luar biasa untuk fokus pandangan wilayah.

(…/images/map-orthographic-globe.png)

Albers USA

Proyeksi khusus untuk peta AS termasuk Alaska dan Hawaii.

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

Proyeksi Lainnya

• Robinson — Proyeksi kompromi, bagus untuk peta dunia
• Winkel Tripel — Proyeksi dunia distorsi rendah
• ***Kawasan Sesama Konis — Baik untuk kawasan pertengahan-titud

Daerah Sorotan

Negeri/Negeri Tunggal Perzinaan

Klik pada setiap wilayah untuk memilihnya Lalu gunakan panel properti untuk mengubah warnanya.

Wilayah Beraneka Wilayah

Guna API atau template untuk menonjolkan beberapa wilayah:

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

Pengungkapan Animasi

Templat Baru dapat menganalisis wilayah yang disorot dengan waktu yang mengejutkan untuk efek penceritaan.

Kawasan Tinggi

Format ID Wilayah

Peta map yang berbeda menggunakan format ID berbeda:

Visualisasi Data (Kelopak)

Wilayah warna berdasarkan nilai data:

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

Skala Warna

Markers

Tambahkan penanda titik pada koordinat tertentu:

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

Penataan Kualitas Kualiti

*Penting: Use professional kualitas untuk negara-negara dengan bentuk kompleks (Russia, Prancis, USA) untuk memastikan semua bagian teritorial dirender dengan benar.

Negara Multi-Poligon

Beberapa negara terdiri dari beberapa bagian yang terputus:

• *Russia — Daratan + Kaliningrad + pulau
• *France — Daratan + Corsica + wilayah luar negeri
• ***** — Daratan + Alaska + Hawaii (dalam peta dunia)
• *Indonesia — Kepulauan Seribu
• *Fiji — Kepulauan Berbilang

Secara otomatis Sistem Peta menggunakan Paper.js CompoundPath untuk negara-negara ini ketika kualitas ditetapkan ke professional.

Interaktivitas

Efek Melenyap

Hingarkan penyorotan melayang:

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

Peristiwa Klik

Tanggapan terhadap klik wilayah:

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

Map Templat

Peta Perluasan Global Ekspansi Ekspansi Ekspansi

Ekspansi bisnis menunjukkan pengembangan bisnis di seluruh wilayah dengan penyorotan berbasis fase animasi.

Visualisasi Data AS

Dia menampilkan data di seluruh negara bagian AS dengan pewarnaan choropleth.

Impor Peta Tersendiri

Untuk peta regional rinci tidak disertakan, gunakan importCustomMap():

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

Sumber data data:

• Bumi Alam — Data peta domain publik
• Bahasa Arab GADM — Terrinci batas administratif
• Mapshaper — Sederhanakan berkas GeoJSON

Tips

1. **Gunakan worldHighRes untuk ekspor profesional dengan negara multi-poligon
2. Proyeksi Bumi Alam****** yang terbaik untuk kebanyakan peta dunia
3. **Albers USA dirancang khusus untuk peta AS
4. **** Ortografi* menciptakan pandangan dunia yang dramatis untuk presentasi
5. *Kualitas profesional mencegah korupsi bentuk di negara kompleks

Pintasan Papan Kekunci

Animasi Map Region

Animasikan wilayah peta dengan perubahan warna yang terintegrasi garis waktu. Perfect untuk menunjukkan perubahan data dari waktu ke waktu, urutan ekspansi global, atau menciptakan visualisasi data yang terlibat.

Animasi Wilayah Dasar

Animasikan wilayah spesifik dengan transisi warna berbasis bingkai kunci:

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

Animasi Gelombang Gelombang Wave

Amunisi membuat gelombang warna di seluruh wilayah berdasarkan posisi geografis:

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

Integrasi Garis Waktu Miflin

Kawasan animasi yang terintegrasi dengan UI Garis Waktu:

• Kawasan animasi animasi muncul dalam panel Timeline
• Scrub sepanjang waktu untuk mepratonton perubahan warna
• Mainkan animasi tune/jeda dengan kontrol garis waktu
• Ekport animasi ke video atau GIF

[Garis waktu dengan Animasi Peta] (…/images/timeline-with-keyframes.png)

Animasi Pemberhentian Kejenuhan

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

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

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

Kawasan Animasi

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

Import & Eksport CSV

Ekspor dan impor data wilayah termasuk warna, status sorotan, dan keadaan seleksi untuk visualisasi yang didorong data.

Data Wilayah Pengeksporan Esporting

// 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

Data Wilayah Mengimport

Impor data CSV untuk update keadaan wilayah:

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

Pemilihan Programmatik

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

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

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

Aliran Kerja: Pengeditan Peta Berasaskan Hamparan

1. Ada beberapa daerah yang memuat peta dan sorot beberapa daerah
2. Ekspor ke CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Edit edit dalam Lembar Excel/Google (ubah warna, set sorot=1)
4. Impor kembali: app.importMapRegionDataCSV(updatedCsv)

Aliran kerja ini ideal untuk:

• Pengguna non-teknis edit data peta
• Fulk update ke banyak wilayah
• Integrasi jaringan pipa data
• Konfigurasi peta yang dikendalikan Version

Import & Eksport GeoJSON

Export peta sebagai GeoJSON untuk penyuntingan dalam alat eksternal seperti QGIS atau Mapshaper, kemudian re-import dengan modifikasi anda.

Ekspor Peta Terubahsuai

Export peta dengan warna dan gaya saat ini:

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

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

Ekspor Sumber Asal

KUNAKAN persis GeoJSON yang digunakan untuk memuat peta (batas yang tidak dimodifikasi):

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

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

Import Peta Suai

Import GeoJSON yang disunting atau data peta eksternal:

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

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

Aliran Kerja Penuh: Sunting → Re-import → Animasi

1. *Load dan ekspor peta asli:

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

2. *Sunting batas dalam alat eksternal:

   • QGIS - Penyunting GIS penuh-fitur
   • Mapshaper - Penyederhanaan dan penyuntingan daring
   • • Penyunting daring cepat

3. Re-import peta edit anda:

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

4. Animate Peta langganan anda:

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

Info Sumber Peta Air

Dapatkan informasi tentang peta yang dimuat saat ini:

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

Sumber Daya Eksternal LUAR

Sumber Data Peta Alfa

Alat Pengubahan & Pengeditan Pengubahan

Pengolahan Kerja Pengalihan Format Bahasa

Shapefile → GeoJSON (menggunakan Mapshaper):

1. Pergi ke mapshaper.org
2. Seret dan jatuhkan berkas .shp anda (diikuti dengan berkas .dbf dan .prj)
3. Klik Simplify untuk mengurangi ukuran berkas (gunakan 10-20% untuk web)
4. → pilih GeoJSON
5. Impor ke dalam PinePaper dengan app.importCustomMap()

→ GeoJSON:

Berkas-berkas TopoJSON anti-terkirim secara otomatis ketika diimpor ke dalam PinePaper.

Tips Ukuran Berkas XEF

Rujukan API

Untuk kontrol peta programmatik, lihat Peta Sistem Dokumentasi API.