angular - For å vise valgt ikon som aktivt, når ikon eller ikonliste klikkes

Jeg bruker Leaflet for ikke-geografiske bilder (som plantegning).

Funksjon å implementere:

  1. Last inn de dynamiske (markører) ikonene laget på det ikke-geografiske bildet basert på x,y-koordinater.

    • klarte å gjøre dette ved å bruke unproject.

  2. Når du holder musepekeren over en hvilken som helst markør, vis produkt-/vareinformasjonen som popup/verktøytips.

    • klarte å gjøre dette med alternativet - tittel - legge til objektdataene mens man opprettet markører.

  3. Når du klikker på et element i listen (mot venstre i det vedlagte bildet) eller tilsvarende markør i kartbeholderen, bør ikonet vises som aktivt ved fargeendring på en hvilken som helst enkel stil.

Jeg søker løsningen for 2 og 3.

Nedenfor er koden jeg prøvde.

planPos = [
{
  x: 1500,
  y: 500,
  item: 'Sensors',
  Model: 'ABC',
  Make: 'Bosh',
  Elevation: '2.3 meters',
  Criticality: 'High',
  Accessibility: 'Concrete',
  LocationType: 'Kitchen',
  Zone: 'Annexure',
  ZoneType: 'Building',
  Restriction: 'Securenced',
  ZoneNotes: 'The is big sentence at the room level and building',
  PositionDetails: 'One of the position details near the room and details',
  InstallationNotes: 'One of the big resource for the building',
  Status: 'Active'
},
{
  x: 125,
  y: 45
},
{
  x: this.w * 0.5,
  y: this.h * 0.5
}];


mapInit() {
// create the slippy map
this.map = L.map('image-map', {
  attributionControl: false,
  minZoom: 1,
  maxZoom: 4,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple
});


this.myFeatureGroup = L.featureGroup().addTo(this.map).on("click", this.groupClick);
// calculate the edges of the image, in coordinate space
this.southWest = this.map.unproject([0, this.h], this.map.getMaxZoom() - 1);
this.northEast = this.map.unproject([this.w, 0], this.map.getMaxZoom() - 1);
this.bounds = new L.LatLngBounds(this.southWest, this.northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(this.url, this.bounds).addTo(this.map);

// tell leaflet that the map is exactly as big as the image
this.map.setMaxBounds(this.bounds);

this.planPos.forEach(p => {
  L.marker(this.map.unproject([p.x, p.y], this.ACTUAL_SIZE_ZOOM), {
    draggable: true,
    title: `item: ${p.item}
    \n Model: ${p.Model}
    \n Make: ${p.Make}
    \n Elevation: ${p.Elevation}
    \n Criticality: ${p.Criticality}
    \n Accessibility: ${p.Accessibility}
    \n LocationType:  ${p.LocationType}
    \n Zone: ${p.Zone}
    \n ZoneType: ${p.ZoneType}
    \n Restriction: ${p.Restriction}
    \n ZoneNotes: ${p.ZoneNotes}
    \n PositionDetails: ${p.PositionDetails}
    \n InstallationNotes: ${p.InstallationNotes}
    \n Status: ${p.Status}`,
    name: p.Make
  });
 });
}