交互绘制

通过Draw类可以在地图上实现各种交互绘制，保护点、线、面、矩形、圆形、管道等

一、使用案例

const draw = new THEngine.scene.Draw(viewer);
//绘制点
draw.drawPoint();
//绘制图标
draw.drawBillboard();
//绘制线段
draw.drawSinglePolyline();
//多线段
draw.drawMultiPolyline();
//绘制矩形
draw.drawRect();
//绘制圆
draw.drawCircle();
//绘制多边形
draw.drawPolygon();

二、Draw类支持的绘制类型

类型属性名	类型值	描述
Point	"Point"	entity 点
SinglePolyline	"SinglePolyline"	entity 单线
MultiLineString	"MultiLineString"	entity 多线
Polygon	"Polygon"	entity 面
Billboard	"Billboard"	entity 图标点
Wall	"Wall"	entity 墙
Pipeline	"Pipeline"	entity 管道
Rectangle	"Rectangle"	entity 矩形
Circle	"Circle"	entity 圆

三、案例效果

在线案例 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=init/draw.html.

四、Draw类方法

1. drawBillboard方法
   • 函数签名：async drawBillboard(options = {}, isContinuous = false)
   • 参数：
     • options：包含绘制点的相关选项，如polyline（连线）、billboard（billboard参数）。
     • isContinuous：是否连续绘制，true为连续绘制，false为关闭连续绘制，默认值为false。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如entities（实体数组）、positions（坐标数组）、featureCollection（特征集合）以及remove函数（用于移除绘制的实体）。
   • 功能描述：在场景中绘制广告牌。用户通过鼠标左键点击确定广告牌位置，可选择连续绘制多个广告牌或单次绘制。绘制过程中改变鼠标指针样式为crosshair，绘制完成后可通过返回的remove函数删除绘制的广告牌实体。
2. addBillboard方法
   • 函数签名：addBillboard(options)
   • 参数：
     • options：包含添加广告牌的相关选项，如positions（广告牌位置坐标数组）、style（广告牌样式配置）。
   • 返回值：返回包含添加结果相关信息的对象，如entities（实体数组，包含添加的广告牌实体）、positions（坐标数组）、featureCollection（特征集合）以及remove函数（用于移除添加的实体）。
   • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加广告牌实体。添加完成后可通过返回的remove函数删除添加的广告牌实体。
3. drawPoint方法
   • 函数签名：async drawPoint(options = {}, isContinuous = true)
   • 参数：
     • options：包含绘制点的相关选项，如polyline（连线）、point（点参数）。
     • isContinuous：是否连续绘制，true为连续绘制，false为关闭连续绘制，默认值为true。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如entities（实体数组，包含绘制的点及相关辅助实体）、positions（坐标数组）、endPointentities（端点实体数组）、featureCollection（特征集合）以及remove函数（用于移除绘制的实体）。
   • 功能描述：用于在场景中绘制点。用户通过鼠标左键点击绘制点，可选择连续绘制多个点或单次绘制。绘制过程中改变鼠标指针样式为crosshair，绘制完成后可通过返回的remove函数删除绘制的点及相关实体。
4. drawPointOne方法
   • 函数签名：async drawPointOne(options = {})
   • 参数：
     • options：包含绘制点的相关选项，如polyline（连线）、point（点参数）。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如entities（实体数组，包含绘制的点及相关辅助实体）、positions（坐标数组）、endPointentities（端点实体数组）、featureCollection（特征集合）以及remove函数（用于移除绘制的实体）。
   • 功能描述：该方法用于单次绘制一个点。用户通过鼠标左键点击确定点的位置，绘制过程中改变鼠标指针样式为crosshair。若之前有绘制的点及相关实体，会先进行清除，然后绘制新的点及相关辅助实体。绘制完成后可通过返回的remove函数删除绘制的实体。
