ระบบแผนที่

สร้างภาพทางภูมิศาสตร์ที่สวยงาม ด้วยแผนที่โต้ตอบ, สีของข้อมูลแบบชโลปล และการ์ตูนก็เผยให้เห็น.

[แผนที่ธรรมชาติโลก] [0]

ภาพรวม

ระบบแผนที่ที่ให้:

• ~ แผนที่โลกและภูมิภาค ~ — แผนที่ที่ถูกโหลดล่วงหน้าจาก CDN (โลก, USA, ยุโรป เป็นต้น)
• ~โปรเจ็กต์ที่หลากหลาย~ — เม อร์เค เตอร์, โลกธรรมชาติ, ภูมิศาสตร์ (globe), แอลเบอร์, และอื่น ๆ
• ~ การทําตัวเน้นของกลุ่มเคลื่อนไหว~ — ประเทศ, รัฐ, หรือจังหวัดต่าง ๆ
• ~การมองเห็นภาพ~ — แผนที่ชโลเลตที่มีเกล็ดสี~
• ~จดหมายและป้าย* — เพิ่มจุดที่น่าสนใจ ~
• ~คุณภาพเชิงปฏิบัติ ~ — การรองรับประเทศที่ซับซ้อนหลายประเทศ~

กําลังโหลดแผนที่

จากต้นแบบ

วิธีที่ง่ายที่สุดที่จะเริ่ม คือการใช้แม่แบบ

1. เปิดแผง ~
2. ค้นหารายการ ~maps ~ หมวดหมู่
3. เลือกแม่แบบเช่น “แผนที่การขยายโลก” หรือ “ข้อมูลข้อมูล”

จากแผงพาเนล

1. เปิดแผง #
2. เลือก~Map~ เป็นประเภทเบื้องหลัง
3. เลือกแผนที่ (โลก ยูเอสเอ ยุโรป ฯลฯ)
4. ปรับแต่งการวาดภาพและเสียงแหลม

ชนิดของแผนที่

โครงการ

เลือกโปรเจคชันที่ถูกต้องสําหรับภาพของคุณ:

โลกธรรมชาติ (ค่าปริยาย)

ดีที่สุดสําหรับแผนที่โลก การบิดเบือนสมดุล ดูเป็นธรรมชาติ.

[Natural Earth Projection] (0)

เม อร์เค เตอร์

รักษามุม, รูปลักษณ์ที่คุ้นเคย ดีสําหรับแผนที่แบบนําทาง.

[Mrcerator Projection] [0]

พ.ศ

แสดงโลกเป็นทรงกลมสามมิติ เยี่ยมสําหรับมุมมองส่วนอื่น.

[Orthraphic Global] [0]

อัลเบอร์ส USA

โปรเจคชันพิเศษสําหรับแผนที่สหรัฐ รวมทั้งอลาสก้าและฮาวาย.

[SUSA Albers] (0)

โครงการอื่น ๆ

• ~Robinson ~ — การคาดการณ์การประนีประนอมที่ดีสําหรับแผนที่โลก~
• ~วินเคิล ทริปเกิล~ — ภาพโลกที่บิดเบือนต่ํา
• ~พื้นที่เท่าเทียมกัน’ — เหมาะกับเขตละตินกลาง

ขอบเขตการทําตัวเน้น

ประเทศเดียว/ สตาต

คลิกพื้นที่ใด ๆ เพื่อเลือก ใช้แผงคุณสมบัติเพื่อเปลี่ยนสี.

หลายขอบเขต

ใช้ API หรือแม่แบบ เพื่อเน้นพื้นที่ต่าง ๆ:

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

เปิดเผยแบบเคลื่อนไหว

แม่ แบบ อาจ เน้น ถึง จุด เด่น ที่ เห็น ได้ ชัด ด้วย การ เลื่อน เวลา สําหรับ ผล กระทบ ที่ ชวน ให้ สนใจ.

[พื้นที่สูง] [0]

รูปแบบหมายเลขประจําตัวเขต

แผนที่ต่าง ๆ ใช้รูปแบบหมายเลขต่าง ๆ:

การถ่ายภาพข้อมูล (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
});

ตั้งค่าคุณภาพ

~! ~ ใช้ คุณภาพ ของ ประเทศ ต่าง ๆ ที่ มี รูป ทรง ซับ ซ้อน (รัสเซีย, ฝรั่งเศส, สหรัฐ) เพื่อ ทํา ให้ แน่ ใจ ว่า ส่วน ต่าง ๆ ใน เขต ทํา งาน แปล ถูก ต้อง.

หลายประเทศต่าง ๆ

