易图引擎

易图引擎是基于 [email protected] 二次封装的 3D GIS SDK，面向业务系统提供地图初始化、图层管理、图形标绘、编辑交互、绘制测量、右键菜单、特效和自定义 Primitive 等能力。

当前包名：@baoyaOctopus/keymap。

特性

• initMap() 一行初始化 Cesium Viewer，并返回统一的 KeyMap 实例。
• GraphicLayer 管理业务图形资产，支持统一显示、隐藏、销毁和资产索引。
• HeatmapLayer 支持二维人流密度热力图，以固定地理范围承载实时权重点数据。
• 内置 BillboardGraphic、PolylineGraphic、PolygonGraphic、CircleGraphic、ModelGraphic、PopupGraphic 和 CustomPopupGraphic。
• 折线、多边形、点位支持 showHandler() / clearHandler() 进入和退出编辑模式。
• KeyMap 默认注册悬停高亮、弹窗、编辑拖拽、控制点右键删除和全局右键菜单。
• DrawPoint、DrawPolyline、DrawPolygon、DrawCircle 支持交互式绘制，并支持 Escape 取消当前绘制。
• MeasureDistance、MeasureArea、MeasureHeight、MeasureCutFill 支持测量流程，并与绘制工具互斥。

安装

npm install @baoyaOctopus/keymap

业务项目需要同时提供 Cesium 和 Vue 运行环境：

npm install [email protected] vue@^3.2.0

快速开始

页面中准备一个全尺寸 div：

<div
  id="map"
  style="width: 100%; height: 100vh"
></div>

初始化地图：

import { initMap } from '@baoyaOctopus/keymap';

const map = initMap('map');

map?.flyTo({
  position: [113.2644, 23.1291, 3000],
  duration: 2,
});

添加图层和图形：

import * as Cesium from 'cesium';
import { initMap, layer, graphic } from '@baoyaOctopus/keymap';

const map = initMap('map');
if (!map) throw new Error('地图容器不存在');

const graphicLayer = new layer.GraphicLayer({ name: '业务标绘图层' });
map.addLayer(graphicLayer);

const billboard = new graphic.BillboardGraphic({
  name: '项目位置',
  position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291, 30),
  image: '/icons/location.svg',
  width: 32,
  height: 32,
});

graphicLayer.addGraphic(billboard);

添加二维热力图：

import * as Cesium from 'cesium';
import { initMap, layer } from '@baoyaOctopus/keymap';

const map = initMap('map');
if (!map) throw new Error('地图容器不存在');

const heatmapLayer = new layer.HeatmapLayer({
  name: '校园人流密度',
  rectangle: Cesium.Rectangle.fromDegrees(113.26, 23.12, 113.29, 23.15),
  min: 0,
  max: 100,
  points: [
    { lng: 113.2644, lat: 23.1291, value: 80 },
    { lng: 113.276, lat: 23.136, value: 45 },
  ],
});

map.addLayer(heatmapLayer);
heatmapLayer.setData([{ lng: 113.268, lat: 23.132, value: 95 }]);

文档

• 指南首页
• 快速开始
• 图层与图形
• 右键菜单
• 绘制与测量
• API Reference：运行 npm run doc 后查看 docs/api/index.html

公开模块

import { initMap, KeyMap, layer, graphic, draw, measure, eventType, material, effect, primitive } from '@baoyaOctopus/keymap';

| 模块 | 说明 | | ----------- | ------------------------------------------------------- | | initMap | 创建 Cesium Viewer 并返回 KeyMap。 | | KeyMap | 地图实例封装，管理 Viewer、图层、资产、事件和默认交互。 | | layer | GraphicLayer、TilesetLayer、HeatmapLayer。 | | graphic | 点、线、面、圆、模型、弹窗等图形资产。 | | draw | 点、线、面、圆交互绘制。 | | measure | 距离、面积、高度、挖填方测量。 | | eventType | Menu、MousePick 等事件能力。 | | material | Cesium 材质封装。 | | effect | 雨、雪、雾、云、镜头光晕等场景效果。 | | primitive | 自定义 Primitive 能力。 |

开发命令

npm run dev
npm run typecheck
npm run build:types
npm run build
npm run doc

npm run build 会先执行 Rollup 生产构建，再生成 dist/types 类型声明。npm run doc 使用 TypeDoc 从 src/main.ts 生成 API Reference 到 docs/api。

发布前检查

npm run typecheck
npm run build:types
npm run doc
npm pack --dry-run