5. drawSinglePolyline方法
   • 函数签名：async drawSinglePolyline(options = {})
   • 参数：
     • options：polyline属性对象，为空时使用默认样式，如polyline（连线的样式）。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制线段的两个端点坐标）、entities（实体数组，包含绘制的线段及端点相关实体）、distance（线段的距离）、bearing（线段的方位角）、polyline（绘制的线段实体）、labelEntity（可能存在的标签实体）以及remove函数（用于移除绘制的实体）。
   • 功能描述：在场景中绘制单条线段。用户通过鼠标左键点击确定线段的两个端点位置，绘制过程中改变鼠标指针样式为crosshair。绘制完成后，会计算线段的距离和方位角，并返回相关信息，同时可通过返回的remove函数删除绘制的线段及相关实体。
6. drawTriangleRule方法
   • 函数签名：async drawTriangleRule(options = {}, callBack)
   • 参数：
     • options：polyline属性对象，为空时使用默认样式，如polyline（连线的样式）、endpoint（端点）、levelPolyline（水平连线的样式）、verticalPolyline（竖直连线的样式）。
     • callBack：可选的回调函数。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，包含绘制三角尺相关的坐标）、entities（实体数组，包含绘制的三角尺各部分实体）、straightDistance（直线距离）、levelDistance（水平距离）、verticalDistance（竖直距离）、angle（夹角）、bearing（方位角）、ratio（坡率）以及remove函数（用于移除绘制的实体）。
   • 功能描述：用于绘制三角尺图形。该方法先调用drawSinglePolyline绘制一条线段，然后基于此线段计算并绘制水平和竖直连线，以及起点端点。同时计算直线距离、水平距离、竖直距离、夹角、方位角和坡率等信息，并在场景中添加相应的标签显示这些信息。绘制完成后可通过返回的remove函数删除绘制的三角尺及相关实体。
7. drawMultiPolyline方法
   • 函数签名：async drawMultiPolyline(options = {})
   • 参数：
     • options：包含绘制多条线段的相关选项，如polyline（连线样式）、endpoint（端点样式）、label（文字样式）。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制的多段线段的所有端点坐标）、entities（实体数组，包含绘制的多段线段、端点及标签相关实体）、polyline（绘制的多段线段实体）、labelEntities（标签实体数组）、endPointEntities（端点实体数组）、sumDistance（总长度）、divideDistances（每段线段的长度数组）、sumDistanceText（格式化后的总长度文本）、divideDistancesText（格式化后的每段线段长度文本数组）以及remove函数（用于移除绘制的实体）。
   • 功能描述：在场景中绘制多条线段。用户通过鼠标左键点击依次确定线段的各个端点位置，绘制过程中改变鼠标指针样式为crosshair。绘制过程中会添加端点实体和标签实体，标签实体用于显示起点、每段线段长度及总长度等信息。绘制完成后可通过返回的remove函数删除绘制的多段线段及相关实体。
8. addMultiPolyline方法
   • 函数签名：addMultiPolyline(options)
   • 参数：
     • options：包含添加多条线段的相关选项，如positions（线段位置坐标数组）、style（线段样式配置）。
   • 返回值：返回包含添加结果相关信息的对象，如positions（坐标数组）、entities（实体数组，包含添加的多段线段及端点相关实体）、polyline（添加的多段线段实体）、labelEntities（为null，表示无标签实体添加）、endPointEntities（端点实体数组）、sumDistance（总长度，初始值为0）、divideDistances（每段线段的长度，初始值为0）、sumDistanceText（空字符串）、divideDistancesText（空字符串）以及remove函数（用于移除添加的实体）。
   • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加多条线段及相关端点实体。添加完成后可通过返回的remove函数删除添加的多段线段及相关实体。
9. drawMultiPolylineSurface方法
   • 函数签名：async drawMultiPolylineSurface(options = {})
   • 参数：
     • options：包含绘制贴地线的相关选项，如polyline（连线样式）、endpoint（端点样式）、label（文字样式）。
   • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制贴地线的所有端点坐标）、entities（实体数组，包含绘制的贴地线、端点及标签相关实体）、polyline（绘制的贴地线实体）、sumDistance（总长度）、divideDistances（每段线段的长度数组）、sumDistanceText（格式化后的总长度文本）、divideDistancesText（格式化后的每段线段长度文本数组）以及remove函数（用于移除绘制的实体）。
   • 功能描述：用于绘制贴地线。用户通过鼠标左键点击依次确定贴地线的各个端点位置，绘制过程中改变鼠标指针样式为crosshair。绘制过程中会添加端点实体和标签实体，标签实体用于显示起点、每段线段长度及总长度等信息。绘制完成后可通过返回的remove函数删除绘制的贴地线及相关实体。
