如何在Mapbox Draw GL中设置未选中线条顶点的样式

嘿，刚好我之前也折腾过这个需求，给你唠唠具体怎么实现！

默认情况下Mapbox GL Draw确实只在选中线条时才显示顶点，要让未选中的顶点也露出来，我们得自己加个自定义图层，专门针对这些顶点做样式，还能顺便实现按自定义属性分色的需求。

具体步骤和代码示例 #

首先，在你初始化Mapbox Draw之后，给地图添加一个新的circle图层，指向Draw的未选中要素数据源，再用表达式做条件样式：

// 添加自定义图层来显示未选中的线条顶点
map.addLayer({
  id: "gl-draw-unselected-line-vertices",
  type: "circle",
  source: "gl-draw-cold", // 这个是Draw默认存储未选中要素的数据源
  filter: [
    "all",
    ["==", "$type", "Point"], // 只匹配点要素
    ["==", ["get", "parent"], "LineString"], // 确保是线条的顶点（排除多边形、独立点要素）
    ["has", "user_conditionProperty"] // 过滤带有我们自定义属性的顶点
  ],
  paint: {
    "circle-radius": 4, // 调整顶点的大小
    "circle-color": [
      "match", // 用match表达式根据自定义属性匹配颜色
      ["get", "user_conditionProperty"], // 获取自定义用户属性的值
      "red", "#ff3333", // 属性值为"red"时显示红色
      "blue", "#3366ff", // 属性值为"blue"时显示蓝色
      "#999999" // 没有匹配到属性时的默认颜色
    ],
    "circle-stroke-width": 1,
    "circle-stroke-color": "#ffffff" // 给顶点加个白色描边，让它更显眼
  }
});

关键细节说明 #

• 关于数据源：gl-draw-cold是Mapbox Draw内置的数据源，专门放未选中的要素；如果你想同时统一处理选中/未选中的顶点样式，可以把source改成Draw的主数据源gl-draw，再配合选中状态的过滤条件就行。
• 过滤器里的parent属性：Draw的顶点要素会自带parent属性，标记它属于哪种父要素（LineString、Polygon等），用这个就能精准只显示线条的顶点，不会把其他要素的点混进来。
• 自定义属性：你提到的“自定义用户属性”（比如上面的user_conditionProperty），需要你在创建线条或者编辑线条时，给顶点要素的properties里加上这个属性——比如通过Draw的create事件触发时设置，或者用setFeatureState方法动态修改。

这样设置之后，就算线条没被选中，它的顶点也会按照你自定义的属性显示对应的颜色啦！

备注：内容来源于stack exchange，提问作者yarslvd