지도 시스템

대화형 지도, choropleth data coloring, 애니메이션으로 멋진 지리적 시각화를 만듭니다.

제품정보

지도 시스템 제공:

• 세계 및 지역지도 - CDN (세계, 미국, 유럽 등)의 사전 로드 맵
• Multiple Projections — Mercator, Natural Earth, Orthographic (globe), Albers 등
• Region Highlighting - 하이라이트 국가, 국가, 또는 지방
• Data Visualization — 컬러 스케일과 Choropleth 맵
• Markers & Labels - 관심 포인트 추가
• Professional Quality - 복잡한 국가를 위한 다각형 지원

오시는 길

템플릿에서

시작하는 가장 쉬운 방법은 맵 템플릿을 사용합니다

1. Templates 패널 열기
2. Maps 범주 찾기
3. “Global Expansion Map” 또는 "US Data Visualization"과 같은 템플릿을 선택하십시오

Generator 패널에서

1. Generator 패널 열기
2. 선택 Map 배경 유형으로
3. 지도를 선택하십시오 (세계, 미국, 유럽, 등)
4. 계획 및 스타일링 구성

지도 유형

회사연혁

당신의 시각화를 위한 올바른 투상 선택:

Natural Earth (기본값)

세계지도에 가장 적합합니다. 균형 찡그림은, 자연 봅니다.

회사 소개

보존 각도, 익숙한 모습. 내비게이션 맵에 좋은.

정적 그래픽 (Globe)

3D 영역으로 지구를 표시합니다. 큰 초점 지역 전망.

Albers 미국

알래스카와 하와이 재조합을 포함하는 미국지도에 대한 특별 기획.

다른 계획

• Robinson — 세계지도를 위한 컴프레서 투영, 좋은
• Winkel Tripel - 낮은 왜곡 세계 투사
• Conic Equal Area - 중도 지역의 좋은

높은 조명 지역

단일 국가 / 단계

어떤 지역을 선택하려면 다음 속성 패널을 사용하여 색상을 변경합니다.

다수 지역

여러 지역을 강조하기 위해 API 또는 템플릿을 사용합니다

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

애니메이션 Reveals

템플릿은 스토리텔링 효과에 대한 비틀림 타이밍과 함께 흥미로운 지역을 강조 할 수 있습니다.

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

품질 설정

중요 : 복잡한 모양 (러시아, 프랑스, 미국)를 가진 국가를 위한 professional 질을 사용하여 모든 영토 부속은 정확하게 만듭니다.

다각형 국가

몇몇 국가는 다수 분리된 부속으로 이루어져 있습니다:

• 러시아 - 본토 + Kaliningrad + 섬
• 프랑스 - 본토 + 코르시카 + 해외 영토
• USA - 본토 + 알래스카 + 하와이 (세계지도에서)
• 인도네시아 - 섬의 수천
• 피지 - 여러 섬

Map System은 품질이 professional로 설정될 때 이러한 국가에 Paper.js CompoundPath를 자동으로 사용합니다.

관련 링크

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

지도 템플릿

글로벌 확장 맵

지역 전역의 비즈니스 확장을 보여 애니메이션 단계 기반 강조.

미국 데이터 시각화

Choropleth 착색을 가진 미국 국가의 맞은편에 자료를 표시합니다.

주문 지도 Import

자세한 지역 맵은 포함되지 않습니다, 사용 importCustomMap():

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

자료 근원:

• Natural Earth - 도메인 맵 데이터
• GADM - 상세 관리 경계
• Mapshaper - GeoJSON 파일을 단순화

제품 정보

1. Multi-polygon 국가를 가진 직업적인 수출을 위한 worldHighRes를 사용하십시오
2. Natural Earth projection는 세계 최대의 지도에서 가장 잘 작동합니다
3. Albers USA는 미국 지도를 위해 특별히 설계되었습니다
4. Orthographic는 발표를 위한 극적인 지구 전망을 창조합니다
5. Professional 품질 복잡한 국가에서 모양 corruption 방지

키보드 단축키

지도 지역 Animation

타임 라인 통합 색상 변경이있는 animate지도 지구. 시간, 글로벌 확장 시퀀스를 통해 데이터 변경에 대한 완벽한, 또는 매력적인 데이터 시각화를 만드는.

기본 지역 Animation

키프레임 기반의 색상 전환을 가진 특정 영역:

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

Wave 애니메이션

지리적 위치에 따라 모든 지역에서 색상의 파 만들기:

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

Timeline 통합

애니메이션 지구는 타임 라인 UI와 통합:

• 애니메이션 지구는 타임 라인 패널에서 나타납니다
• 색상 변경을 미리 보기 위해 시간을 통해 Scrub
• 타임라인 컨트롤과 Play/pause 애니메이션
• 영상 또는 GIF에 수출 생기

애니메이션

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

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

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

Animated Regions 받기

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

CSV 수출 & 수입품

색상, 강조 상태, 선택 상태, 데이터 중심 시각화를 포함한 수출 및 수입 지역 데이터.

수출 지역 Data

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

수입 지역 Data

지역 상태를 업데이트하려면 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
});

Programmatic 선택

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

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

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

Workflow: 스프레드시트 기반 지도 편집

1. 지도를로드하고 일부 지역을 강조
2. CSV에 수출: app.downloadMapRegionDataCSV('regions.csv')
3. Excel / Google 시트에서 편집 (색깔 변경, 강조 표시 1)
4. 수입품 뒤: app.importMapRegionDataCSV(updatedCsv)

이 작업 흐름은 다음과 같습니다:

• Non-technical user 파일 편집
• 많은 지역에 대량 업데이트
• Data 파이프라인 통합
• 버전 제어 맵 구성

GeoJSON 수출 & 수입품

QGIS 또는 Mapshaper와 같은 외부 도구에서 편집을위한 GeoJSON로지도를 내보내면 수정 사항이 다시 전달됩니다.

수출 변경된 지도

현재 색깔과 작풍을 가진 지도를 수출하십시오:

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

풀 워크플로우: 편집 → Re-import → Animate

1. 로드 및 수출 원본지도 :

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

2. Edit 경계 외부 도구:

   • QGIS - 전체 기능 GIS 편집기
   • Mapshaper - 온라인 단순화 및 편집
   • geojson.io - 빠른 온라인 편집기

3. Re-import 편집 된지도 :

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

외부 리소스

Map 데이터 소스

변환 및 편집 도구

형식 변환 Workflow

Shapefile → GeoJSON (지도 쉐퍼 사용):

1. [mapshaper.org] (https://mapshaper.org)로 이동
2. 드래그 앤 드롭 .shp 파일 (.dbf 및 .prj 파일 포함)
3. 클릭 파일 크기를 줄이기 위해 (웹에 대한 10-20% 사용)
4. 수출 → GeoJSON
5. app.importCustomMap()로 PinePaper로 가져 오기

TopoJSON → GeoJSON:

TopoJSON 파일은 자동으로 PinePaper로 가져올 때 변환됩니다.

파일 크기 팁

API 참조

Programmatic 지도 통제를 위해, [Map System API Documentation] (/api/features/maps)를 보십시오.