10. drawAnglePolyline方法
    • 函数签名：async drawAnglePolyline(options = {})
    • 参数：
      • options：包含绘制角度测量的相关选项，如polyline（连线样式）、endpoint（端点样式）、label（文字样式）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制角度相关的坐标）、entities（实体数组，包含绘制的角度测量相关线段及标签实体）、angle（夹角）以及remove函数（用于移除绘制的实体）。
    • 功能描述：在场景中进行角度测量绘制。用户通过鼠标左键点击确定角度的各个顶点位置，绘制过程中改变鼠标指针样式为crosshair。绘制完成后会计算夹角，并在场景中添加相应的标签显示夹角信息。绘制完成后可通过返回的remove函数删除绘制的角度测量相关实体。
11. drawRect方法
    • 函数签名：drawRect(options = {})
    • 参数：
      • options：包含绘制矩形的相关选项，如rectangle（rect属性对象，为空时使用默认样式）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制矩形的相关坐标）、entities（实体数组，包含绘制的矩形实体）、rect（矩形的相关参数数组）、entity（绘制的矩形实体）以及remove函数（用于移除绘制的实体）。
    • 功能描述：用于绘制矩形。用户通过鼠标左键点击确定矩形的对角顶点位置，绘制过程中改变鼠标指针样式为crosshair。绘制完成后可通过返回的remove函数删除绘制的矩形实体。
12. addRect方法
    • 函数签名：addRect(options)
    • 参数：
      • options：包含添加矩形的相关选项，如positions（矩形位置坐标数组）、style（矩形样式配置）。
    • 返回值：返回包含添加结果相关信息的对象，如positions（坐标数组）、entities（实体数组，包含添加的矩形实体）、entity（添加的矩形实体）以及remove函数（用于移除添加的实体）。
    • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加矩形实体。添加完成后可通过返回的remove函数删除添加的矩形实体。
13. drawPolygon方法
    • 函数签名：drawPolygon(options = {})
    • 参数：
      • options：polygon属性对象，为空时使用默认样式，如polygon（多边形）、polyline（线）、endpoint（端点）、label（是否显示测量信息）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制多边形的所有端点坐标）、entities（实体数组，包含绘制的多边形、轮廓线、端点及标签相关实体）、endPointEntities（端点实体数组）、polyline（轮廓线实体）、polygon（多边形实体）、labelEntity（标签实体）、area（多边形面积）、perimeter（多边形周长）、areaText（格式化后的面积文本）以及remove函数（用于移除绘制的实体）。
    • 功能描述：在场景中绘制多边形。用户通过鼠标左键点击依次确定多边形的各个顶点位置，绘制过程中改变鼠标指针样式为crosshair。绘制过程中会添加端点实体、轮廓线实体和标签实体，标签实体用于显示多边形的面积和周长信息。绘制完成后可通过返回的remove函数删除绘制的多边形及相关实体。
14. addPolygon方法
    • 函数签名：addPolygon(options)
    • 参数：
      • options：包含添加多边形的相关选项，如positions（多边形位置坐标数组）、style（多边形样式配置）。
    • 返回值：返回包含添加结果相关信息的对象，如positions（坐标数组）、entities（实体数组，包含添加的多边形、轮廓线及端点相关实体）、endPointEntities（端点实体数组）、polyline（轮廓线实体）、polygon（多边形实体）、labelEntity（为null，表示无标签实体添加）、area（面积，初始值为0）、perimeter（周长，初始值为0）、areaText（初始值为"0"）以及remove函数（用于移除添加的实体）。
    • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加多边形及相关轮廓线和端点实体。添加完成后可通过返回的remove函数删除添加的多边形及相关实体。
