@ino-cesium/draw 0.0.1-5.beta.1

package/README.MD

@@ -0,0 +1,3 @@
+# ino-cesium  绘制
+
+

package/dist/index.d.ts

@@ -0,0 +1,414 @@
+import * as Cesium from 'cesium';
+import { BasePrimitive, Common } from '@ino-cesium/common';
+
+declare class MeasurePrimitive extends BasePrimitive<any> {
+    private drawData;
+    private labelCollection;
+    private measureDivs;
+    private cesiumWidget;
+    private viewer;
+    constructor(drawData: IDrawAttrInfo, viewer: Cesium.Viewer);
+    getPrimitive(): Cesium.LabelCollection | undefined;
+    updateUnit(unit: string[]): void;
+    updatePointDivLabel(): void;
+    renderDivPosition(): void;
+    destroy(): void;
+    setAppearance(): void;
+    clearAllDiv(): void;
+    createDiv(key: string, text: string, height?: number): HTMLDivElement;
+}
+
+/**
+ * 绘制事件类型
+ */
+declare enum DrawEventType {
+    /**
+     * 绘制添加事件
+     */
+    DRAW_ADD = "drawAdd",
+    /**
+     * 绘制移动事件
+     */
+    DRAW_MOVE = "drawMove",
+    /**
+     * 绘制拾取事件
+     */
+    DRAW_PICK = "drawPick",
+    /**
+     * 绘制双击事件
+     */
+    DRAW_DB_CLICK = "drawDbClick",
+    /**
+     * 绘制右键点击事件
+     */
+    DRAW_RIGHT_CLICK = "drawRightClick"
+}
+/**
+ * 绘制事件处理函数类型
+ * @param type 事件类型
+ * @param data 事件数据
+ */
+type DrawEvent = (type: string, data: any) => void;
+/**
+ * 绘制处理器事件接口
+ */
+interface IDrawHandlerEvent {
+    /**
+     * 绘制开始事件
+     * @param drawData 绘制属性信息
+     */
+    drawStart?: (drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制结束事件
+     * @param drawData 绘制属性信息
+     */
+    drawEnd?: (drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制添加事件
+     * @param positions 绘制点的位置数组
+     * @param drawData 绘制属性信息
+     */
+    drawAdd?: (positions: Cesium.Cartesian3, drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制移动事件
+     * @param positions 绘制点的位置数组
+     * @param drawData 绘制属性信息
+     */
+    drawMove?: (positions: Cesium.Cartesian3, drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制编辑开始事件
+     * @param drawData 绘制属性信息
+     */
+    drawEditStart?: (drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制编辑结束事件
+     * @param drawData 绘制属性信息
+     */
+    drawEditEnd?: (drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制移除事件
+     * @param drawData 绘制属性信息
+     */
+    drawRemove?: (drawData: IDrawAttrInfo) => void;
+}
+/**
+ * 绘制属性信息接口
+ */
+interface IDrawAttrInfo {
+    /**
+     * 绘制对象的唯一标识符
+     */
+    id: string;
+    /**
+     * 是否可编辑
+     */
+    edit: boolean;
+    /**
+     * 是否测量
+     */
+    measure: boolean;
+    /**
+     * 是否显示测量标签
+     */
+    measureLabel: boolean;
+    /**
+     * 测量单位数组
+     */
+    measureUnit: string[];
+    /**
+     * 是否正在编辑
+     */
+    isEditing?: boolean;
+    /**
+     * 是否禁止添加
+     */
+    isDisAdd?: boolean;
+    /**
+     * 是否禁用深度测试
+     */
+    disDepthFail?: boolean;
+    /**
+     * 绘制形状
+     */
+    shape: DrawShape;
+    /**
+     * 是否贴地
+     */
+    clampToGround?: boolean;
+    /**
+     * 绘制点的位置数组
+     */
+    positions: Cesium.Cartesian3[];
+    /**
+     * 形状点的位置数组
+     */
+    shapePositions?: Cesium.Cartesian3[];
+    /**
+     * 点图元集合
+     */
+    pointPrimitives: Cesium.PointPrimitiveCollection;
+    /**
+     * 测量图元集合
+     */
+    measurePrimitive?: MeasurePrimitive;
+    /**
+     * 图元集合
+     */
+    primitives: Cesium.PrimitiveCollection;
+    /**
+     * 测量结果数组
+     */
+    measureResult?: IMeasureResult[];
+}
+/**
+ * 事件动作类型
+ */
+type IEventActions = {
+    [key in DrawEventType]: (data: IEventData) => void;
+};
+/**
+ * 事件数据接口
+ */
+interface IEventData {
+    /**
+     * 事件位置
+     */
+    position: Cesium.Cartesian3;
+    /**
+     * 拾取的图元
+     */
+    pickPrimitive?: Cesium.Primitive;
+    /**
+     * 窗口位置
+     */
+    windowPosition: Cesium.Cartesian2;
+}
+/**
+ * 绘制处理器接口
+ */
+interface IDrawHandler {
+    /**
+     * 开始绘制
+     */
+    draw: (options: IDrawOptions) => void;
+    /**
+     * 移除方法
+     * @param drawData 绘制属性信息
+     */
+    remove: (drawData: IDrawAttrInfo) => void;
+    /**
+     * 移除所有方法
+     */
+    removeAll: () => void;
+    /**
+     * 更新测量单位方法
+     * @param drawData 绘制属性信息
+     * @param measureUnit 测量单位数组
+     */
+    updateMeasureUnit: (drawData: IDrawAttrInfo, measureUnit: string[]) => void;
+    /**
+     * 设置绘制样式方法
+     * @param drawStyle 绘制样式
+     */
+    setDrawStyle: (drawStyle: Common.DeepPartial<IDrawStyle>) => void;
+    /**
+     * 事件处理器
+     */
+    Event: IDrawHandlerEvent;
+}
+/**
+ * 绘制选项接口
+ */
+interface IDrawOptions {
+    /**
+     * 绘制形状
+     */
+    shape: DrawShape;
+    /**
+     * 是否可编辑
+     */
+    edit?: boolean;
+    /**
+     * 是否测量
+     */
+    measure?: boolean;
+    /**
+     * 测量单位数组
+     */
+    measureUnit?: string[];
+    /**
+     * 是否显示测量标签
+     */
+    measureLabel?: boolean;
+    /**
+     * 是否贴地
+     */
+    clampToGround?: boolean;
+    /**
+     * 是否禁用深度
+     */
+    disDepthFail?: boolean;
+    /**
+     * 绘制样式
+     */
+    drawStyle?: Common.DeepPartial<IDrawStyle>;
+}
+/**
+ * 测量选项接口
+ */
+interface IMeasureOptions extends IDrawOptions {
+    /**
+     * 是否测量
+     */
+    measure?: boolean;
+    /**
+     * 测量单位数组
+     */
+    measureUnit?: string[];
+    /**
+     * 是否显示测量标签
+     */
+    measureLabel?: boolean;
+}
+/**
+ * 绘制编辑事件接口
+ */
+interface IDrawEditEvent {
+    /**
+     * 绘制编辑添加事件
+     * @param pointPrimitive 点图元
+     */
+    drawEditAdd: (pointPrimitive: Cesium.PointPrimitive) => void;
+    /**
+     * 绘制编辑移动事件
+     * @param pointPrimitive 点图元
+     */
+    drawEditMove: (pointPrimitive: Cesium.PointPrimitive) => void;
+    /**
+     * 绘制编辑移除事件
+     * @param pointPrimitive 点图元
+     */
+    drawEditRemove: (pointPrimitive: Cesium.PointPrimitive) => void;
+    /**
+     * 绘制删除事件
+     * @param pointPrimitive 点图元
+     */
+    drawDelete: (pointPrimitive: Cesium.PointPrimitive) => void;
+}
+/**
+ * 测量结果接口
+ */
+interface IMeasureResult {
+    /**
+     * 测量值
+     */
+    value: number;
+    /**
+     * 测量单位
+     */
+    unit: string;
+    /**
+     * 测量位置
+     */
+    position: Cesium.Cartesian3;
+    /**
+     * 测量点的位置数组
+     */
+    positions: Cesium.Cartesian3[];
+    /**
+     * 前缀文本，默认为空 用来做测量标识
+     */
+    prefixText?: string;
+}
+/**
+ * 绘制形状类型
+ */
+type DrawShape = 'polyline' | 'polygon' | 'point' | 'circle' | 'rectangle' | 'vertical-line' | 'vertical-surface-line';
+/**
+ * 绘制样式接口
+ */
+interface IDrawStyle {
+    /**
+     * 点样式
+     */
+    point: {
+        /**
+         * 点颜色
+         */
+        color: string;
+        /**
+         * 点像素大小
+         */
+        pixelSize: number;
+        /**
+         * 点轮廓颜色
+         */
+        outlineColor: string;
+        /**
+         * 点轮廓宽度
+         */
+        outlineWidth: number;
+        /**
+         * 禁用深度测试距离
+         */
+        disableDepthTestDistance?: number;
+    };
+    /**
+     * 折线样式
+     */
+    polyline: {
+        /**
+         * 折线宽度
+         */
+        width: number;
+        /**
+         * 折线颜色
+         */
+        color: string;
+        /**
+         * 深度失败颜色
+         */
+        depthFailColor: string;
+    };
+    /**
+     * 多边形样式
+     */
+    polygon: {
+        /**
+         * 多边形颜色
+         */
+        color: string;
+        /**
+         * 深度失败颜色
+         */
+        depthFailColor: string;
+    };
+}
+
+type types_DrawEvent = DrawEvent;
+type types_DrawEventType = DrawEventType;
+declare const types_DrawEventType: typeof DrawEventType;
+type types_DrawShape = DrawShape;
+type types_IDrawAttrInfo = IDrawAttrInfo;
+type types_IDrawEditEvent = IDrawEditEvent;
+type types_IDrawHandler = IDrawHandler;
+type types_IDrawHandlerEvent = IDrawHandlerEvent;
+type types_IDrawOptions = IDrawOptions;
+type types_IDrawStyle = IDrawStyle;
+type types_IEventActions = IEventActions;
+type types_IEventData = IEventData;
+type types_IMeasureOptions = IMeasureOptions;
+type types_IMeasureResult = IMeasureResult;
+declare namespace types {
+  export { types_DrawEventType as DrawEventType };
+  export type { types_DrawEvent as DrawEvent, types_DrawShape as DrawShape, types_IDrawAttrInfo as IDrawAttrInfo, types_IDrawEditEvent as IDrawEditEvent, types_IDrawHandler as IDrawHandler, types_IDrawHandlerEvent as IDrawHandlerEvent, types_IDrawOptions as IDrawOptions, types_IDrawStyle as IDrawStyle, types_IEventActions as IEventActions, types_IEventData as IEventData, types_IMeasureOptions as IMeasureOptions, types_IMeasureResult as IMeasureResult };
+}
+
+/**
+ * 创建绘制工具
+ * @param viewer
+ */
+declare const createDrawHandler: (viewer: Cesium.Viewer) => IDrawHandler;
+
+export { types as Draw, DrawEventType, createDrawHandler };
+export type { DrawEvent, DrawShape, IDrawAttrInfo, IDrawEditEvent, IDrawHandler, IDrawHandlerEvent, IDrawOptions, IDrawStyle, IEventActions, IEventData, IMeasureOptions, IMeasureResult };

package/dist/index.js

@@ -0,0 +1 @@
+import{calcArea as i,calcPoistionCenter as e,calcGeodesicDistance as t,calcSpaceDistance as n,BasePrimitive as s,makePositiontoLnglat as o,Tooltip as a,numberId as r}from"@ino-cesium/common";import*as l from"cesium";var d=(i=>(i.DRAW_ADD="drawAdd",i.DRAW_MOVE="drawMove",i.DRAW_PICK="drawPick",i.DRAW_DB_CLICK="drawDbClick",i.DRAW_RIGHT_CLICK="drawRightClick",i))(d||{}),p=Object.freeze({__proto__:null,DrawEventType:d});const c="cm",h="厘米",m="m",u="米",v="km",A="千米",w="公里",g="㎡",C="平方厘米",E="㎡",y="平方米",D="km²",f="平方千米",P="平方公里",I="亩",b="公顷",R={cm:"cm²",m:"㎡",km:"km²","米":"平方米","千米":"平方千米","公里":"平方公里"},T=(i,e,t)=>e===t?i:i*S(t),U=(i,e,t)=>e===t?i:i*function(i){switch(i){case g:return 1e4;case E:return 1;case D:return 1e-6;case C:return 1e4;case y:return 1;case f:case P:return 1e-6;case I:return.0015;case b:return 1e-4;default:return 1}}(t),F=i=>R[i],S=i=>{switch(i){case m:return 1;case c:case h:return 100;case v:return.001;case u:return 1;case A:case w:return.001;default:return 1}};const M=(i,s,o,a,r)=>{o.push(...i.map((o,r)=>{const l=i[r+1];if(l){let i=s?t(o,l):n(o,l);return i=T(i,"m",a),{value:Number(i.toFixed(2)),unit:a,position:e([o,l]),positions:[o,l]}}return null}).filter(i=>i&&i.value>0))},x=i=>{if(2===i.length)return i;let[e,t]=i;return t||(t=F(e)),[e,t]},_={drawStart:{circle:"单击左键绘制圆的中心点，单机右键取消绘制。",rectangle:"单击左键绘制矩形左上角。",point:"单击左键结束绘制，单机右键取消绘制。","vertical-surface-line":"单击左键结束绘制，单机右键取消绘制。",default:"单击左键绘制第一个节点，单机右键取消绘制。"},drawMove:{circle:"单击左键确定圆的半径并结束绘制，单机右键取消绘制。",rectangle:"单击左键结束绘制，单机右键取消绘制。","vertical-line":"单击左键结束绘制，单机右键取消绘制。","vertical-surface-line":"单击左键结束绘制，单机右键取消绘制。",default:"单机左键绘制下一个节点，双击左键结束绘制，单机右键撤销上次绘制。"},pointEnter:"双击左键编辑节点。",drawEditMove:{default:"移动鼠标修改节点，单击左键确定修改，单机右键取消修改。"}},G={point:{color:"rgba(255,255,0,0.8)",pixelSize:8,outlineColor:"rgba(255,255,255,0.8)",outlineWidth:2,disableDepthTestDistance:Number.POSITIVE_INFINITY},polyline:{width:2,color:"rgba(81,255,0,0.8)",depthFailColor:"rgba(255,0,0,0.5)"},polygon:{color:"rgba(255,255,54,0.3)",depthFailColor:"rgba(255,0,0,0.3)"}};class k extends s{positions;drawData;appearanceTran;depthFailAppearance;linePrimitiveCollection;constructor(i){super(),this.drawData=i,this.positions=i.positions,this.linePrimitiveCollection=new l.PrimitiveCollection,this.setAppearance()}getGeometry(){const i=((i,e)=>{let t=i;if("vertical-surface-line"===e&&i.length>=1){const e=i[0],n=l.Cartographic.fromCartesian(e),s=l.Math.toDegrees(n.longitude),o=l.Math.toDegrees(n.latitude),a=0;t=[l.Cartesian3.fromDegrees(s,o,n.height),l.Cartesian3.fromDegrees(s,o,a)]}if("polygon"===e&&i.length>=2&&(t=[...i,i[0]]),"vertical-line"===e&&i.length>=2){const e=i[0],n=i[1],s=l.Cartographic.fromCartesian(e),o=l.Cartographic.fromCartesian(n).height,a=l.Math.toDegrees(s.longitude),r=l.Math.toDegrees(s.latitude);t=[l.Cartesian3.fromDegrees(a,r,s.height),l.Cartesian3.fromDegrees(a,r,o)]}if("circle"===e&&i.length>=2){const e=n(i[0],i[1]),s=l.Cartographic.fromCartesian(i[0]).height,o=new l.CircleOutlineGeometry({center:i[0],height:s,radius:e}),a=l.CircleOutlineGeometry.createGeometry(o);let r=[];if(a){const i=[].slice.call(a.attributes.position.values);r=l.Cartesian3.unpackArray(i),r.push(r[0]),t=r}}if("rectangle"===e&&i.length>=2){const e=l.Cartographic.fromCartesian(i[0]).height,n=l.Rectangle.fromCartesianArray(i),s=new l.RectangleOutlineGeometry({rectangle:n,height:e}),o=l.RectangleOutlineGeometry.createGeometry(s);let a=[];if(o){const i=[].slice.call(o.attributes.position.values);a=l.Cartesian3.unpackArray(i),a.push(a[0]),t=a}}return t})(this.positions,this.drawData.shape);if(this.drawData.shapePositions=i,"vertical-line"===this.drawData.shape||"vertical-surface-line"===this.drawData.shape){const i=this.drawData.pointPrimitives.get(1);i&&(i.position=this.drawData.shapePositions[1])}if(!(i.length<2))return this.drawData.clampToGround?new l.GroundPolylineGeometry({positions:i,width:G.polyline.width}):new l.PolylineGeometry({positions:i,width:G.polyline.width})}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;const i=this.getGeometry();if(!i)return;const e=new l.GeometryInstance({geometry:i,id:this.drawData.id});return i?this.drawData.clampToGround?new l.GroundPolylinePrimitive({geometryInstances:e,appearance:this.appearance,asynchronous:!1}):(this.linePrimitiveCollection.removeAll(),this.linePrimitiveCollection.add(new l.Primitive({geometryInstances:e,appearance:this.appearance,asynchronous:!1})),this.linePrimitiveCollection.add(new l.Primitive({geometryInstances:e,appearance:this.appearanceTran,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.linePrimitiveCollection):void 0}setAppearance(i){i?this.appearance=i:(this.appearance=new l.PolylineMaterialAppearance({material:new l.Material({fabric:{type:"Color",uniforms:{color:l.Color.fromCssColorString(G.polyline.color)}}})}),this.appearanceTran=new l.MaterialAppearance({material:new l.Material({fabric:{type:"Color",uniforms:{color:new l.Color(0,0,0,0)}}})}),this.depthFailAppearance=new l.PolylineMaterialAppearance({material:l.Material.fromType(l.Material.PolylineDashType,{color:l.Color.fromCssColorString(G.polyline.depthFailColor)})}))}}class N extends s{positions;drawData;depthFailAppearance;constructor(i){super(),this.drawData=i,this.positions=i.positions,this.setAppearance()}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;if(this.positions.length<3)return;const i=JSON.parse(JSON.stringify(this.positions)),e=[new l.GeometryInstance({geometry:new l.PolygonGeometry({polygonHierarchy:new l.PolygonHierarchy(i),perPositionHeight:!0}),id:`${this.drawData.id}-polygon`})];return this.drawData.clampToGround?new l.GroundPrimitive({geometryInstances:e,appearance:this.appearance,asynchronous:!1}):new l.Primitive({geometryInstances:e,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})}setAppearance(){this.appearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.color)})}),this.depthFailAppearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.depthFailColor)})})}}class B extends s{positions;drawData;depthFailAppearance;primitiveCollection;constructor(i){super(),this.drawData=i,this.positions=i.positions,this.primitiveCollection=new l.PrimitiveCollection,this.setAppearance()}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;if(this.positions.length<2)return;this.primitiveCollection.removeAll();const i=JSON.parse(JSON.stringify(this.positions)),e=this.drawData.clampToGround?t(i[0],i[1]):n(i[0],i[1]);if(!e)return;const s=l.Cartographic.fromCartesian(i[0]).height,o=[new l.GeometryInstance({geometry:new l.CircleGeometry({center:i[0],height:s,radius:e}),id:`${this.drawData.id}`})];return this.drawData.clampToGround?this.primitiveCollection.add(new l.GroundPrimitive({geometryInstances:o,appearance:this.appearance,asynchronous:!1})):this.primitiveCollection.add(new l.Primitive({geometryInstances:o,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.primitiveCollection}setAppearance(){this.appearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.color)})}),this.depthFailAppearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.depthFailColor)})})}}class O extends s{positions;drawData;depthFailAppearance;primitiveCollection;constructor(i){super(),this.drawData=i,this.positions=i.positions,this.primitiveCollection=new l.PrimitiveCollection,this.setAppearance()}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;if(this.positions.length<2)return this.primitiveCollection;this.primitiveCollection.removeAll();const i=JSON.parse(JSON.stringify(this.positions));i.length=2;const e=l.Cartographic.fromCartesian(i[0]).height,t=l.Rectangle.fromCartesianArray(i),n=[new l.GeometryInstance({geometry:new l.RectangleGeometry({rectangle:t,height:e}),id:`${this.drawData.id}`})];return this.drawData.clampToGround?this.primitiveCollection.add(new l.GroundPrimitive({geometryInstances:n,appearance:this.appearance,asynchronous:!1})):this.primitiveCollection.add(new l.Primitive({geometryInstances:n,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.primitiveCollection}setAppearance(){this.appearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.color)})}),this.depthFailAppearance=new l.MaterialAppearance({material:l.Material.fromType("Color",{color:l.Color.fromCssColorString(G.polygon.depthFailColor)})})}}class V extends s{drawData;labelCollection;measureDivs;cesiumWidget;viewer;constructor(i,e){super(),this.viewer=e,this.cesiumWidget=e._element.getElementsByClassName("cesium-widget")[0],this.drawData=i,this.labelCollection=new l.LabelCollection({scene:e.scene}),this.drawData.measureLabel&&this.setAppearance(),this.measureDivs=[],this.renderDivPosition()}getPrimitive(){return this.drawData.isEditing&&this.drawData.measureLabel?"point"===this.drawData.shape?(this.updatePointDivLabel(),this.labelCollection):this.drawData.shapePositions.length>=2?(this.updateUnit(this.drawData.measureUnit),this.labelCollection):void 0:this.labelCollection}updateUnit(s){if("point"===this.drawData.shape)return;this.drawData.measureUnit=s,this.clearAllDiv();const o=(s=>{let{shapePositions:o,positions:a,shape:r,clampToGround:l,measureUnit:d}=s;o||(o=a),l||(l=!1);const[p,c]=x(d),h=F(p);s.measureUnit=[p,c];const m=[];if("polyline"===r&&(M(a,l,m,p),m.push({value:0,unit:p,position:a[0],positions:a,prefixText:"起点"}),m.push({value:Number(m.reduce((i,e)=>i+e.value,0).toFixed(2)),unit:p,position:a[a.length-1],positions:a})),"vertical-line"!==r&&"vertical-surface-line"!==r||(M(o,l,m,p),m.length&&(m[0].position=o[0])),"polygon"===r){M(o,l,m,p);const t=U(i(o),h,c);m.push({value:Number(t.toFixed(2)),unit:c,position:e(o),positions:o})}if("rectangle"===r){M(o,l,m,p);const t=U(i(o),h,c);m.push({value:Number(t.toFixed(2)),unit:c,position:e(o),positions:o})}if("circle"===r){const i=l?t(a[0],a[1]):n(a[0],a[1]);m.push({value:Number(T(i,"m",p).toFixed(2)),unit:p,position:a[1],positions:a,prefixText:"半径"});const e=U(i*i*Math.PI,p,c);i>0&&m.push({value:Number(e.toFixed(2)),unit:c,position:a[0],positions:a})}return m})(this.drawData);this.drawData.measureResult=o,o.forEach((i,e)=>{let t="";i.prefixText?(t=`${i.prefixText}`,i.value&&(t+=`:${i.value}${i.unit}`)):t+=`${i.value}${i.unit}`;const n=this.createDiv(`measure-label-${this.drawData.id}-${e}`,t);this.measureDivs.push({position:i.position,divEle:n})})}updatePointDivLabel(){this.clearAllDiv(),this.drawData.positions.forEach(i=>{const e=o(i),t=this.createDiv(`measure-label-${this.drawData.id}-0`,`经度：${e.longitude.toFixed(6)}\n纬度：${e.latitude.toFixed(6)}\n高度：${e.height.toFixed(6)}`);this.measureDivs.push({position:i,divEle:t})})}renderDivPosition(){this.viewer.scene.postRender.addEventListener(()=>{this.measureDivs.forEach(i=>{const e=this.viewer.scene.cartesianToCanvasCoordinates(i.position);if(e){i.divEle.style.display="block";const t=i.divEle.getBoundingClientRect();i.divEle.style.left=e.x-t.width/2+"px",i.divEle.style.top=e.y-t.height+"px"}else i.divEle.style.display="none"})})}destroy(){super.destroy(),this.clearAllDiv()}setAppearance(){}clearAllDiv(){this.measureDivs.forEach(i=>{i.divEle.remove()}),this.measureDivs=[]}createDiv(i,e,t=48){const n=`\n        <div style="\n            background: rgba(0, 0, 0, 0.6);\n            color: white;\n            border-radius: 5px;\n            padding: 0 10px 0 10px;\n            font-size: 14px;\n            white-space: nowrap;\n            pointer-events: none;\n        ">\n            ${e.split("\n").map(i=>`\n        <div style="height: 24px; line-height: 24px">\n            ${i}\n        </div>\n        `).join(" ")}\n        </div>\n        <div style="\n            height: ${t}px;\n            width: 2px;\n            background: rgba(0, 0, 0, 0.6);\n            margin: auto;\n        ">\n        </div>\n    `,s=document.createElement("div");return s.id=i,s.innerHTML=n,s.style.position="absolute",s.style.pointerEvents="none",s.className=`measure-label measure-label-${this.drawData.id}`,this.cesiumWidget.appendChild(s),s}}const K="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAQBJREFUWEft2MsNgkAQBuAZtABCBctBErvATryiRRibkKudGKvgwMFtQGIBumOAYAxCArsTs4fZ8w758032wSJ4PtDzfCABXTvEKhjmhXpka+0a6rueNWB0KgmAdLVLYq6QbAHDvEwDgksdzOAz5pKUgK6tFkERnCogq3iq1Ng8ERRBS4HBjTrKywMAqjnfJCKFAGlTg3ieU9vOJV1lq2O/bjhgcyv59yBt8LXpXzLYBFsE2toKojHX+z75kWc8iwsV0PLm8XVLArotivp/RFrsYiiCLnp1rQiKoKWAHHWWcJ8yZsFF8zbj5eNRt9VwPRp1hGyCrq0cq5eArrLeC74BlkT4KR3TrCoAAAAASUVORK5CYII=",L="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAY9JREFUWEftmNFRwzAMhiVYAMoC5Y50jjAJ9LFliMIQNI/NJtA1CA9hAHIsgMWZYC5xHVtNajcHzqtl+ctvSZaNMPIPR84HEXDoDv1tBc/XxRMCpFaVEPNqcTXvq6RTwbOsSE8FTfUFBOKNE05NQsxRiK3u4/MEy49F8myDdwJOstcNEN32VWCouhHQu4JetnYPp84tVr4uHl8OGofvd7Ocw8kGnKwL4jjk2lTLhLU2y0guGgE7pI8KdsVkuBhEzDtPGstYEEAkmstyMcmKFRDcN9WyjUk774AKQEE1IW1jyt47IACV1XJ22VRNQqKgN70Im9qyAIASbRdST4qunjEQoB3S1tAGBATQY05iy7ObEDdHLzMmOFPi6KBBFLTBuSC9A5rg6pijqSm79TrpHRC021o7IdrZfbwy8wNpztYacgRlhtuitu38b3E/rt9Z/w+Q9czBVtV9RCpX7I7adTKw2QBAIFy7njz2Bvy+OGXFighS9pvMDjWVdXlKHrg/xFaQ6/DQdhFwqKJRwaEKfgEJRgs46ima/wAAAABJRU5ErkJggg==",H="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAMdJREFUWEdjZBjkgHGQu49h1IGUxtBoCI6GIKUhQKn+0TQ4GoKUhgCl+kfT4GgIUhoClOofTYM0DUGh6bfrGRgYFSi1BJ9+xn//Dr7NVluASw3eKBaadvs/LR0HM/sfI4Pjh0zVA9jswulAgenXFZj+s9ynjwP/KH7I1HxAkgNBioWn3kr4z8RkT1tH/n/wLlO1kawopq3DiDN9tJghLpxwqxoNwdEQpDQEKNU/mgZHQ5DSEKBU/2gaHA1BSkOAUv2jaXDYhyAAbjwcKU1UyjYAAAAASUVORK5CYII=",Q="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAkJJREFUWEftl19SwkAMxpPCARAvgDPijKewnER4BA8hHEJ5FE8CnsIZccZ6AJEDMF1Ny5Zu/6bNMvQBXmk3vyZfvmQRGv7DhvPBGVBaIasZ7M4/XwhoM74eScH0+9YAAzilhuHByttMbq5sQFoBNOE0lh1IMeDF83qJAG52tuSQIsBiODuZrA14+fQxVIhBUwSqA1hFmURcHPQIAIiLuo1TG5CguvP14z/Z1EcYtHzVi4ARpj7sXh3V/iLw30l/ULdhRIAUtDN/723Ht56RUYTpZtyf6f/qwtF7YkAdPAtQAmbdB08KSMF/Hm4WRRmpCkjeyWmc0hJHVlLSiaQ3gHYv/IidR7rM+6CDPZX7ZCFg0ueoW7fj/kqiLfoQ6u7DGcWQuYDHgNNQVSAzAZNwgQkjpDJHXldUSm1DDrTv01nHnmHmOQtGCpA3vsJwnJJ35mvXUbBkySJD5ylAPR04B54EMD7C4kJGBbMkdJn16BK3/FZq21GOc8eZ17lNYmZSeeHA76cgOZlOPpMse9G8zgUMOo3ErWC631c8H3Fk22bKlolCHzQgLRq1rk4ZHGtZIEjSUJneqo46zvhkAXI1VhWQe27pLOYe1FhAXapGLqzhddN3yYLQV9/myg9vwQQR3EdEGkz6pAL09KXJuECFUYIrAFcu8edqazDtk9nhOVZSBF4b0NhUIjM3Q0nhRCU2djtj4uznjvC6qc8XZTCer7gmbWTOOqDegpQCV3JRT+rRWgbrdCjnnTMgJ0tHsxlpcM77f6iGZThXF5iUAAAAAElFTkSuQmCC";class j{static editUI;_editUi;viewer;_editUiPosition=null;_editPointPrimitive=null;_drawEditEvent;elementId="draw-edit-ui";constructor(i,e){this._editUi=null,this.viewer=i,this.create(),this.setVisible(!1),this.renderPosition(),this._drawEditEvent=e}create(){if(this._editUi=document.getElementById(this.elementId),this._editUi)return this._editUi;const i=document.createElement("DIV");i.id=this.elementId,i.className="draw-edit-ui";const e=document.createElement("DIV");e.title="点击移动节点";const t=document.createElement("img");t.src=Q,t.className="draw-edit-icon",e.appendChild(t),e.addEventListener("click",()=>{this._drawEditEvent.drawEditMove&&this._drawEditEvent.drawEditMove(this._editPointPrimitive)});const n=document.createElement("DIV");n.id="addPoint";const s=document.createElement("img");s.src=K,s.title="点击添加节点",s.className="draw-edit-icon",n.appendChild(s),n.addEventListener("click",()=>{this._drawEditEvent.drawEditAdd&&this._drawEditEvent.drawEditAdd(this._editPointPrimitive)});const o=document.createElement("DIV"),a=document.createElement("img");o.id="removePoint",a.src=H,a.title="点击删除节点",a.className="draw-edit-icon",o.appendChild(a),o.addEventListener("click",()=>{this._drawEditEvent.drawEditRemove&&this._drawEditEvent.drawEditRemove(this._editPointPrimitive)});const r=document.createElement("DIV"),l=document.createElement("img");l.src=L,l.title="点击删除绘制",l.className="draw-edit-icon",r.appendChild(l),r.addEventListener("click",()=>{this._drawEditEvent.drawDelete&&this._drawEditEvent.drawDelete(this._editPointPrimitive)}),i.appendChild(e),i.appendChild(n),i.appendChild(o),i.appendChild(r),document.body.appendChild(i),this._editUi=i}setAddElementStatus(i){const e=document.getElementById("addPoint"),t=document.getElementById("removePoint");e&&(e.style.display=i?"block":"none"),t&&(t.style.display=i?"block":"none")}static createEditUi(i,e){return j.editUI||(j.editUI=new j(i,e)),j.editUI}showAt(i,e,t){this.setVisible(!0),this._editUiPosition=i,this._editPointPrimitive=e,this.setAddElementStatus(!["point","circle","rectangle","vertical-line"].includes(t))}setVisible(i){this._editUi&&(this._editUi.style.display=i?"flex":"none")}renderPosition(){this.viewer.scene.postRender.addEventListener(()=>{if(this._editUiPosition&&this._editUi&&"flex"===this._editUi.style.display){const i=this.viewer.scene.cartesianToCanvasCoordinates(this._editUiPosition);this._editUi.style.position="fixed",this._editUi.style.top=i.y-28+"px",this._editUi.style.left=`${i.x+15}px`}})}destroy(){j.editUI&&(this._editUi&&this._editUi.parentNode.removeChild(this._editUi),this._editUi=null)}}const W=i=>{let e;const t=[];let n=new l.Cartesian3(0,0,0);const s=[];let o,p,c,h;const m=G.point;let u=!1;((i,e)=>{const t=i.scene,n=new l.ScreenSpaceEventHandler(t.canvas);let s;i.cesiumWidget.screenSpaceEventHandler.removeInputAction(l.ScreenSpaceEventType.LEFT_DOUBLE_CLICK),n.setInputAction(n=>{const o=t.pickPosition(n.position),a=(new Date).getTime();if(s&&a-s<270){const t=i.scene.pick(n.position);return void e(d.DRAW_DB_CLICK,{position:o,pickPrimitive:t?.primitive,windowPosition:n.position})}e(d.DRAW_ADD,{position:o}),s=(new Date).getTime()},l.ScreenSpaceEventType.LEFT_CLICK),n.setInputAction(n=>{const s=i.scene.pick(n.endPosition),o=t.pickPosition(n.endPosition);e(d.DRAW_MOVE,{position:o,pickPrimitive:s?.primitive,windowPosition:n.endPosition}),s&&e(d.DRAW_PICK,{position:o,pickPrimitive:s?.primitive,windowPosition:n.endPosition})},l.ScreenSpaceEventType.MOUSE_MOVE),n.setInputAction(()=>{e(d.DRAW_RIGHT_CLICK,{})},l.ScreenSpaceEventType.RIGHT_CLICK)})(i,(i,e)=>{o&&(["drawDbClick","drawPick","drawMove","drawRightClick"].includes(i)||o.isEditing)&&f[i]?.(e)});const v=new l.PrimitiveCollection;v.destroyPrimitives=!1,i.scene.primitives.add(v);const A=i=>{const e=s.findIndex(e=>e.id===i),t=s[e];t.positions.length=0,s.splice(e,1),x.drawRemove&&x.drawRemove(t),setTimeout(()=>{t.measurePrimitive?.clearAllDiv(),v.remove(t?.primitives)},300)},w=()=>{i._element.style.cursor="default",n=new l.Cartesian3(0,0,0),o.positions.pop(),o.isDisAdd=!0,setTimeout(()=>{o.isEditing=!1,o.isDisAdd=!1,x.drawEnd&&x.drawEnd(o),o={}},300),p=void 0,c&&(o.pointPrimitives.remove(c),c=void 0),b()},g=i=>{const e=new k(i);i.primitives.add(e)},C=i=>{const e=new N(i);i.primitives.add(e)},E=i=>{const e=new B(i);i.primitives.add(e)},y=i=>{const e=new O(i);i.primitives.add(e)},D=e=>{const t=new V(e,i);e.primitives.add(t),e.measurePrimitive=t,e.primitives.raiseToTop(t)},f={drawAdd:({position:i})=>{if(o.positions.push(i),u=!1,T.id)return x.drawEditEnd&&x.drawEditEnd(o),T.id="",void w();const e=M(i,o);x.drawAdd&&x.drawAdd(i,o),"point"!==o.shape&&"vertical-surface-line"!==o.shape||w(),"vertical-line"===o.shape&&o.positions.length<=2&&t.push(e.id),["circle","rectangle","vertical-line"].includes(o.shape)&&o.positions.length>2&&("vertical-line"===o.shape&&(e.position=c.position),w())},drawMove:({position:i,windowPosition:e})=>{if(u=!0,R(),i&&!o.isDisAdd&&o.isEditing){if(b(e),T.id)o.positions.splice(T.index,1,i),T.pointPrimitive.position=i;else{const e=o.positions.findIndex(i=>i.x===n.x&&i.y===n.y&&i.z===n.z);o.positions.push(i),-1!==e&&o.positions.splice(e,1),c&&o.pointPrimitives.remove(c),c=M(i,o)}n=i,x.drawMove&&x.drawMove(i,o)}},drawPick:({pickPrimitive:i,windowPosition:e})=>{o.isEditing||i instanceof l.PointPrimitive&&P(i,e)},drawDbClick:({position:i,windowPosition:e,pickPrimitive:t})=>{o.isEditing?w():!o.isEditing&&t&&I(i,e,t)},drawRightClick:()=>{o.isEditing?(()=>{if(T.id)return T.id="",o.isDisAdd=!0,o.isEditing=!0,T.originPosition?(o.positions.splice(T.index,1,T.originPosition),T.pointPrimitive.position=T.originPosition):o?.positions.splice(T.index,1),x.drawEditEnd&&x.drawEditEnd(o),setTimeout(()=>{o.isEditing=!1,o.isDisAdd=!1},300),n=new l.Cartesian3(0,0,0),p=void 0,void b();if(["polyline","polygon"].includes(o.shape)&&o.positions.length>2){const i=u?2:1,e=o.pointPrimitives.get(o.positions.length-i);return o.pointPrimitives.remove(e),void o?.positions.splice(o.positions.length-i,1)}n=new l.Cartesian3(0,0,0),p=void 0,A(o.id),o={},b()})():e.setVisible(!1)}},P=(e,n)=>{const o=e.id.split("-")[0],a=s.find(i=>i.id===o);t.includes(e.id)||a&&a.edit&&(i._element.style.cursor="pointer",e.pixelSize=1.5*m.pixelSize,e.outlineWidth=1.5*m.outlineWidth,p=e,h.showAt(n,_.pointEnter),h.setVisible(!0))},I=(i,n,o)=>{if(o instanceof l.PointPrimitive){if(t.includes(o.id))return;const n=o.id.split("-")[0],a=s.find(i=>i.id===n);if(!a)return;if(!a.edit)return;e.showAt(i,o,a.shape),x.drawEditStart&&x.drawEditStart(a)}},b=e=>{if(h)return e&&o.positions?void(T.id?h.showAt(e,_.drawEditMove[o.shape]||_.drawEditMove.default):o.positions.length>1?h.showAt(e,_.drawMove[o.shape]||_.drawMove.default):h.showAt(e,_.drawStart[o.shape]||_.drawStart.default)):(i._element.style.cursor="default",void h.setVisible(!1));i._element.style.cursor="default"},R=()=>{p&&(p.pixelSize=m.pixelSize,p.outlineWidth=m.outlineWidth,b())},T={},U={drawEditAdd:t=>{e.setVisible(!1);const{id:n,index:s,drawData:a}=F(t),r=new l.Cartesian3(t.position.x,t.position.y,t.position.z);a?.positions.splice(s,0,r),o=a;const d=M(r,o);i._element.style.cursor="move",Object.assign(T,{id:n,index:s+1,pointPrimitive:d,originPosition:r}),o.isEditing=!0},drawEditMove:t=>{e.setVisible(!1),i._element.style.cursor="move";const{id:n,index:s,drawData:a}=F(t);o=a,Object.assign(T,{id:n,index:s,pointPrimitive:t,originPosition:new l.Cartesian3(t.position.x,t.position.y,t.position.z)}),o.isEditing=!0},drawEditRemove:i=>{e.setVisible(!1);const{index:t,drawData:n}=F(i);n.isEditing=!0,n.isDisAdd=!0,n?.positions.splice(t,1),n?.pointPrimitives.remove(i),x.drawEditEnd&&x.drawEditEnd(n),setTimeout(()=>{n.isEditing=!1,n.isDisAdd=!1},300)},drawDelete:i=>{e.setVisible(!1);const{id:t}=F(i);A(t)}};e=j.createEditUi(i,U);const F=i=>{const e=i.id.split("-")[0],t=s.find(i=>i.id===e),n=t.positions.findIndex(e=>e.x===i.position.x&&e.y===i.position.y&&e.z===i.position.z);return{id:e,drawData:t,index:n}},S=i=>{const e=new l.PrimitiveCollection,t=new l.PointPrimitiveCollection;e.add(t);const n={id:r(),edit:i.edit||!1,measure:i.measure||!1,measureLabel:i.measureLabel||!1,disDepthFail:i.disDepthFail||!1,measureUnit:i.measureUnit||["m"],isEditing:!0,shape:i.shape,positions:[],clampToGround:i.clampToGround,pointPrimitives:t,primitives:e};return v.add(e),n},M=(i,e)=>e.pointPrimitives.add({id:`${e.id}-${r()}`,position:i,...m,color:l.Color.fromCssColorString(m.color),outlineColor:l.Color.fromCssColorString(m.outlineColor)}),x={};return{draw:e=>{i._element.style.cursor="crosshair",h=a.createToolTip(i),p=void 0;const t=S(e);o=t,x.drawStart&&x.drawStart(t),s.push(t),e.shape,"polyline"===e.shape&&g(t),"vertical-line"===e.shape&&(t.clampToGround=!1,g(t)),"vertical-surface-line"===e.shape&&(t.clampToGround=!1,g(t)),"polygon"===e.shape&&(C(t),g(t)),"circle"===e.shape&&(g(t),E(t)),"rectangle"===e.shape&&(g(t),y(t)),e.measure&&D(t),t.primitives.raiseToTop(t.pointPrimitives)},remove:i=>{A(i.id)},removeAll:()=>{s.forEach(i=>{i.measurePrimitive?.clearAllDiv()}),v.removeAll(),s.length=0},setDrawStyle:i=>{Object.assign(G.point,i.point),Object.assign(G.polyline,i.polyline),Object.assign(G.polygon,i.polygon)},Event:x,updateMeasureUnit:(i,e)=>{if(-1===s.findIndex(e=>e.id===i.id))throw new Error("绘制对象不存在");const t=i.primitives._primitives.find(i=>i instanceof V);t&&t.updateUnit(e)}}};export{p as Draw,d as DrawEventType,W as createDrawHandler};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@ino-cesium/draw",
+  "type": "module",
+  "version": "0.0.15.beta.1",
+  "author": "koino",
+  "keywords": [
+    "cesium",
+    "ino-cesium",
+    "ino-cesium-draw"
+  ],
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./src/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist/*.d.ts",
+    "dist/*.js",
+    "README.MD"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "cesium": "*",
+    "html2canvas": "^1.4.1"
+  },
+  "dependencies": {
+    "@ino-cesium/common": "0.0.15.beta.1",
+    "html2canvas": "^1.4.1"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && rollup -c",
+    "clean": "rimraf dist",
+    "release": "pnpm publish --no-git-checks  --access public ",
+    "unpublish": "pnpm unpublish @ino-cesium/draw --force "
+  }
+}