gisviewer-vue3-arcgis
Version:
在应用中引入私服的包, 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置:
79 lines (78 loc) • 2.72 kB
TypeScript
import { default as OlMap } from 'ol/Map';
import { IStartDrawParams } from '../../types';
export default class DrawController {
private map;
private drawInteraction;
private drawSource;
private drawLayer;
constructor(map: OlMap);
/**
* 开始绘制指定类型的几何图形
* @param params.geometryType 几何类型: 'Point' | 'LineString' | 'Polygon' | 'Circle' | 'Rectangle'
* @param params.callback 绘制完成后的回调函数,返回绘制的 Feature
* @param params.style 可选的绘制样式(JSON 格式),使用 ./style/ 中的样式配置格式
*
* @example
* // 基本用法
* drawController.startDraw({
* geometryType: 'Polygon',
* callback: (result) => {
* console.log('绘制完成:', result.coordinates);
* }
* });
*
* @example
* // 自定义样式 - Point 类型(使用 point-style 格式)
* drawController.startDraw({
* geometryType: 'Point',
* style: { type: 'circle', radius: 8, fillColor: '#ff0000', strokeColor: '#ffffff', strokeWidth: 2 },
* callback: (result) => console.log('绘制完成:', result)
* });
*
* @example
* // 自定义样式 - LineString 类型(使用 line-style 格式)
* drawController.startDraw({
* geometryType: 'LineString',
* style: { type: 'simple-line', color: [0, 0, 255, 1], width: 3, style: 'dash' },
* callback: (result) => console.log('绘制完成:', result)
* });
*
* @example
* // 自定义样式 - Polygon 类型(使用 polygon-style 格式)
* drawController.startDraw({
* geometryType: 'Polygon',
* style: {
* type: 'simple-fill',
* style: 'solid',
* color: [0, 123, 255, 0.3],
* outline: { color: [0, 0, 128, 1], width: 2, style: 'solid' }
* },
* callback: (result) => console.log('绘制完成:', result)
* });
*/
startDraw(params: IStartDrawParams): void;
/**
* 停止绘制(保留已绘制的内容)
*/
stopDraw(): void;
/**
* 清除绘制的图形(保留绘制交互)
*/
clearDraw(): void;
/**
* 将用户传入的类型映射为 OpenLayers Draw 支持的类型
*/
private mapGeometryType;
/**
* 根据绘制类型将 JSON 格式的样式配置转换为 OpenLayers Style 对象
* 复用 ./style/ 中的样式解析方法
* @param geometryType 绘制类型
* @param styleConfig JSON 格式的样式配置
* @returns OpenLayers Style 对象
*/
private parseStyleConfig;
/**
* 从 Geometry 中提取坐标
*/
private getCoordinates;
}