15. drawCircle方法
    • 函数签名：drawCircle(options = {})
    • 参数：
      • options：circle属性对象，为空时使用默认样式，如point（中心点）、ellipse（圆的参数）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制圆的相关坐标）、circleEntity（绘制的圆实体）、radius（圆的半径）、entities（实体数组，包含绘制的圆及中心点相关实体）以及remove函数（用于移除绘制的实体）。
    • 功能描述：用于绘制圆。用户通过鼠标左键点击确定圆的中心点和圆周上一点的位置，绘制过程中改变鼠标指针样式为crosshair。绘制完成后可通过返回的remove函数删除绘制的圆及相关实体。
16. addCircle方法
    • 函数签名：addCircle(options)
    • 参数：
      • options：包含添加圆的相关选项，如positions（圆的位置坐标数组）、style（圆的样式配置）。
    • 返回值：返回包含添加结果相关信息的对象，如positions（坐标数组）、circleEntity（添加的圆实体）、radius（圆的半径）、entities（实体数组，包含添加的圆实体）以及remove函数（用于移除添加的实体）。
    • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加圆实体。添加完成后可通过返回的remove函数删除添加的圆实体。
17. drawHeightMeasure方法
    • 函数签名：drawHeightMeasure(options, callBack)
    • 参数：
      • options：包含绘制高度测量的相关选项，如point（点样式）、ellipse（椭圆样式）、label（标签样式）、polyline（连线样式）。
      • callBack：回调函数。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，记录绘制高度测量相关的坐标）、entity（绘制的主要实体，如圆实体等）、radius（可能存在的半径值）、remove函数（用于移除绘制的实体） 。在绘制过程中还会涉及到circleEntity（圆实体）、lineEntity（竖线实体）、labelEntity（标签实体）等对象的创建和操作，相关信息也会体现在最终返回的结果中。
    • 功能描述：用于绘制高度测量相关图形。用户通过鼠标左键点击确定相关位置，绘制过程中改变鼠标指针样式为crosshair。首先点击确定一个点并添加相应的点实体，再次点击确定另一个点后，会绘制一个圆（根据ellipse样式），同时计算并设置圆的高度（根据第二个点的高度信息），添加表示高度的竖线（根据polyline样式）以及显示高度差值信息的标签（根据label样式）。绘制过程中会实时更新相关实体的属性（如圆的高度、标签的文本内容）。绘制完成后可通过返回的remove函数删除绘制的所有相关实体。
18. drawBearing方法
    • 函数签名：async drawBearing(options)
    • 参数：
      • options：包含绘制方位角的相关选项，如label（标签样式），还可能包含startPoint（起点样式）等。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如positions（坐标数组，来自drawSinglePolyline方法的结果）、entities（实体数组，包含绘制的线段、标签以及可能的起点实体）、distance（线段距离，来自drawSinglePolyline方法的结果）、bearing（方位角）、polyline（线段实体，来自drawSinglePolyline方法的结果）、labelEntity（标签实体） 以及remove函数（用于移除绘制的实体）。
    • 功能描述：用于绘制方位角。首先调用drawSinglePolyline方法绘制一条线段并获取相关结果。然后根据options中的label样式添加一个标签实体（如果不存在的话），并设置标签文本为计算得到的方位角信息（格式为"方位角：{角度值}°"）。如果options中存在startPoint，则添加一个起点实体。最后返回包含所有相关信息的对象，绘制完成后可通过返回的remove函数删除绘制的所有相关实体。
19. drawWall方法
    • 函数签名：async drawWall(options)
    • 参数：
      • options：包含绘制围墙的相关选项，如wall（围墙的配置对象）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如entities（实体数组，包含绘制的围墙实体）、positions（坐标数组，记录绘制围墙的位置坐标，来自drawMultiPolyline方法的结果）、wallEntity（围墙实体） 。
    • 功能描述：用于绘制围墙。首先调用drawMultiPolyline方法绘制多段线（这里作为围墙的基础路径），并在延迟500毫秒后移除绘制的多段线实体。然后根据options.wall配置对象，设置围墙的位置坐标（即drawMultiPolyline方法得到的坐标），计算围墙的最低点和最高点高度（通过TQMath.getMaxAndMinHeight方法获取基础坐标的高度信息，并结合默认高度值或配置中的高度值进行计算），并将这些高度信息设置到options.wall中。最后根据配置添加围墙实体，并返回包含相关信息的对象，可用于后续操作或移除绘制的围墙实体。
