唯杰地图 logo唯杰地图
VJMAP
EN

Primitive 主题

vjmap/references/primitive/overview.md 1.8 KB38 行
原文

本文回答:primitive 主题总览 —— 非 Symbol 的底座图元:line / polygon / 圆弧 / GeoJSON source / SVG / DIV 覆盖物。

Primitive 指"CAD 或业务数据的可视化底座":线、面、圆弧、曲线等基础几何图元的渲染与编辑,不涉及图标符号(图标看 symbol/),也不涉及 CAD 专用实体(看 vjmapext 的 entity/)。

子项索引

文件 主题
line vjmap.Polyline 线 / 虚线 / 渐变 / 动画
polygon-fill vjmap.Polygon 面 / 缕空 / 图案
polyline-api Polyline 辅助 API(单独创建数据源+图层)
circle-arc CircleFill / EllipseFill / 弧 / 曲线
geojson-source GeoJSON source 创建 / setData / 属性更新
editing 交互编辑底座图形(vjmap.Draw)
svg-div-overlay SvgOverlay / DivOverlay 覆盖物

最小示例

const polyline = new vjmap.Polyline({
  data: map.toLngLat(features),          // GeoJSON LineString[]
  lineColor: ["case", ["boolean", ["feature-state", "hover"], false], "#f00", ["get", "color"]],
  lineWidth: 3,
  isHoverPointer: true,
  isHoverFeatureState: true
});
polyline.addTo(map);
polyline.clickLayer(e => console.log(e.features[0].properties));

主题级 Top 3 陷阱

  1. data 必须是 LngLat:CAD 几何一律先 map.toLngLat(...)。
  2. feature-state 要求 feature 有 id:GeoJSON source generateId: true 或数据自带 id。
  3. SVG/DIV 覆盖物性能低:仅小量使用;大量改用 fill / line 图层。