@ino-cesium/draw 0.0.1

package/README.MD

@@ -0,0 +1,39 @@
+# ino-cesium  绘制
+
+绘制
+
+
+## 使用
+``` ts
+
+  // 创建绘制工具
+  const drawHadler = createDrawHandler(viewer)
+
+  // 绘制
+  drawHadler.draw({
+    // "polyline" | "polygon" | "point" | "circle" | "rectangle" | "vertical-line" | "vertical-surface-line"
+    shape: "polyline",
+    edit: isEdit.value,
+    clampToGround: clampToGround.value,
+  })
+
+   // 删除绘制
+  drawHadler.remov(drawData)
+
+  // 删除所有绘制
+  drawHadler.removeAll()
+
+  // 绘制监听
+  drawHadler.Event.drawEnd = (drawData) => {
+    console.log('drawEnd', drawData)
+  }
+
+  drawHadler.Event.drawEditEnd = (drawData) => {
+    console.log('drawEditEnd', drawData)
+  }
+
+  drawHadler.Event.drawRemove = (drawData) => {
+    console.log('drawRemove', drawData)
+  }
+
+```

package/dist/index.d.ts

@@ -0,0 +1,433 @@
+import { Cartesian3, PointPrimitiveCollection, PrimitiveCollection, Primitive, Cartesian2, HeightReference, PointPrimitive, Viewer } from 'cesium';
+import { Common } from '@ino-cesium/common';
+
+/**
+ * 定义绘制事件类型
+ */
+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: Cartesian3, drawData: IDrawAttrInfo) => void;
+    /**
+     * 绘制移动事件
+     * @param positions 绘制点的位置数组
+     * @param drawData 绘制属性信息
+     */
+    drawMove?: (positions: 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: Cartesian3[];
+    /**
+     * 形状点的位置数组
+     */
+    shapePositions?: Cartesian3[];
+    /**
+     * 点图元集合
+     */
+    pointPrimitives: PointPrimitiveCollection;
+    /**
+     * 图元集合
+     */
+    primitives: PrimitiveCollection;
+    /**
+     * 测量结果数组
+     */
+    measureResult?: IMeasureResult[];
+}
+/**
+ * 定义事件动作类型
+ */
+type IEventActions = {
+    [key in DrawEventType]: (data: IEventData) => void;
+};
+/**
+ * 定义事件数据接口
+ */
+interface IEventData {
+    /**
+     * 事件位置
+     */
+    position: Cartesian3;
+    /**
+     * 拾取的图元
+     */
+    pickPrimitive?: Primitive;
+    /**
+     * 窗口位置
+     */
+    windowPosition: 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: PointPrimitive) => void;
+    /**
+     * 绘制编辑移动事件
+     * @param pointPrimitive 点图元
+     */
+    drawEditMove: (pointPrimitive: PointPrimitive) => void;
+    /**
+     * 绘制编辑移除事件
+     * @param pointPrimitive 点图元
+     */
+    drawEditRemove: (pointPrimitive: PointPrimitive) => void;
+    /**
+     * 绘制删除事件
+     * @param pointPrimitive 点图元
+     */
+    drawDelete: (pointPrimitive: PointPrimitive) => void;
+}
+/**
+ * 定义测量结果接口
+ */
+interface IMeasureResult {
+    /**
+     * 测量值
+     */
+    value: number;
+    /**
+     * 测量单位
+     */
+    unit: string;
+    /**
+     * 测量位置
+     */
+    position: Cartesian3;
+    /**
+     * 测量点的位置数组
+     */
+    positions: Cartesian3[];
+}
+/**
+ * 定义绘制形状类型
+ */
+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;
+    };
+    /**
+     * 标签样式
+     */
+    label: {
+        /**
+         * 标签字体
+         */
+        font: string;
+        /**
+         * 标签填充颜色
+         */
+        fillColor: string;
+        /**
+         * 标签轮廓颜色
+         */
+        outlineColor: string;
+        /**
+         * 标签背景颜色
+         */
+        backgroundColor: string;
+        /**
+         * 标签轮廓宽度
+         */
+        outlineWidth: number;
+        /**
+         * 标签像素偏移
+         */
+        pixelOffset: number[];
+        /**
+         * 标签背景填充
+         */
+        backgroundPadding: number[];
+        /**
+         * 标签缩放比例
+         */
+        scale: number;
+        /**
+         * 是否显示背景
+         */
+        showBackground: boolean;
+        /**
+         * 高度参考
+         */
+        heightReference: HeightReference;
+    };
+}
+
+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: Viewer) => IDrawHandler;
+
+export { types as Draw, createDrawHandler };

