Hệ thống sơ đồ

Tạo ra những hình ảnh địa lý tuyệt vời với bản đồ tương tác, màu sắc dữ liệu, và hoạt hình tiết lộ.

[Thế giới bản đồ trái đất tự nhiên]

Toàn cảnh

Hệ thống sơ đồ cung cấp:

• Thế giới & Vùng Bản đồ — Bản đồ nạp sẵn từ CDN (thế giới, Mỹ, Châu Âu, vv.)
• Multiple Projections — Mercator, Natural Earth, Orthographic (lobe), Albers và nhiều hơn nữa
• Cách tô sáng sự thờ phượng — Các quốc gia, tiểu bang, hay tỉnh
• dữ liệu hình ảnh hoá — Bản đồ Chopleth với tỷ lệ màu
• Nhãn và Nhãn — Thêm điểm quan tâm
• Chất lượng chuyên nghiệp - hỗ trợ đa nguyên tử cho các quốc gia phức tạp

Đang nạp sơ đồ

Từ mẫu

Cách dễ nhất để bắt đầu là sử dụng một mẫu bản đồ:

1. Mở bảng điều khiển Tremlates
2. Tìm loại Maps
3. Chọn một mẫu như “Bản đồ mở rộng global” hay “S Data hiển thị hóa”

Từ bảng tạo

1. Mở bảng điều khiển Gerator
2. Chọn Map dạng nền
3. Chọn một bản đồ (thế giới, Mỹ, Châu Âu, v.v…)
4. Cấu hình cách chiếu và nét dẫn

Kiểu sơ đồ

Đối tượng

Chọn hình ảnh thích hợp cho minh họa:

Trái đất tự nhiên (Mặc định)

Tốt nhất cho bản đồ thế giới. Sự méo mó cân bằng, trông tự nhiên.

Kế hoạch Trái Đất

Mercator

Giữ góc nhìn, nhìn quen. Tốt cho bản đồ định vị.

Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương

Chiếu ảnh (Globe)

Cho thấy trái đất là một hình cầu 3D. Tuyệt vời cho tầm nhìn khu vực tập trung.

[Tiếng địa cầu]

Abers USA

Dự đoán đặc biệt cho bản đồ Mỹ bao gồm Alaska và Hawaii được định vị lại.

[Tiếng nhạc]

Những dự án khác

• Robinson — Hình chiếu thỏa hiệp, tốt cho bản đồ thế giới
• Winkel Tripel — Thế giới bị biến dạng thấp
• Conin Equale - Tốt cho các vùng trung bình

Vùng tô sáng

Một

Nhấn vào bất kỳ vùng nào để chọn nó thì dùng bảng màu để thay đổi màu.

Nhiều vùng

Dùng mẫu API để tô sáng nhiều vùng:

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

Các tiết lộ hoạt cảnh

Biểu mẫu có thể kích hoạt vùng tô sáng với thời gian bị dao động cho hiệu ứng kể chuyện.

[Những khu vực được chiếu sáng]

Dạng thức nhận diện vùng

Bản đồ khác nhau sử dụng định dạng ID khác nhau:

Hình ảnh hoá dữ liệu (Trung tâm)

Vùng màu dựa trên giá trị dữ liệu:

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

Tỷ lệ màu

Dấu hiệu

Thêm đánh dấu điểm tại tọa độ cụ thể:

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

Thiết lập chất lượng

Important: Sử dụng chất lượng thấu thấu đáo cho các quốc gia có hình dạng phức tạp (Russia, Pháp, Hoa Kỳ) để đảm bảo tất cả các vùng lãnh thổ đều hoạt động đúng.

Các nước đa giác

Một số quốc gia bao gồm nhiều phần đã ngắt kết nối:

• Russia — Mainland + Kaningrad + quần đảo
• France — Mainland + Corsica + lãnh thổ nước ngoài
• USA — Mainland + Alaska + Hawaii (trong bản đồ thế giới)
• Indonesia — Hàng ngàn hòn đảo
• Fiji — Nhiều đảo

Hệ thống bản đồ tự động sử dụng Paper.js path cho các quốc gia này khi chất lượng được thiết lập để hy0.

Độ tương tác

Hiệu ứng lưu

Bật tô sáng trên không:

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

Comment

Đáp ứng cú nhấn vùng:

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

Mẫu

Sơ đồ mở rộng toàn cục

Cho thấy sự mở rộng doanh nghiệp khắp các vùng với sự nổi bật theo giai đoạn hoạt hình.

Hiển thị dữ liệu Mỹ

Hiển thị dữ liệu trên khắp các bang Mỹ với màu sắc choropleth.

Nhập sơ đồ tự chọn

Để biết thêm chi tiết bản đồ khu vực không bao gồm, sử dụng importCustomMap()vẻ:

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

