- Cesium 框架 实现 画点、折线、多边形面、圆、长方形等平面图形
- 封装了绘制函数并放开了绘制操作的事件回调
- 分别定义绘制时和绘制后的样式,可以通过函数拦截下绘制完成的图形
个人随手作品.仅供各位道友参考实现,没有经过严格的测试,不建议用于生产环境
npm i cesium-plugins-draw --save //或 yarn add cesium-plugins-draw
import CesiumDraw from 'cesium-plugins-draw'
Cesium.Ion.defaultAccessToken = '你的IonToken'
const viewer = new Cesium.Viewer('cesium-container', {})
const drawer = new CesiumDraw({
/** DrawOption **/
})
// 开始绘制图形
drawer.start(
{
/** StartOption **/
},
// 实体重写函数,如果函数没有返回一个Entity实例,则不会添加到视图中
overrideFunc
)
// 暂停绘制
drawer.pause()
//销毁绘制对象
drawer.destroy()
声明
class Drawer {
get status(): Status
get isDestroy(): boolean
constructor(options: DrawOption)
/**
* @desc 绘制函数,
* @param config 绘制配置,可以通过定义options直接改写结果而不再填第二个参数
* @param overrideFunc Entity 重写函数,用于重写绘制结果,如果 overrideFunc返回一个Entity,则将该Entity添加到Viewer中,否则结束函数无操作
* @returns
*/
start(config: StartOption, overrideFunc?: OverrideEntityFunc): void
/**
* @desc 暂停绘制
* */
pause(): void
/**
* @desc 销毁绘制对象
*
* */
destroy(): void
}
/**
* @desc 绘制事件,定义执行绘制的事件类型
* @todo 为了防止产生侵入性bug,请在配置前确认相关事件是否可用,不再默认移除原生事件
*/
declare type OperationType = {
/**
* @desc 勾画开始事件
* @type EventType
* @default LEFT_CLICK
*/
START?: EventType
/**
* @desc 勾画移动事件
* @type EventType
* @default MOUSE_MOVE
*/
MOVING?: EventType
/**
* @desc 勾画结束事件
* @type EventType
* @default RIGHT_CLICK
*/
END?: EventType
/**
* @desc 勾画销毁事件
* @type EventType
* @default MIDDLE_CLICK
*/
DESTROY?: EventType
}
declare type Status = 'INIT' | 'START' | 'PAUSE' | 'DESTROY'
declare type OverrideEntityFunc = (
this: Drawer,
action: EventType,
entity: Entity
) => Entity | void
interface DrawOption {
/**
* @desc 勾画的视图
*/
viewer: Viewer
/**
* @desc 是否使用地形,当开启时需要浏览器支持地形选取功能,如果不支持将会被关闭
*/
terrain?: boolean
/**
* @desc 操作方式
*/
operateType?: OperationType
dynamicGraphicsOptions?: {
POINT?: PointGraphics.ConstructorOptions
POLYLINE?: PolylineGraphics.ConstructorOptions
POLYGON?: PolygonGraphics.ConstructorOptions
CIRCLE?: EllipseGraphics.ConstructorOptions
RECTANGLE?: RectangleGraphics.ConstructorOptions
}
action?: ActionCallback
sameStyle?: boolean
}
declare type StartOption = {
/**
* @desc 勾画类型 目前支持 Polygon、Line、Point、Circle、Rectangle
* @default false
*/
type: 'POLYGON' | 'POLYLINE' | 'POINT' | 'CIRCLE' | 'RECTANGLE'
/**
* 是否只勾画一次,如果设为true,则在第一勾画结束时执行Drawer#pause
* @default undefined
*/
once?: boolean
/**
* @desc 是否使用单例模式,如果开启,当勾画第二个图形时会销毁第一个图形
*/
oneInstance?: boolean
/**
* @desc 勾画的Entity选项,如Point对应#PointGraphics.ConstructorOptions
*/
options?: object
/**
* @desc 动态勾画没有确定图形时的图形配置,类型与options选项相同,会与DrawOption.dynamicGraphicsOptions合并
*/
dynamicOptions?: object
}
如果有使用地形数据的话,请开启 DrawOption 的 terrain 选项,否则会出现选点与位置不匹配的情况
MIT