ArcGIS API for JavaScript中点击符号如何切换标记图片

现有代码运行后仅触发默认符号高亮效果，无法实现点击符号切换标记图片的功能，预期效果为点击点位符号即可切换对应标记图片。

问题根因 #

• 运算符使用错误：分支判断内修改url时错误使用了比较运算符==，没有执行赋值操作，且url字符串前多了无效空格
• 变量引用混乱：定义的symbol变量初始为空，首次点击访问symbol.url会触发空引用错误；后续将layerView.highlight()返回的高亮实例赋值给symbol，该实例是API自带的高亮效果对象，本身不存在url属性，和自定义的图片标记符号完全无关
• 渲染逻辑不匹配：当前使用的simple渲染器会对图层所有要素应用统一样式，直接修改渲染器符号会改变所有点位的图标，无法实现单个点击点位的图标切换
• 时序风险：图层添加逻辑单独放在view.when回调中，可能出现图层视图初始化时图层尚未加入地图的异常
• 命中检测逻辑不严谨：未过滤目标图层要素，点到其他图层要素时会直接抛出错误进入catch分支，中断逻辑

修复实现 #

采用要素属性+唯一值渲染器的方案实现：给要素增加isSelected字段标记点位选中状态，渲染器根据该字段值匹配对应的图片符号，点击时切换点位的isSelected属性即可自动触发图标重绘。
完整修复代码如下：

// 定义两种状态的标记符号
const defaultSymbol = {
  type: "picture-marker",
  url: "images/Location-map.png",
  width: "26",
  height: "26"
};
const selectedSymbol = {
  type: "picture-marker",
  url: "https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon.jpg",
  width: "26",
  height: "26"
};

// 用唯一值渲染器根据选中状态匹配对应符号
const centroidRenderer = {
  type: "unique-value",
  field: "isSelected",
  defaultSymbol: defaultSymbol,
  uniqueValueInfos: [
    {
      value: true,
      symbol: selectedSymbol
    }
  ]
};

const locationpin = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Centroids/FeatureServer/0",
  renderer: centroidRenderer,
  outFields: ["*"]
});

// 先添加图层再绑定交互，避免时序问题
map.add(locationpin);

view.when(async () => {
  const layerView = await view.whenLayerView(locationpin);
  // 记录上一个选中要素，实现单选效果，不需要可删除
  let lastSelectedGraphic = null;

  view.on('click', async (e) => {
    const { results } = await view.hitTest(e, {
      // 只检测目标图层要素，避免干扰
      include: [locationpin]
    });
    
    const hitResult = results.find(res => res.graphic.layer === locationpin);
    if (!hitResult) return;
    
    const currentGraphic = hitResult.graphic;
    // 重置上一个选中要素状态
    if (lastSelectedGraphic && lastSelectedGraphic !== currentGraphic) {
      lastSelectedGraphic.setAttribute("isSelected", false);
    }
    // 切换当前要素选中状态，自动触发渲染更新
    const isSelected = !currentGraphic.getAttribute("isSelected");
    currentGraphic.setAttribute("isSelected", isSelected);
    lastSelectedGraphic = isSelected ? currentGraphic : null;
  });
});

补充说明 #

• 上述代码默认实现单选效果，即点击新点位时自动重置上一个点位的图标，不需要该效果可删除lastSelectedGraphic相关逻辑
• 不需要额外调用layerView.highlight()，自定义选中符号已经可以覆盖高亮需求
• 如果需要自定义选中态和默认态的图标大小、偏移量，直接修改对应symbol的配置项即可

内容的提问来源于stack exchange，提问作者Neeraj Naswa