地图系统

创建惊人的地理可视化 具有交互式地图, 和弦数据色, 和动画显示.

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

概览

地图系统提供:

• 世界和区域地图——CDN(世界、美国、欧洲等)预装地图
• 多重预测——Mercator、自然地球、地貌学(地表)、阿尔伯斯等
• 强调区域——突出国家、州或省
• 数据可视化 — 带有色标的乔罗普勒斯地图
• Markers & Labels — 添加关注点
• 专业质量——为复杂国家提供多种支持

正在装入地图

从模板

最容易启动的方法是使用地图模板:

1. 打开 模板 面板
2. 查找 Maps 类别
3. 选择“ 全球扩展地图” 或“ 美国数据可视化” 等模板

从发电机小组

1. 打开 发电机 面板
2. 选择 映射 为背景类型
3. 选择地图( 世界、 美国、 欧洲等)
4. 配置投影和造型

映射类型

预测

选择您可视化的正确投影 :

天然地球( 过失)

最好的世界地图。 平衡扭曲,看起来自然.

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

马卡托

保护角度 熟悉的表情 适合导航风格的地图.

! [交易员投射] (…/images/map-mercator-projection.png)

整形 (Globe)

显示地球为3D球体. 对重点突出的区域观点很有帮助.

[正统地球] (…/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格式 :

数据可视化( CHOROPLTH)

基于数据值的颜色区域 :

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

质量设置

重要性: 对形状复杂的国家(俄罗斯、法国、美国)使用professional质量,以确保所有领土部分的正确转换.

多国

一些国家由多个互不连接的部分组成:

• 俄罗斯-内地+加里宁格勒岛+岛屿
• 法国——内地+科西嘉+海外领土
• 美国 — 内地+阿拉斯加+夏威夷(世界地图)
• 印度尼西亚 - 千岛群岛
• 斐济-多个岛屿

当质量被设定为professional时,地图系统会自动为这些国家使用Paper.js ComplatePath.

互动

缓冲效应

启用悬浮突出显示 :

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——详细的行政界线
• 映射——简化GeoJSON文件

提示

1. 与多波罗贡国家专业出口使用世界高频
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或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'
});

完整工作流程:编辑 → 再进口 → 动画

1. 记录和导出

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

2. 外部工具中的编辑边界:

   • QGIS - 全功能GIS编辑器
   • 映射 - 在线简化和编辑
   • [geojson.io] (https://geojson.io) - 快速在线编辑器

3. 重新输入 您经编辑的地图:

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

4. • Animate** 您的自定义地图:

   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( 使用 Mapshaper ) :

1. 转到 [maphshaper.org] (https://mapshaper.org)
2. 拖放您的 .shp 文件( 还有 .dbf 和 .prj 文件)
3. 点击 简化 以缩小文件大小(网络使用 10- 20%)
4. 点击 出口 选择 ** PPG0 * * *
5. 以 app.importCustomMap() 导入 PinePaper

TopoJSON → GeoJSON : 1

TopoJSON文件在导入PinePaper时会自动转换.

文件大小提示

API 参考

关于程序映射控制,参见地图系统API文档.