Nguồn dữ liệu:

• [Địa lý trái đất] ( thiện chí) — Dữ liệu bản đồ miền công cộng
• [GADM]
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương

Mẹo

1. Dùng cao điểm thế giới cho xuất khẩu chuyên nghiệp với các quốc gia đa nguyên
2. Sự phản chiếu trái đất kinh tế hoạt động tốt nhất cho hầu hết các bản đồ thế giới
3. Albers USA được thiết kế đặc biệt cho bản đồ Mỹ
4. Orthographic tạo quan điểm toàn cầu kịch tính cho trình bày
5. Chất lượng chuyên nghiệp ngăn chặn nạn tham nhũng ở các nước phức tạp

Phím tắt

Hoạt cảnh vùng Ánh xạ

Hoạt cảnh vùng bản đồ với thay đổi màu tích hợp của dòng thời gian. Hoàn hảo cho việc hiển thị các thay đổi dữ liệu theo thời gian, các chuỗi mở rộng toàn cầu, hoặc tạo ra hình ảnh hóa dữ liệu hấp dẫn.

Hoạt hình miền cơ bản

Hoạt cảnh vùng cụ thể với chuyển đổi màu dựa trên khung phím:

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

Hoạt hình Sóng

Tạo một làn sóng màu trên tất cả các vùng dựa trên vị trí địa lý:

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

Hợp nhất dòng thời gian

Các vùng hoạt cảnh hợp nhất với UI thời gian:

• Name
• Hiệu ứng Quét Trang trình diễn
• Công cụ & trình lọc
• Xuất dạng hình ảnh ra phim ảnh hoặc GIF

Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương

Đang dừng hoạt ảnh

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

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

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

Name

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

Xuất & Nhập CSV

Xuất và nhập dữ liệu bao gồm màu sắc, trạng thái tô sáng và trạng thái chọn để hình dung dữ liệu.

Đang xuất dữ liệu vùng

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

Định dạng 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

Nhập dữ liệu vùng

Nhập dữ liệu CSV để cập nhật trạng thái:

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

Chọn chương trình

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

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

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

Dòng làm việc:

1. Tải bản đồ và tô sáng vài vùng
2. Xuất sang CSV: ♪ 0 vẻ đẹp
3. Sửa trong các tờ nâng cấp/Google ( màu thay đổi, được tô sáng bằng 1)
4. Nhập trở lại: ♪ 0 cơ hội

Dòng chảy công việc này lý tưởng cho:

• Người dùng không công nghệ sửa dữ liệu sơ đồ
• Gỡ bỏ nhiều vùng
• Sự kết hợp của ống dẫn dữ liệu
• Cấu hình sơ đồ điều khiển phiên bản

Xuất & Nhập GeoJSON

Xuất bản bản đồ GeoJSON để sửa đổi các công cụ bên ngoài như QGIS hoặc Mapshaper, sau đó chuyển đổi lại các sửa đổi của bạn.

Xuất bản đồ đã sửa đổi

Xuất bản đồ với màu và kiểu dáng hiện tại:

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

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

Xuất mã nguồn gốc

Tải chính xác bản đồ GeoJSON đã được dùng để tải:

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

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

Danh sách & nhập vào

Nhập dữ liệu sơ đồ GeoJSON đã soạn thảo của bạn hoặc bên ngoài:

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

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

Dòng làm việc đầy đủ: Chỉnh sửa ảnh động tái tạo

1. Load và xuất khẩu bản đồ gốc:

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

2. Edit ranh giới trong công cụ bên ngoài:

   • Biên tập viên GIS đầy đủ
   • • Trực tuyến đơn giản hóa và chỉnh sửa
   • Biên tập viên trực tuyến nhanh lên

3. Re- import bản đồ đã soạn thảo của bạn:

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

4. Animate Bản đồ riêng của bạn:

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

Thông tin nguồn Ánh xạ

Lấy thông tin về bản đồ đã tải hiện thời:

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

Tài nguyên bên ngoài

Nguồn dữ liệu sơ đồ

Công cụ hiệu chỉnh và chuyển đổi

Name

Stencils

1. Tới [mapshaper.org]
2. Kéo và thả tập tin thấu đáo của bạn (cùng với các tập tin stall1 và ♪2 ♪
3. Click Simplify để giảm cỡ tập tin (dùng 10- 20% cho web)
4. Click Export BAR chọn GeoJSON
5. Nhập khẩu vào PinePaper với ♪0 vẻ đẹp

TopoJSON GeoJSON:

Tập tin TopoJSON tự động được chuyển đổi khi được nhập vào PinePaper.

Mẹo cỡ tập tin

Tham khảo API

Để kiểm soát bản đồ chương trình, xem tài liệu [Map hệ thống API].