Mapbox GL JS中如何修改指定ID地点的图标、颜色并设置弹窗？

针对你提到的唯一ID为12345的餐厅Plum Bistro，以下分两种场景给出实现方案：

场景1：使用本地GeoJSON数据（类似你当前的警察局代码） #

步骤1：更新GeoJSON数据，加入目标餐厅并带上唯一ID #

先把餐厅数据添加到FeatureCollection里，确保properties中包含唯一ID、图标/颜色配置、弹窗信息：

const locations = {
  "type": "FeatureCollection",
  "features": [
    // 原警察局数据（可自行添加ID方便区分）
    {
      "type": "Feature",
      "properties": {
        "id": "police-001",
        "icon": "police-15",
        "color": "#004cff",
        "title": "City of Seattle Police Department",
        "description": "1519 12th Ave, Seattle, WA 98122",
        "commentBtnText": "Comment"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-122.31725715100764, 47.614924945431525]
      }
    },
    // 目标餐厅Plum Bistro
    {
      "type": "Feature",
      "properties": {
        "id": "12345", // 你的唯一ID
        "icon": "restaurant-15",
        "color": "#ff4c00",
        "title": "Plum Bistro",
        "description": "1429 12th Ave, Seattle, WA 98122",
        "commentBtnText": "Leave a Review"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-122.31689453125, 47.61388967574303] // 替换为实际坐标
      }
    }
  ]
};

步骤2：遍历数据时按ID匹配，动态设置样式与弹窗 #

在循环中判断当前feature的ID是否为12345，针对性修改图标、颜色和弹窗内容：

// 遍历所有地点
for (const feature of locations.features) {
  const el = document.createElement('div');
  
  // 根据ID设置图标样式
  if (feature.properties.id === "12345") {
    el.className = 'restaurant';
    // 如果你的SVG图标支持颜色反转，用这个方法动态改颜色（可选）
    el.style.filter = `brightness(0) saturate(100%) invert(${hexToRgb(feature.properties.color)})`;
  } else {
    el.className = 'police';
  }

  // 构建弹窗HTML（自动匹配当前地点的信息）
  const popupHtml = `
    <h2>${feature.properties.title}</h2>
    <p>${feature.properties.description}</p>
    <button class="open-button" onclick="openForm()">${feature.properties.commentBtnText}</button>
  `;

  // 添加标记和弹窗到地图
  new mapboxgl.Marker(el)
    .setLngLat(feature.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(popupHtml))
    .addTo(map);
}

// 辅助函数：将十六进制颜色转为RGB百分比，用于filter样式
function hexToRgb(hex) {
  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return match ? `${parseInt(match[1],16)}% ${parseInt(match[2],16)}% ${parseInt(match[3],16)}%` : '';
}

步骤3：添加CSS样式 #

为餐厅图标新增CSS类：

.police {
  background-image: url('../assets/police.svg');
  background-size: cover;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

.restaurant {
  background-image: url('../assets/restaurant.svg');
  background-size: cover;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

场景2：加载Mapbox Studio的矢量瓦片图层 #

如果你的地点数据是从Mapbox Studio发布的矢量瓦片加载的，用以下方法：

map.on('load', () => {
  // 假设你的Studio图层ID是'places'
  // 1. 筛选出ID为12345的餐厅
  map.setFilter('places', ['in', 'id', '12345']);
  
  // 2. 修改图标和颜色
  map.setPaintProperty('places', 'icon-image', 'restaurant-15'); // 使用Mapbox内置图标或自定义上传的图标ID
  map.setPaintProperty('places', 'icon-color', '#ff4c00');
  
  // 3. 监听点击事件，显示弹窗
  map.on('click', 'places', (e) => {
    const targetFeature = e.features[0];
    new mapboxgl.Popup()
      .setLngLat(e.lngLat)
      .setHTML(`
        <h2>${targetFeature.properties.title}</h2>
        <p>${targetFeature.properties.description}</p>
        <button class="open-button" onclick="openForm()">Leave a Review</button>
      `)
      .addTo(map);
  });

  // 鼠标悬停显示指针效果
  map.on('mouseenter', 'places', () => {
    map.getCanvas().style.cursor = 'pointer';
  });
  map.on('mouseleave', 'places', () => {
    map.getCanvas().style.cursor = '';
  });
});

内容的提问来源于stack exchange，提问作者Paul Huating Sun