javascript - วิธีตรวจสอบรูปร่างที่ซ้อนทับกันและแยกออกโดยใช้ leaflet และ createJS

ฉันกำลังพัฒนาฟีเจอร์สำหรับแอปพลิเคชันที่ใช้แผนที่ซึ่งฉันจำเป็นต้องทำสองสิ่ง:

1. ตรวจสอบว่ารูปร่างทั้งหมดใดทับซ้อนกันอยู่ (พิกัดตรงกัน)
2. คลิกที่ด้านบนของพวกมันเพื่อแยกออก

นี่คือภาพของข้อกำหนดเพื่อให้เข้าใจได้อย่างชัดเจน:

ดังนั้นในภาพนี้ สถานะด้านซ้ายคือสถานะเริ่มต้น และสถานะด้านขวาคือเมื่อเราคลิกที่พวกมัน สถานะนั้นจะกลายเป็นสถานะแยก ซึ่งรูปร่างทั้งหมดจะกระจายออกเล็กน้อยแต่เชื่อมต่อกับชื่อป้ายซึ่งในกรณีนี้คือ "G108"

ข้อมูลของรูปร่างทั้งสองนี้จะมาจาก API สองตัวต่างกัน สิ่งที่ฉันต้องการทำคือการตรวจหาการทับซ้อน ดังนั้นฉันจำเป็นต้องวนลูปไปที่ลูก ๆ ภายในองค์ประกอบ "stage" ที่จัดให้โดย createJs ซึ่งดูเหมือนว่าจะใช้เวลานานหรือไม่? ดังนั้นการตรวจสอบควรทำบนพื้นฐานใด? อาจมีรูปร่าง 3 หรือ 4 รูปที่ถูกวางจาก API ต่าง ๆ และไม่มีความสัมพันธ์ซึ่งกันและกัน.

สำหรับการแยก การจัดการกับมันอาจใช้แนวทางใดได้บ้าง?

นี่คือลิงก์ stackblitz เผื่อคุณต้องการลองใช้งาน ฉันได้สร้างสถานการณ์เริ่มต้นไว้แล้ว

ไลบรารีที่กำลังถูกใช้:

1. แผ่นพับสำหรับฟีเจอร์แผนที่
2. ชั้นกำหนดเองสำหรับผ้าใบ
3. สำหรับการใช้รูปทรงทั้งสองนี้ ให้สร้าง JS

ฉันจะซาบซึ้งมากถ้าคุณสามารถแนะนำฉันหรือแบ่งปันวิธีการหรือช่วยเหลือในเรื่องนี้

คำตอบ #1

คุณจริงๆ แล้วไม่จำเป็นต้องใช้ไลบรารีสำหรับสิ่งนี้ คุณจริงๆ แล้วไม่จำเป็นต้องตรวจสอบว่ารูปร่างทั้งสองทับซ้อนกันหรือไม่ คุณไม่จำเป็นต้องคลิกด้วย สิ่งที่คุณต้องทำคือตรวจสอบว่าเมาส์ของคุณอยู่ภายในทั้งสองเส้นทาง (รูปร่าง) หรือไม่ โดยใช้ CanvasRenderingContext2D.isPointInPath() ถ้าทั้งสองผลลัพธ์เป็น true ให้สร้างแอนิเมชันให้พวกมันเคลื่อนออกจากกันตามที่คุณต้องการ

คำตอบ #2

ฉันสามารถทำสิ่งนี้ได้ด้วยการใช้ leaflet-markercluster และ leaflet-canvasicon

สร้างไอคอนที่กำหนดเอง

import "leaflet-canvasicon";

export const circleIcon = L.canvasIcon({
  iconSize: [50, 50],
  iconAnchor: [25, 25],
  fillStyle: "rgba(255,0,0,.5)",
  drawIcon: function (icon, type) {
    // canvas code here - maybe you can use create-js?
  }
});

export const squareIcon = L.canvasIcon({
  // options and drawIcon function
});

export const combinedIcon = L.canvasIcon({
  // options and drawIcon function which combined both of the above
});

สร้าง markercluster โดยใช้ไอคอนเหล่านี้:

const marker1 = L.marker(center, {
  icon: circleIcon
});

const marker2 = L.marker(center, {
  icon: squareIcon
});

const group = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    return combinedIcon;
  }
});

group.addLayer(marker1).addLayer(marker2);
group.addTo(map);

โค้ดแซนด์บ็อกซ์ที่ใช้งานได้

นี่จะต้องมีการปรับแต่งฟังก์ชัน drawIcon อย่างระมัดระวังเพื่อให้ถูกต้อง คุณอาจสามารถรวมสิ่งนี้กับ create-js ได้ แต่สิ่งนี้เป็นตัวเลือก นอกจากนี้ตัวอย่างของฉันทำงานเมื่อคลิก ไม่ใช่เมื่อเลื่อนเมาส์ ดังนั้นคุณอาจต้อง