映射系統

用互動性地圖、舞蹈數據顏色和動畫顯示.

[世界地圖自然地 (…/images/map-world-natural-earth.png)

概述

地圖系統提供:

• 世界與地區地圖 – 来自 CDN (世界、美國、歐洲等)的預載地圖
• 多重预测-Mercator、天然地球、地貌(地表)、Albers等
• ** 州、州、省
• 數據可視化 — 彩色比例圖
• Markers & Labels - 添加興趣點
• 专业素质 ——對複雜國家的多項支持

載入地圖中

從樣本中

最容易啟動的方法是使用地圖樣本:

1. 開啟底板 模版 面板
2. 尋找 Maps 類別
3. 選擇像「 全球擴張地圖」 或「 US Data visionization 」 樣本

從產生器面板

1. 開啟Generator 面板
2. 選擇 映射 為背景型態
3. 選擇地圖( 世界、 美國、 歐洲等 )
4. 配置投影和造型

地圖類型

预测

選擇您可視化的正確投影 :

天然地球( 破產 )

最好的世界地圖。 平衡扭曲 看起來很自然.

[天然地球投射] (…/images/map-world-natural-earth.png)

梅卡托

保守角度 熟悉的表情 適合航海型地圖.

(…/images/map-mercator-projection.png)

整形 (Globe)

顯示地球為三维球體 。 專注區域檢視效果很好.

[正字形環球] (…/images/map-orthographic-globe.png)

美國

包括阿拉斯加和夏威夷的地圖.

[美國艾伯斯] (…/images/map-usa-albers.png)

其他预测

• 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格式 :

資料可視化 (Choropleth)

基于數據值的顏色區域 :

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

質量設定

重要: 對於形狀複雜的國家(俄羅斯、法國、美國).

多彈藥國家

有些國家由多個互不相通的部分组成:

• 俄羅斯-內地+加里宁格勒+群島
• 法國-內地+科西嘉+海外领地
• USA — 內地+阿拉斯加+夏威夷(世界地圖)
• 印度尼西亚 - 千島
• 斐济-多島

地圖系統自動為這些國家使用 Paper.js ComplatePath, 當質量設定為 professional .

交互

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

映射樣本

全球擴展地圖

展現跨區域的企業發展.

美國數據可視化

顯示全美國各州的數據.

自訂地圖匯入

未包含的區域地圖, 使用importCustomMap():

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

資料來源 :

• 自然地球——公有域地圖資料
• GADM——行政界限明细
• [映射] (https://mapshaper.org) — 簡化 GeoJSON 檔案

提示

1. 利用世界高Res 与多波林根國家的專業出口
2. • 自然地球投影** 效果最好
3. Albers USA 是為美國地圖設計的
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

! [有地圖動畫的時間線] (…/images/timeline-with-keyframes.png)

停止動畫

// 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 或 Mapsshaper 等外部工具中編輯, 然后隨您的修改而重新匯入 .

匯出已修改的地圖

匯出目前顏色和樣式的地圖 :

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

全工作流: 編輯 / 重新匯入 / 動畫

1. 失蹤和匯出 原始地圖 :

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

2. 外部工具中的邊界 :

   • [QGIS] (https://qgis.org) - 全功能GIS編輯器
   • [映射] (https://mapshaper.org) - 在线简化與編輯
   • [geojson.io] (https://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
// }

外部資源

地圖資料來源

轉換編輯工具( E)

格式轉換工作流程

元件 ~ GeoJSON( 使用映射器) :

1. 跳到 [maphshaper.org] (https://mapshaper.org)
2. 拖放您的 .shp 檔案( 和 .dbf 和 .prj 檔案一起 )
3. 點擊 簡化 以縮小檔案大小( 網頁使用 10- 20% )
4. 點選 出口 選擇 ** PPG0 * * @ info
5. 以 app.importCustomMap() 匯入 PinePaper

TopoJSON → GeoJSON :

TopoJSON 檔案在匯入 PinePaper 時會自動轉換.

文件大小提示

API 參考

程序映射控制,参见[映射系統 API 文件] (/api/features/maps).