package/dist/index.js

@@ -0,0 +1 @@
+import*as i from"cesium";import{HeightReference as e,ScreenSpaceEventHandler as t,ScreenSpaceEventType as o,Cartesian2 as n,SceneTransforms as r,Cartesian3 as a,PrimitiveCollection as s,Color as l,PointPrimitiveCollection as d,PointPrimitive as p}from"cesium";import{calcArea as c,calcPoistionCenter as h,calcGeodesicDistance as m,calcSpaceDistance as u,BasePrimitive as A,Tooltip as g,numberId as w}from"@ino-cesium/common";var v=(i=>(i.DRAW_ADD="drawAdd",i.DRAW_MOVE="drawMove",i.DRAW_PICK="drawPick",i.DRAW_DB_CLICK="drawDbClick",i.DRAW_RIGHT_CLICK="drawRightClick",i))(v||{}),C=Object.freeze({__proto__:null,DrawEventType:v});const E="cm",f="厘米",y="m",D="米",P="km",I="千米",b="公里",R="㎡",U="平方厘米",M="㎡",F="平方米",T="km²",_="平方千米",k="平方公里",S="亩",G="公顷",O={cm:"cm²",m:"㎡",km:"km²","米":"平方米","千米":"平方千米","公里":"平方公里"},N=(i,e,t)=>e===t?i:i*function(i){switch(i){case R:return 1e4;case M:return 1;case T:return 1e-6;case U:return 1e4;case F:return 1;case _:case k:return 1e-6;case S:return.0015;case G:return 1e-4;default:return 1}}(t),B=i=>O[i],x=i=>{switch(i){case y:return 1;case E:case f:return 100;case P:return.001;case D:return 1;case I:case b:return.001;default:return 1}};const V=(i,e,t,o)=>{t.push(...i.map(((t,n)=>{const r=i[n+1];if(r){let i=e?m(t,r):u(t,r);return i=((i,e,t)=>e===t?i:i*x(t))(i,"m",o),{value:Number(i.toFixed(2)),unit:o,position:h([t,r]),positions:[t,r]}}return null})).filter((i=>i&&i.value>0)))},K=i=>{if(2===i.length)return i;let[e,t]=i;return t||(t=B(e)),[e,t]},L={drawStart:{circle:"单击左键绘制圆的中心点，单机右键取消绘制。",rectangle:"单击左键绘制矩形左上角。",point:"单击左键结束绘制，单机右键取消绘制。","vertical-surface-line":"单击左键结束绘制，单机右键取消绘制。",default:"单击左键绘制第一个节点，单机右键取消绘制。"},drawMove:{circle:"单击左键确定圆的半径并结束绘制，单机右键取消绘制。",rectangle:"单击左键结束绘制，单机右键取消绘制。","vertical-line":"单击左键结束绘制，单机右键取消绘制。","vertical-surface-line":"单击左键结束绘制，单机右键取消绘制。",default:"单机左键绘制下一个节点，双击左键结束绘制，单机右键撤销上次绘制。"},pointEnter:"双击左键编辑节点。",drawEditMove:{default:"移动鼠标修改节点，单击左键确定修改，单机右键取消修改。"}},H={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)"},label:{fillColor:"rgba(255,255,255,0.8)",outlineColor:"rgba(0,0,0,0.5)",backgroundColor:"rgba(0,0,0,0.5)",showBackground:!0,pixelOffset:[0,-15],backgroundPadding:[5,5],scale:.7,heightReference:e.CLAMP_TO_3D_TILE}};class Q extends A{positions;drawData;appearanceTran;depthFailAppearance;linePrimitiveCollection;constructor(e){super(),this.drawData=e,this.positions=e.positions,this.linePrimitiveCollection=new i.PrimitiveCollection,this.setAppearance()}getGeometry(){const e=((e,t)=>{let o=e;if("vertical-surface-line"===t&&e.length>=1){const t=e[0],n=i.Cartographic.fromCartesian(t),r=i.Math.toDegrees(n.longitude),a=i.Math.toDegrees(n.latitude),s=0;o=[i.Cartesian3.fromDegrees(r,a,n.height),i.Cartesian3.fromDegrees(r,a,s)]}if("polygon"===t&&e.length>=2&&(o=[...e,e[0]]),"vertical-line"===t&&e.length>=2){const t=e[0],n=e[1],r=i.Cartographic.fromCartesian(t),a=i.Cartographic.fromCartesian(n).height,s=i.Math.toDegrees(r.longitude),l=i.Math.toDegrees(r.latitude);o=[i.Cartesian3.fromDegrees(s,l,r.height),i.Cartesian3.fromDegrees(s,l,a)]}if("circle"===t&&e.length>=2){const t=u(e[0],e[1]),n=i.Cartographic.fromCartesian(e[0]).height,r=new i.CircleOutlineGeometry({center:e[0],height:n,radius:t}),a=i.CircleOutlineGeometry.createGeometry(r);let s=[];if(a){const e=[].slice.call(a.attributes.position.values);s=i.Cartesian3.unpackArray(e),s.push(s[0]),o=s}}if("rectangle"===t&&e.length>=2){const t=i.Cartographic.fromCartesian(e[0]).height,n=i.Rectangle.fromCartesianArray(e),r=new i.RectangleOutlineGeometry({rectangle:n,height:t}),a=i.RectangleOutlineGeometry.createGeometry(r);let s=[];if(a){const e=[].slice.call(a.attributes.position.values);s=i.Cartesian3.unpackArray(e),s.push(s[0]),o=s}}return o})(this.positions,this.drawData.shape);if(this.drawData.shapePositions=e,"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(!(e.length<2))return this.drawData.clampToGround?new i.GroundPolylineGeometry({positions:e,width:H.polyline.width}):new i.PolylineGeometry({positions:e,width:H.polyline.width})}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;const e=this.getGeometry();if(!e)return;const t=new i.GeometryInstance({geometry:e,id:this.drawData.id});return e?this.drawData.clampToGround?new i.GroundPolylinePrimitive({geometryInstances:t,appearance:this.appearance,asynchronous:!1}):(this.linePrimitiveCollection.removeAll(),this.linePrimitiveCollection.add(new i.Primitive({geometryInstances:t,appearance:this.appearance,asynchronous:!1})),this.linePrimitiveCollection.add(new i.Primitive({geometryInstances:t,appearance:this.appearanceTran,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.linePrimitiveCollection):void 0}setAppearance(e){e?this.appearance=e:(this.appearance=new i.PolylineMaterialAppearance({material:new i.Material({fabric:{type:"Color",uniforms:{color:i.Color.fromCssColorString(H.polyline.color)}}})}),this.appearanceTran=new i.MaterialAppearance({material:new i.Material({fabric:{type:"Color",uniforms:{color:new i.Color(0,0,0,0)}}})}),this.depthFailAppearance=new i.PolylineMaterialAppearance({material:i.Material.fromType(i.Material.PolylineDashType,{color:i.Color.fromCssColorString(H.polyline.depthFailColor)})}))}}class j extends A{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 e=JSON.parse(JSON.stringify(this.positions)),t=[new i.GeometryInstance({geometry:new i.PolygonGeometry({polygonHierarchy:new i.PolygonHierarchy(e),perPositionHeight:!0}),id:`${this.drawData.id}-polygon`})];return this.drawData.clampToGround?new i.GroundPrimitive({geometryInstances:t,appearance:this.appearance,asynchronous:!1}):new i.Primitive({geometryInstances:t,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})}setAppearance(){this.appearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.color)})}),this.depthFailAppearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.depthFailColor)})})}}class J extends A{positions;drawData;depthFailAppearance;primitiveCollection;constructor(e){super(),this.drawData=e,this.positions=e.positions,this.primitiveCollection=new i.PrimitiveCollection,this.setAppearance()}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;if(this.positions.length<2)return;this.primitiveCollection.removeAll();const e=JSON.parse(JSON.stringify(this.positions)),t=this.drawData.clampToGround?m(e[0],e[1]):u(e[0],e[1]);if(!t)return;const o=i.Cartographic.fromCartesian(e[0]).height,n=[new i.GeometryInstance({geometry:new i.CircleGeometry({center:e[0],height:o,radius:t}),id:`${this.drawData.id}`})];return this.drawData.clampToGround?this.primitiveCollection.add(new i.GroundPrimitive({geometryInstances:n,appearance:this.appearance,asynchronous:!1})):this.primitiveCollection.add(new i.Primitive({geometryInstances:n,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.primitiveCollection}setAppearance(){this.appearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.color)})}),this.depthFailAppearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.depthFailColor)})})}}class W extends A{positions;drawData;depthFailAppearance;primitiveCollection;constructor(e){super(),this.drawData=e,this.positions=e.positions,this.primitiveCollection=new i.PrimitiveCollection,this.setAppearance()}getPrimitive(){if(!this.drawData.isEditing)return this._primitive;if(this.positions.length<2)return this.primitiveCollection;this.primitiveCollection.removeAll();const e=JSON.parse(JSON.stringify(this.positions));e.length=2;const t=i.Cartographic.fromCartesian(e[0]).height,o=i.Rectangle.fromCartesianArray(e),n=[new i.GeometryInstance({geometry:new i.RectangleGeometry({rectangle:o,height:t}),id:`${this.drawData.id}`})];return this.drawData.clampToGround?this.primitiveCollection.add(new i.GroundPrimitive({geometryInstances:n,appearance:this.appearance,asynchronous:!1})):this.primitiveCollection.add(new i.Primitive({geometryInstances:n,appearance:this.appearance,depthFailAppearance:this.drawData.disDepthFail?void 0:this.depthFailAppearance,asynchronous:!1})),this.primitiveCollection}setAppearance(){this.appearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.color)})}),this.depthFailAppearance=new i.MaterialAppearance({material:i.Material.fromType("Color",{color:i.Color.fromCssColorString(H.polygon.depthFailColor)})})}}class z extends A{drawData;labelCollection;labelOptions;constructor(e,t){super(),this.drawData=e,this.labelCollection=new i.LabelCollection({scene:t.scene}),this.drawData.measureLabel&&this.setAppearance()}getPrimitive(){return this.drawData.isEditing?("point"===this.drawData.shape||this.drawData.shapePositions.length<2||this.updateUnit(this.drawData.measureUnit),this.labelCollection):this.labelCollection}updateUnit(e){this.drawData.measureUnit=e,this.labelCollection.removeAll();const t=(i=>{let{shapePositions:e,positions:t,shape:o,clampToGround:n,measureUnit:r}=i;e||(e=t),n||(n=!1);const[a,s]=K(r),l=B(a);i.measureUnit=[a,s];const d=[];if("polyline"===o&&(V(t,n,d,a),d.push({value:Number(d.reduce(((i,e)=>i+e.value),0).toFixed(2)),unit:a,position:t[t.length-1],positions:t})),"vertical-line"!==o&&"vertical-surface-line"!==o||(V(e,n,d,a),d.length&&(d[0].position=e[0])),"polygon"===o){V(e,n,d,a);const i=N(c(e),l,s);d.push({value:Number(i.toFixed(2)),unit:s,position:h(e),positions:e})}if("rectangle"===o){V(e,n,d,a);const i=N(c(e),l,s);d.push({value:Number(i.toFixed(2)),unit:s,position:h(e),positions:e})}if("circle"===o){const i=n?m(t[0],t[1]):u(t[0],t[1]),e=N(i*i*Math.PI,"m",s);i>0&&d.push({value:Number(e.toFixed(2)),unit:s,position:h(t),positions:t})}return d})(this.drawData);if(this.drawData.measureResult=t,this.drawData.measureLabel){const e=this.drawData.clampToGround?i.HeightReference.CLAMP_TO_GROUND:this.labelOptions?.heightReference;t.forEach((i=>{this.labelCollection.add({...this.labelOptions,position:i.position,text:i.value+i.unit,heightReference:e})}))}}setAppearance(){this.labelOptions={position:new i.Cartesian3(0,0,0),font:"20px sans-serif",fillColor:i.Color.fromCssColorString(H.label.fillColor),outlineColor:i.Color.fromCssColorString(H.label.outlineColor),showBackground:H.label.showBackground,backgroundColor:i.Color.fromCssColorString(H.label.backgroundColor),outlineWidth:1,pixelOffset:i.Cartesian2.fromArray(H.label.pixelOffset),backgroundPadding:i.Cartesian2.fromArray(H.label.backgroundPadding),scale:H.label.scale,disableDepthTestDistance:Number.POSITIVE_INFINITY,horizontalOrigin:0,verticalOrigin:1,heightReference:H.label.heightReference}}}const Y="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAQBJREFUWEft2MsNgkAQBuAZtABCBctBErvATryiRRibkKudGKvgwMFtQGIBumOAYAxCArsTs4fZ8w758032wSJ4PtDzfCABXTvEKhjmhXpka+0a6rueNWB0KgmAdLVLYq6QbAHDvEwDgksdzOAz5pKUgK6tFkERnCogq3iq1Ng8ERRBS4HBjTrKywMAqjnfJCKFAGlTg3ieU9vOJV1lq2O/bjhgcyv59yBt8LXpXzLYBFsE2toKojHX+z75kWc8iwsV0PLm8XVLArotivp/RFrsYiiCLnp1rQiKoKWAHHWWcJ8yZsFF8zbj5eNRt9VwPRp1hGyCrq0cq5eArrLeC74BlkT4KR3TrCoAAAAASUVORK5CYII=",X="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAY9JREFUWEftmNFRwzAMhiVYAMoC5Y50jjAJ9LFliMIQNI/NJtA1CA9hAHIsgMWZYC5xHVtNajcHzqtl+ctvSZaNMPIPR84HEXDoDv1tBc/XxRMCpFaVEPNqcTXvq6RTwbOsSE8FTfUFBOKNE05NQsxRiK3u4/MEy49F8myDdwJOstcNEN32VWCouhHQu4JetnYPp84tVr4uHl8OGofvd7Ocw8kGnKwL4jjk2lTLhLU2y0guGgE7pI8KdsVkuBhEzDtPGstYEEAkmstyMcmKFRDcN9WyjUk774AKQEE1IW1jyt47IACV1XJ22VRNQqKgN70Im9qyAIASbRdST4qunjEQoB3S1tAGBATQY05iy7ObEDdHLzMmOFPi6KBBFLTBuSC9A5rg6pijqSm79TrpHRC021o7IdrZfbwy8wNpztYacgRlhtuitu38b3E/rt9Z/w+Q9czBVtV9RCpX7I7adTKw2QBAIFy7njz2Bvy+OGXFighS9pvMDjWVdXlKHrg/xFaQ6/DQdhFwqKJRwaEKfgEJRgs46ima/wAAAABJRU5ErkJggg==",Z="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 ${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 o=document.createElement("DIV");o.id="addPoint";const n=document.createElement("img");n.src=Y,n.title="点击添加节点",n.className="draw-edit-icon",o.appendChild(n),o.addEventListener("click",(()=>{this._drawEditEvent.drawEditAdd&&this._drawEditEvent.drawEditAdd(this._editPointPrimitive)}));const r=document.createElement("DIV"),a=document.createElement("img");r.id="removePoint",a.src=Z,a.title="点击删除节点",a.className="draw-edit-icon",r.appendChild(a),r.addEventListener("click",(()=>{this._drawEditEvent.drawEditRemove&&this._drawEditEvent.drawEditRemove(this._editPointPrimitive)}));const s=document.createElement("DIV"),l=document.createElement("img");l.src=X,l.title="点击删除绘制",l.className="draw-edit-icon",s.appendChild(l),s.addEventListener("click",(()=>{this._drawEditEvent.drawDelete&&this._drawEditEvent.drawDelete(this._editPointPrimitive)})),i.appendChild(e),i.appendChild(o),i.appendChild(r),i.appendChild(s),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 $.editUI||($.editUI=new $(i,e)),$.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(){const i=this.viewer.scene;this.viewer.scene.postRender.addEventListener((()=>{if(this._editUiPosition&&this._editUi&&"flex"===this._editUi.style.display){const e=new n;r.wgs84ToWindowCoordinates(i,this._editUiPosition,e),this._editUi.style.position="fixed",this._editUi.style.top=e.y-28+"px",this._editUi.style.left=`${e.x+15}px`}}))}destroy(){$.editUI&&(this._editUi&&this._editUi.parentNode.removeChild(this._editUi),this._editUi=null)}}const ii=i=>{let e;const n=[];let r=new a(0,0,0);const c=[];let h,m,u,A;const C=H.point;let E=!1;((i,e)=>{const n=i.scene,r=new t(n.canvas);let a;i.cesiumWidget.screenSpaceEventHandler.removeInputAction(o.LEFT_DOUBLE_CLICK),r.setInputAction((t=>{const o=n.pickPosition(t.position),r=(new Date).getTime();if(a&&r-a<270){const n=i.scene.pick(t.position);e(v.DRAW_DB_CLICK,{position:o,pickPrimitive:n?.primitive,windowPosition:t.position})}else e(v.DRAW_ADD,{position:o}),a=(new Date).getTime()}),o.LEFT_CLICK),r.setInputAction((t=>{const o=i.scene.pick(t.endPosition),r=n.pickPosition(t.endPosition);e(v.DRAW_MOVE,{position:r,pickPrimitive:o?.primitive,windowPosition:t.endPosition}),o&&e(v.DRAW_PICK,{position:r,pickPrimitive:o?.primitive,windowPosition:t.endPosition})}),o.MOUSE_MOVE),r.setInputAction((()=>{e(v.DRAW_RIGHT_CLICK,{})}),o.RIGHT_CLICK)})(i,((i,e)=>{h&&(["drawDbClick","drawPick","drawMove","drawRightClick"].includes(i)||h.isEditing)&&M[i]?.(e)}));const f=new s;f.destroyPrimitives=!1,i.scene.primitives.add(f);const y=i=>{const e=c.findIndex((e=>e.id===i)),t=c[e];t.positions.length=0,c.splice(e,1),x.drawRemove&&x.drawRemove(t),setTimeout((()=>{f.remove(t?.primitives)}),300)},D=()=>{i._element.style.cursor="default",r=new a(0,0,0),h.positions.pop(),h.isEditing=!1,x.drawEnd&&x.drawEnd(h),m=void 0,u&&(h.pointPrimitives.remove(u),u=void 0),h={},_()},P=i=>{const e=new Q(i);i.primitives.add(e)},I=i=>{const e=new j(i);i.primitives.add(e)},b=i=>{const e=new J(i);i.primitives.add(e)},R=i=>{const e=new W(i);i.primitives.add(e)},U=e=>{const t=new z(e,i);e.primitives.add(t),e.primitives.raiseToTop(t)},M={drawAdd:({position:i})=>{if(h.positions.push(i),E=!1,S.id)return x.drawEditEnd&&x.drawEditEnd(h),S.id="",void D();const e=B(i,h);x.drawAdd&&x.drawAdd(i,h),"point"!==h.shape&&"vertical-surface-line"!==h.shape||D(),"vertical-line"===h.shape&&h.positions.length<=2&&n.push(e.id),["circle","rectangle","vertical-line"].includes(h.shape)&&h.positions.length>2&&("vertical-line"===h.shape&&(e.position=u.position),D())},drawMove:({position:i,windowPosition:e})=>{if(E=!0,k(),i&&!h.isDisAdd&&h.isEditing){if(_(e),S.id)h.positions.splice(S.index,1,i),S.pointPrimitive.position=i;else{const e=h.positions.findIndex((i=>i.x===r.x&&i.y===r.y&&i.z===r.z));h.positions.push(i),-1!==e&&h.positions.splice(e,1),u&&h.pointPrimitives.remove(u),u=B(i,h)}r=i,x.drawMove&&x.drawMove(i,h)}},drawPick:({pickPrimitive:i,windowPosition:e})=>{h.isEditing||i instanceof p&&F(i,e)},drawDbClick:({position:i,windowPosition:e,pickPrimitive:t})=>{h.isEditing?D():!h.isEditing&&t&&T(i,e,t)},drawRightClick:()=>{h.isEditing?(()=>{if(S.id)return S.id="",h.isDisAdd=!0,h.isEditing=!0,S.originPosition?(h.positions.splice(S.index,1,S.originPosition),S.pointPrimitive.position=S.originPosition):h?.positions.splice(S.index,1),x.drawEditEnd&&x.drawEditEnd(h),setTimeout((()=>{h.isEditing=!1,h.isDisAdd=!1}),300),r=new a(0,0,0),m=void 0,void _();if(["polyline","polygon"].includes(h.shape)&&h.positions.length>2){const i=E?2:1,e=h.pointPrimitives.get(h.positions.length-i);return h.pointPrimitives.remove(e),void h?.positions.splice(h.positions.length-i,1)}r=new a(0,0,0),m=void 0,y(h.id),h={},_()})():e.setVisible(!1)}},F=(e,t)=>{const o=e.id.split("-")[0],r=c.find((i=>i.id===o));n.includes(e.id)||r&&r.edit&&(i._element.style.cursor="pointer",e.pixelSize=1.5*C.pixelSize,e.outlineWidth=1.5*C.outlineWidth,m=e,A.showAt(t,L.pointEnter),A.setVisible(!0))},T=(i,t,o)=>{if(o instanceof p){if(n.includes(o.id))return;const t=o.id.split("-")[0],r=c.find((i=>i.id===t));if(!r)return;if(!r.edit)return;e.showAt(i,o,r.shape),x.drawEditStart&&x.drawEditStart(r)}},_=e=>{if(A)return e&&h.positions?void(S.id?A.showAt(e,L.drawEditMove[h.shape]||L.drawEditMove.default):h.positions.length>1?A.showAt(e,L.drawMove[h.shape]||L.drawMove.default):A.showAt(e,L.drawStart[h.shape]||L.drawStart.default)):(i._element.style.cursor="default",void A.setVisible(!1));i._element.style.cursor="default"},k=()=>{m&&(m.pixelSize=C.pixelSize,m.outlineWidth=C.outlineWidth,_())},S={},G={drawEditAdd:t=>{e.setVisible(!1);const{id:o,index:n,drawData:r}=O(t),s=new a(t.position.x,t.position.y,t.position.z);r?.positions.splice(n,0,s),h=r;const l=B(s,h);i._element.style.cursor="move",Object.assign(S,{id:o,index:n+1,pointPrimitive:l,originPosition:s}),h.isEditing=!0},drawEditMove:t=>{e.setVisible(!1),i._element.style.cursor="move";const{id:o,index:n,drawData:r}=O(t);h=r,Object.assign(S,{id:o,index:n,pointPrimitive:t,originPosition:new a(t.position.x,t.position.y,t.position.z)}),h.isEditing=!0},drawEditRemove:i=>{e.setVisible(!1);const{index:t,drawData:o}=O(i);o.isEditing=!0,o.isDisAdd=!0,o?.positions.splice(t,1),o?.pointPrimitives.remove(i),x.drawEditEnd&&x.drawEditEnd(o),setTimeout((()=>{o.isEditing=!1,o.isDisAdd=!1}),300)},drawDelete:i=>{e.setVisible(!1);const{id:t}=O(i);y(t)}};e=$.createEditUi(i,G);const O=i=>{const e=i.id.split("-")[0],t=c.find((i=>i.id===e)),o=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:o}},N=i=>{const e=new s,t=new d;e.add(t);const o={id:w(),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 f.add(e),o},B=(i,e)=>e.pointPrimitives.add({id:`${e.id}-${w()}`,position:i,...C,color:l.fromCssColorString(C.color),outlineColor:l.fromCssColorString(C.outlineColor)}),x={};return{draw:e=>{i._element.style.cursor="crosshair",A=g.createToolTip(),m=void 0;const t=N(e);h=t,x.drawStart&&x.drawStart(t),c.push(t),"polyline"===e.shape&&P(t),"vertical-line"===e.shape&&(t.clampToGround=!1,P(t)),"vertical-surface-line"===e.shape&&(t.clampToGround=!1,P(t)),"polygon"===e.shape&&(I(t),P(t)),"circle"===e.shape&&(P(t),b(t)),"rectangle"===e.shape&&(P(t),R(t)),e.measure&&U(t),t.primitives.raiseToTop(t.pointPrimitives)},remove:i=>{y(i.id)},removeAll:()=>{f.removeAll(),c.length=0},setDrawStyle:i=>{Object.assign(H.point,i.point),Object.assign(H.polyline,i.polyline),Object.assign(H.polygon,i.polygon)},Event:x,updateMeasureUnit:(i,e)=>{const t=i.primitives._primitives.find((i=>i instanceof z));t&&t.updateUnit(e)}}};export{C as Draw,ii as createDrawHandler};

package/package.json

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