Angular 单击图标或图标列表时，将选定图标显示为活动图标

我正在使用非地理图像的传单（如平面图）

要实现的功能：

加载基于x、y坐标在非地理图像上创建的动态（标记）图标

• 可以使用unproject完成此操作

悬停任何标记时，将产品/项目详细信息显示为弹出窗口/工具提示

• 可以使用选项-title-在创建标记时添加对象数据

单击列表中的任何项目（在所附图像中向左）或地图容器中的相应标记时，将显示图标 任何简单样式上的颜色变化都应显示为活动

我正在寻找2和3的解决方案

下面是我试过的代码

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

---

由于使用库生成标记的HTML，因此可能需要添加一些jQuery。在左侧列表的HTML中添加一个

（单击）=“onClickItem（itemId）”

。然后在

onClickItem

方法中，从标记的id、名称或任何内容中选择标记，并添加一个“selected”CSS类。你试过这样的东西吗？我不确定这是最优雅的解决方案，因为我从来没有使用过传单，但我认为它应该可以工作。是的，我尝试过，但没有成功，因为我们将无法直接将css类添加到标记。我尝试使用clusterGroup对标记进行分层，然后根据stackoverflow中的一些答案和建议添加css类，该类很有效。你能创建一个小的演示来重现这一点吗？API允许你更改标记图标吗？不久前，谷歌地图就是这么做的。关于传单我不太清楚