改造SuperMap的DrawHandler接口,自定义绘制的图形样式
超图WebGL三维接口中有一个绘制的接口(new Cesium.DrawHandler(viewer, mode, clampMode),它封装了绘制完之后的式样,画完之后捕捉绘制完成的实体有一定的难度,而且样子也改不了,所以我对其Drawhandler的方法做了变形,只使用其绘制中的预览效果,最终画完的东西按我们自己的来,我们只抓取绘制的点。
原理是使用Drawhandler的 drawEvt,绘制完成事件的回调
handler.drawEvt.addEventListener(function(result){ console.log(result); });
下面是改装:
let draw = new Cesium.DrawHandler(_view.view, mode, _clampMode||Cesium.ClampMode.Space); draw.activate(); let style; if(!_style){ style={}; }else{ style=_style; } draw.drawEvt.addEventListener(function(result){ let DRAWENTITY; switch (mode) { case Cesium.DrawMode.Polygon:case 'Cesium.DrawMode.Polygon':case '2':case 2: style.polygon.hierarchy=result.object.polygon.hierarchy; _view.view.entities.remove(result.object); draw.clear(); DRAWENTITY= _view.view.entities.add({ id:entityProperty.id||null, description:entityProperty.description||null, name:entityProperty.name||'', show:entityProperty.show||true, polygon:style.polygon }); break; case Cesium.DrawMode.Point:case 'Cesium.DrawMode.Point':case '0':case 0: let pointPosition = result.object.position; _view.view.entities.remove(result.object); draw.clear(); DRAWENTITY=_view.view.entities.add({ id:entityProperty.id||null, description:entityProperty.description||null, name:entityProperty.name||'', show:entityProperty.show||true, position:pointPosition, point:style.point }); break; case Cesium.DrawMode.Line:case 'Cesium.DrawMode.Line':case '1':case 1: let lineStyle = style; lineStyle.polyline.positions= result.object.positions; _view.view.entities.remove(result.object); draw.clear(); DRAWENTITY=_view.view.entities.add({ id:entityProperty.id||null, description:entityProperty.description||null, name:entityProperty.name||'', show:entityProperty.show||true, polyline:lineStyle.polyline }); break; case Cesium.DrawMode.Marker:case 'Cesium.DrawMode.Marker':case '3':case 3: if(style.billboard) { let markerPosition = result.object.position; _view.view.entities.remove(result.object); draw.clear(); DRAWENTITY=_view.view.entities.add({ id:entityProperty.id||null, description:entityProperty.description||null, name:entityProperty.name||'', show:entityProperty.show||true, position:markerPosition, billboard:style.billboard }); }else{ DRAWENTITY=result.object } break; } if(_drawEndcallback){ _drawEndcallback(DRAWENTITY) } draw.deactivate(); });
这样就可以在回调中抓取到绘制的实体,当然,如果不想依赖于超图的接口,因为在绘制过程中预览效果用的是绿色的线,不好看。也可以基于纯Cesium自己写一个,我写的基于原始Cesium的绘制方法在下面这个链接里: