builtin-icons

本文回答：内置水滴 SVG / setColor / scale / rotation —— 不写 HTML 也能做出漂亮标记。

一、默认水滴图标

new vjmap.Marker()
  .setLngLat([lng, lat])
  .addTo(map);

SVG 水滴，高 41px，宽 27px；默认 anchor: "center" + offset: [0, -14] 使尖端对准坐标（传 offset 会覆盖该默认值）。

二、换颜色

new vjmap.Marker({ color: "#f00" })  // 红色水滴
  .setLngLat([lng, lat])
  .addTo(map);

// 运行时
marker.setColor("#0f0");

默认颜色 #3FB1CE。

三、批量随机颜色

const colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"];
for (let i = 0; i < 100; i++) {
  new vjmap.Marker({ color: colors[i % colors.length] })
    .setLngLat(map.toLngLat(bounds.randomPoint()))
    .addTo(map);
}

四、缩放 scale

new vjmap.Marker({ color: "#f00", scale: 2 })   // 两倍大
  .setLngLat([lng, lat]).addTo(map);

五、旋转

const m = new vjmap.Marker({ color: "#f00", rotation: 45 })
  .setLngLat([lng, lat]);
m.addTo(map);

// 让 marker 旋转动画
let deg = 0;
function spin() {
  deg = (deg + 2) % 360;
  m.setRotation(deg);
  requestAnimationFrame(spin);
}
spin();

六、自定义 SVG

如果默认水滴不够，可以用内联 SVG 作为 element：

const svg = document.createElement("div");
svg.innerHTML = `
  <svg width="32" height="32" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="12" fill="#f0a" stroke="#fff" stroke-width="3"/>
    <text x="16" y="21" font-size="14" fill="#fff" text-anchor="middle">1</text>
  </svg>
`;

new vjmap.Marker({ element: svg, anchor: "center" })
  .setLngLat([lng, lat]).addTo(map);

七、vjmap 提供的其它预设（SDK 扩展）

vjmap 扩展了几款带特效的 marker 类（DOM 模式）：

• vjmap.BreathingApertureMarker：呼吸光圈
• vjmap.HaloRingMarker：光环
• vjmap.DiffusedApertureMarker：扩散光圈
• vjmap.FluorescenceMarker：荧光
• vjmap.RotatingApertureMarker / RotatingTextBorderMarker：旋转光圈 / 旋转文字边框
• vjmap.AnimateMarkerLayer：批量动画 marker 图层

构造签名统一为 (features | { lngLat, text? }, options?: AnimateMarkerLayerOption)，生成 marker 用 createMarker()，运行期样式用 setMarkersWidth / setMarkersColors / setDotSize：

const eff = new vjmap.HaloRingMarker(
  { lngLat: map.toLngLat([x, y]), text: "站点" },
  { /* AnimateMarkerLayerOption */ }
);
eff.setMarkersWidth(40);
eff.setMarkersColors(["#0af", "#fff"]);

const m = eff.createMarker({ draggable: false });   // createMarkerOptions extends MarkerOptions
m.addTo(map);

eff.setMarkersColors(["#f00", "#ff0"]);   // 动态改色
eff.setMarkersText("新文字");
eff.setMarkersWidth(60);
eff.setMarkersTextFontSize(14);
eff.setMarkersTextColor("#0f0");

八、CSS 图标（背景图片方式）

#my-marker {
  width: 40px;
  height: 40px;
  background-image: url("/icons/pin.png");
  background-size: cover;
  cursor: pointer;
}

const el = document.createElement("div");
el.id = "my-marker";
new vjmap.Marker({ element: el, anchor: "bottom" })
  .setLngLat([lng, lat]).addTo(map);

九、带角标 / 徽章

const el = document.createElement("div");
el.innerHTML = `
  <div class="pin">
    <div class="badge">3</div>
  </div>
`;
el.querySelector(".pin").style.cssText = `
  width: 40px; height: 40px; background: #f00; border-radius: 50%; position: relative;
`;
el.querySelector(".badge").style.cssText = `
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  background: #fff; color: #f00; border-radius: 50%; text-align: center; line-height: 16px;
  font-size: 12px;
`;
new vjmap.Marker({ element: el, anchor: "center" })
  .setLngLat([lng, lat]).addTo(map);

十、常见坑

1. color 不生效：只在默认水滴有效；自定义 element 后要改 CSS。
2. SVG marker 看起来模糊：DOM 里直接写 SVG 时，不传 width/height 会按 content-box，必须显式指定。
3. 特效 Marker 性能：几十个没问题，几百个会卡；大数量用 Symbol Layer。