唯杰地图 logo唯杰地图
VJMAP
EN

circle-symbol

vjmap/references/symbol/circle-symbol.md 4.1 KB127 行
原文

本文回答：vjmap.Circle 圆点图层 —— 参数、hover、点击、性能。

一、最小示例

const circle = new vjmap.Circle({
  data: map.toLngLat(geojson),
  circleColor: "#f00",
  circleRadius: 5,
  circleStrokeColor: "#fff",
  circleStrokeWidth: 2
});
circle.addTo(map);

二、参数表（驼峰式）

参数 默认 说明
data — GeoJSON FeatureCollection / feature / coord
circleRadius 5 半径（像素）
circleColor #000 填充色
circleOpacity 1 填充透明
circleBlur 0 模糊（0-1）
circleStrokeWidth 0 边框像素
circleStrokeColor #000 边框色
circleStrokeOpacity 1 边框透明
circleTranslate [0,0] 平移（像素）
circleTranslateAnchor "map" map/viewport
circlePitchScale "map" map/viewport：pitch 时是否随地图缩放
circlePitchAlignment "viewport" 同上
circleSortKey — 同层排序
visibility "visible" 可见性
minzoom / maxzoom — 生效 zoom 区间
filter — vjmap 样式过滤表达式
isHoverPointer false hover 时改 cursor（vjmap 扩展）
isHoverFeatureState false hover 时自动设 feature-state.hover（vjmap 扩展）

三、数据驱动

new vjmap.Circle({
  data: map.toLngLat(geojson),
  circleColor: [
    "case",
    ["boolean", ["feature-state", "hover"], false], "#ff0",
    ["get", "color"]
  ],
  circleRadius: [
    "interpolate", ["linear"], ["get", "level"],
    1, 3,
    10, 15
  ]
});

四、hover / click 事件（OverlayLayer 基类提供）

// hover 改 cursor（不在 options 里开时）
circle.hoverPointer();

// hover 改 feature-state（配合 ["feature-state","hover"] 表达式）
// 回调收到的是地图事件对象，不是 { feature }：进入时读 e.features?.[0]（直接从一个要素移到相邻要素时
// 进入回调在 await 离开回调之后才跑，e.features 可能已被引擎清掉，需判空）；
// 离开时 e.oldFeatureId 仅在直接移到相邻要素时有值，移出图层时为 undefined
circle.hoverFeatureState(
  e => console.log("enter", e.features?.[0]),
  e => console.log("leave", e.oldFeatureId)
);

// 点击
circle.clickLayer(e => alert(e.features[0].properties.name));

// hover 弹 popup
circle.hoverPopup(f => `<b>${f.properties.name}</b>`, { anchor: "bottom" });

五、更新数据

circle.setData(newGeoJson);

// 获取 sourceId / layerId
const sid = circle.getSourceId();
const lid = circle.getLayerId();

六、样式单项修改

circle.setCircleColor("#0af");
circle.setCircleRadius(10);
circle.setProperty("circleOpacity", 0.5);
map.setLayerZoomRange(circle.getLayerId(), 10, 24);   // 改可见级别；setLayerStyle({ minzoom }) 会丢掉 minzoom 且把未列出的 paint/layout 全重置
circle.setFilter([">=", ["get", "level"], 3]);

七、show / hide

circle.hide();
circle.show();
circle.toggle(true);    // true 可见 / false 隐藏

八、移除

circle.remove();       // 移除 layer + source

九、性能

  • circle 是最轻量的 WebGL 图层，几十万点依然可用。
  • 大数据量时：
    • hover 要 feature-state 须要素有非 0 id（封装类不透传 generateId，见 §十 第 2 条）
    • circleSortKey 决定同层哪个在上
    • 按 zoom 分层（minzoom / maxzoom）

十、常见坑

  1. data 坐标忘了 toLngLat：点出现在赤道。
  2. hoverFeatureState 不生效：feature 没有非 0 的 id。封装类不透传 generateId（且 generateId 从 0 编号，而 hoverFeatureState 忽略 id 0）：FeatureCollection 须自带非 0 id；或传 [{points, properties}] 形式（自动 id = 序号 + 1）；或先自建源（promoteId）再传 sourceId。
  3. CircleColor 是 CSS 颜色：rgba(255, 0, 0, 0.5) OK，rgb(255 0 0 / 50%) 可能不支持。
  4. 想做中心透明圆环：circle-opacity: 0 + circle-stroke-color/width。