20. addWall方法
    • 函数签名：addWall(options)
    • 参数：
      • options：包含添加围墙的相关选项，如positions（围墙位置坐标数组）、style（围墙样式配置）。
    • 返回值：返回包含添加结果相关信息的对象，如entities（实体数组，包含添加的围墙实体）、positions（坐标数组）、wallEntity（添加的围墙实体） 。
    • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加围墙实体。首先根据style.wall配置计算围墙的最低点和最高点高度（计算方式与drawWall方法中类似，通过TQMath.getMaxAndMinHeight方法获取坐标高度信息并结合高度值计算），并设置到style.wall中。然后根据配置添加围墙实体，并返回包含相关信息的对象，添加完成后可通过返回的对象中的相关函数（如remove函数）删除添加的围墙实体。
21. drawPolylineVolume方法
    • 函数签名：async drawPolylineVolume(options)
    • 参数：
      • options：包含绘制管道的相关选项，如polylineVolume（管道的配置对象）。
    • 返回值：返回一个Promise对象，解析后包含绘制结果相关信息，如entities（实体数组，包含绘制的管道实体）、positions（坐标数组，记录绘制管道的位置坐标，来自drawMultiPolyline方法的结果）、options（原始的绘制选项）、polylineVolumeEntity（绘制的管道实体） 。
    • 功能描述：用于绘制管道。首先调用drawMultiPolyline方法绘制多段线（作为管道的路径），并在延迟500毫秒后移除绘制的多段线实体。然后将drawMultiPolyline方法得到的坐标设置到options.polylineVolume.positions中，根据配置添加管道实体，并返回包含相关信息的对象，绘制完成后可通过返回的对象中的相关函数（如remove函数）删除绘制的管道实体。
22. addPolylineVolume方法
    • 函数签名：addPolylineVolume(options)
    • 参数：
      • options：包含添加管道的相关选项，如positions（管道位置坐标数组）、style（管道样式配置）。
    • 返回值：返回包含添加结果相关信息的对象，如entities（实体数组，包含添加的管道实体）、positions（坐标数组）、polylineVolumeEntity（添加的管道实体） 。
    • 功能描述：根据给定的位置坐标数组和样式配置，在场景中添加管道实体。将style.polylineVolume.positions设置为给定的坐标数组，然后根据配置添加管道实体，并返回包含相关信息的对象，添加完成后可通过返回的对象中的相关函数（如remove函数）删除添加的管道实体。
23. removeAll方法
    • 函数签名：removeAll()
    • 参数：无
    • 返回值：无
    • 功能描述：该方法用于清除所有绘制图层。调用featureCollection的removeAll方法移除所有绘制的实体，同时调用pickerHelper的reset方法重置鼠标交互相关的设置，从而实现清除场景中所有绘制内容的目的。
24. reset方法
    • 函数签名：reset()
    • 参数：无
    • 返回值：无
    • 功能描述：主要用于重置操作。调用pickerHelper的reset方法，将鼠标交互相关的设置恢复到初始状态，例如可能重置鼠标指针样式、清除已有的鼠标点击事件监听等，以便进行新的绘制操作。
25. destroy方法
    • 函数签名：destroy()
    • 参数：无
    • 返回值：无
    • 功能描述：用于销毁Draw类相关的所有资源。首先调用removeAll方法清除所有绘制图层，然后调用pickerHelper的destroy方法销毁鼠标交互相关的资源，接着调用featureCollection的destroy方法销毁实体管理相关的资源，最后调用destroyObject方法销毁当前Draw类实例本身，释放所有占用的内存和资源。