บาง ประเทศ ประกอบ ด้วย ส่วน ต่าง ๆ หลาย ส่วน ที่ ขาด การ ติด ต่อ กัน:

• ~รัสเซีย~ — แขวงหลัก + เกาะคาลินิงกราด +
• ~ฝน~ — ดินแดนหลัก + คอซิกา + เขตต่างประเทศ
• ~อินโดเชีย~ — หลายพันเกาะ
• ~Fiji~ -หลายเกาะ

ระบบแผนที่ใช้ Paper.js Profile Path สําหรับประเทศเหล่านี้โดยอัตโนมัติ เมื่อกําหนดคุณภาพเป็น ○ 0.

ความเปรียบต่าง

ลูกเล่นการข้าม

เปิดใช้การเน้นการชี้เมาส์:

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

ต้นแบบแผนที่

แผนที่การขยายภาพทั่วไป

แสดงการขยายตัวของธุรกิจในภูมิภาค ด้วยการเน้นระยะที่เคลื่อนไหว.

การถ่ายภาพข้อมูล US

แสดงข้อมูลทั่วอเมริกา โดยใช้สีโชโรพัลท์.

นําเข้าแผนที่เอง

สําหรับแผนที่ภูมิภาคที่ละเอียดไม่รวมให้ใช้ ○ 0 ด้วย:

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

แหล่งข้อมูล:

• [Natural Earth] [0] — ข้อมูลโดเมนสาธารณะ พ.ศ
• [GADM] [0] — ขอบเขตการบริหารที่ละเอียด
• [mapshaper] [0] — เรียบเรียงแฟ้ม GeoJSON

ข้อ แนะ

1. ~โลกกําลังรุ่ง~ สําหรับการส่งออกแบบมืออาชีพ พร้อมกับประเทศต่าง ๆ
2. ~โครงการสํารวจโลก~ ทํางานกับแผนที่โลกส่วนใหญ่
3. ~ ไทยยูเอสยู~ ถูกออกแบบมาโดยเฉพาะสําหรับแผนที่สหรัฐ
4. ~Orthiographic ~ สร้างมุมมองโลกเพื่อนําเสนอ
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

[Timeline กับ Map Aprils] [0]

หยุดการเคลื่อนไหว

// 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: X)
3. แก้ไขในแผ่นเอกเซล/ โกเกิล (เปลี่ยนสี, ตั้งเน้น)
4. นําเข้ากลับ: ○ 0

ผล งาน นี้ เหมาะ ที่ สุด สําหรับ:

• ผู้ใช้ที่ไม่ใช่เทคโนโลยีแก้ไขข้อมูลแผนที่
• การ ปรับ ตั้ง ตะกร้า
• การเติมข้อมูล
• ปรับแต่งแผนที่ที่ควบคุมได้

ส่งออกเป็น GeoJSON

ส่งออกแผนที่เป็น GeoJSON สําหรับแก้ไขในเครื่องมือภายนอกเช่น QGIS หรือ Mathaper แล้วทําการแก้ไขใหม่.

ส่งออกแผนที่แก้ไขใหม่

ส่งออกแผนที่โดยใช้สีและรูปแบบปัจจุบัน:

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

1. แผนที่เดิม:

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

2. ** ขอบเขตที่แก้ไขได้ * ในเครื่องมือภายนอก:

   • [QGISS] [0] - ตัวแก้ไข GIS แบบเต็มที่
   • [mapshasher] [0] - ออนไลน์ปรับและแก้ไข
   • [Jojson.io] [0] - บรรณาธิการออนไลน์ด่วน

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

ทรัพยากรภายนอก

แหล่งข้อมูลของแผนที่

การแปลงและแก้ไขเครื่องมือ

รูปแบบการทํางานที่แทนที่

แฟ้มรูปร่าง ○ GeoJSON (ใช้ Mapashaper):

1. ไปที่ [mapshasher.org] (0)
2. ลากและวางแฟ้ม (Allong with .dbfและ .prjfiles)
3. คลิ้ก~ เพื่อลดขนาดแฟ้มลง (ใช้ 10-20% สําหรับเว็บ)
4. คลิ้ก~. ept~ ~ ~ เลือก ~GeoJSON~
5. นําเข้าข้อมูลเข้าไว้ใน PinePaper ด้วย X( 0)

TopoJSON สืบค้นเมื่อ GeoJSON:

แฟ้ม TopoJSON จะถูกแปลงโดยอัตโนมัติเมื่อนําเข้ามายัง PinePaper.

คําแนะนําขนาดแฟ้ม

อ้างอิง API

สําหรับการควบคุมแผนที่โปรแกรม ดูบันทึก Map System API.