SuperMap iClient3D for WebGL提供了三维动态标绘模块,支持用户在服务器端发布动态标绘服务,在客户端通过访问服务端发布的标绘服务来实现动态标绘与态势推演功能。用户可以在三维场景中方便灵活的标绘三维点标号、线面标号,并进行态势推演展示。
首先我们得做如下的准备工作:
首先,需要创建一个动态标绘总控对象,并为其指定标绘服务serverUrl与场景scene。
var plotting = cesium.Plotting.getInstance(serverUrl, scene);
创建一个标绘图层对象,并将标绘图层添加到scene中。
var plottingLayer = new cesium.PlottingLayer(scene, "plottingLayer"); scene.layers.add(plottingLayer);
其次,我们需要从动态标绘总控对象中获取标号库管理器对象。
var symbolLibManager = plotting.getSymbolLibManager();
最后,需要创建编辑控件和绘制控件,开始鼠标标绘和编辑。
创建编辑控件
var plotEditControl = new cesium.PlotEditControl(scene, plottingLayer);
创建绘制控件
var plotDrawControl = new cesium.PlotDrawControl(scene, plottingLayer);
标绘结束,激活编辑控件
plotDrawControl.drawFinishEvent.addEventListener(function () { plotEditControl.activate(); });
为了使得用户更加方便的进行标绘和编辑标号,SuperMap iClient3D for WebGL动态标绘提供了标绘和属性两个面板,初始化面板的代码如下:
初始化标绘面板
initPlotPanel("plotPanel", serverUrl, plotDrawControl, plotEditControl,plotting);
初始化属性面板
stylePanel = new StylePanel('stylePanel', plotEditControl, plotting);
到这里为止,动态标绘初始化工作已经完成,在客户端可以进行鼠标标绘了。
(1)鼠标标绘展示
鼠标左键单击标绘面板任一标号后,即可在三维场景上标绘相应标号:
(2)属性修改展示
标号标绘完成后,鼠标左键单击选中标号,属性面板会显示该选中对象的属性值,即可在属性面板上直接修改:
(3)标绘面板和属性面板展示
标号标绘完成后,鼠标左键单击选中标号,属性面板会显示该选中对象的属性值,即可在属性面板上直接修改:
SuperMap iClient3D for WebGL动态标绘技术中,支持编程实现动态标绘。编程标绘也需要首先创建动态标绘总控、标绘图层、标号库管理器对象、编辑控件与绘制控件,实现方法同“动态标绘专题-鼠标标绘”的第1、2、3、4部分内容,这里不再重复。
根据标号库编码、标号编码、位置点数组可以创建标号,语句如下:
plottingLayer.createSymbol(libID, code, points, function (even) { var geo = even.feature; }); // 其中,libID为标号库编码,code为标号编码,points为位置点数组,function (even){}为回调函数。
标号可以修改的属性分两部分存储,点标号独有的属性从geo.symbol里获取,而点标号和线面标号共有的属性从geo.symbolStyle里获取。下面的代码以少部分属性为例,3、标号属性列表具体列出标号的主要属性。
geo.scale = new cesium.Cartesian3(1, 1.0, 1.0); //缩放比例 geo. gridLineWidth = 6; //公告板模式线宽 geo.gridSurroundLineWidth = 4; //公告板模式衬线宽 geo.symbolStyle.surroundLineType = 1; //衬线类型 geo.symbolRank = 1; //标号级别 geo.lineSymbolID = 1; //点标号边线类型
属性名/属性接口 |
属性含义 |
点标号 |
线面标号 |
libID |
标号所属标号库ID,只读属性 |
支持 |
支持 |
code |
标号的code,只读属性 |
支持 |
支持 |
symbolName |
标号的名称,只读属性 |
支持 |
支持 |
symbolType |
标号几何类型,点标号、线面标号或者基本图元类型,只读属性 |
支持 |
支持 |
points |
标号的位置点,只读属性 |
支持 |
支持 |
visible |
是否可见 |
支持 |
支持 |
symbolTextStyle |
文本风格 |
支持 |
支持 |
symbolStyle |
标号风格 |
支持 |
支持 |
symbolStyle.lineColor |
线色,默认线色为红色 |
支持 |
支持 |
symbolStyle.lineWidth |
线宽 |
支持 |
支持 |
symbolStyle.fillSymbolID |
填充模式 |
支持 |
支持 |
symbolStyle.fillBackColor |
填充背景色,默认填充背景色为红色 |
支持 |
支持 |
symbolStyle.fillBackOpaque |
填充背景透明 |
支持 |
支持 |
symbolStyle.fillGradientMode |
渐变填充模式 |
支持 |
支持 |
symbolStyle. fillGradientAngle |
渐变填充角度 |
支持 |
支持 |
symbolStyle. fillGradientOffsetRatioY |
渐变填充竖直偏移 |
支持 |
支持 |
symbolStyle. fillGradientOffsetRatioX |
渐变填充水平偏移 |
支持 |
支持 |
symbolStyle. fillForeColor |
填充前景色,默认填充前景色为红色 |
支持 |
支持 |
symbolStyle. fillOpaqueRate |
填充透明度 |
支持 |
支持 |
symbolStyle.surroundLineColor |
衬线颜色 |
支持 |
支持 |
symbolStyle. surroundLineType |
衬线类型,默认无衬线 |
支持 |
支持 |
symbolStyle. surroundLindWidth |
衬线宽度 |
支持 |
支持 |
scale |
缩放角度 |
支持 |
不支持 |
rotate |
旋转角度 |
支持 |
不支持 |
modelScale |
模型缩放比例 |
支持 |
不支持 |
modelId |
模型ID |
支持 |
不支持 |
modelRotate |
模型旋转角度 |
支持 |
不支持 |
gridLineWidth |
公告板线宽 |
支持 |
不支持 |
gridSurroundLineWidth |
公告板衬线宽 |
支持 |
不支持 |
gridSymbolSize |
标号大小 |
支持 |
不支持 |
pictureSymbolSize |
标号图片模式图片大小 |
支持 |
不支持 |
picturePath |
标号图片模式的图片路径 |
支持 |
不支持 |
showMode |
显示模式 |
支持 |
不支持 |
isNegativeImage |
镜像 |
支持 |
不支持 |
symbolRank |
标号级别 |
支持 |
不支持 |
lineSymbolID |
边线类型 |
支持 |
不支持 |
态势推演的根本目的是迅速、准确地为决策者定下行动决心提供支持。三维由于其形象直观的特点,更是进行态势推演的最佳技术。
SuperMap iClient3D for WebGL 动态标绘技术提供了态势推演过程常用的7种动画:属性、闪烁、路径、旋转、比例、显隐和生长动画。
动画类型 |
描述 |
点标号 |
线面标号 |
属性动画 |
能够按照设定的起始和终止状态,在指定时间内渐变,可以设置主线颜色,主线宽度,衬线颜色,衬线宽度等。 |
支持 |
支持 |
闪烁动画 |
能够按设定标号的闪烁间隔,进行颜色切换闪烁或者显隐切换闪烁。 |
支持 |
支持 |
路径动画 |
能够设定标号的移动轨迹(曲线、折线),方向(沿着轨迹线的切线方向、不沿着轨迹线的切线方向),使标号按照轨迹移动。 |
支持 |
不支持 |
旋转动画 |
能够按设定的时间,按照起始角度、旋转终止角度,进行旋转。 |
支持 |
不支持 |
比例动画 |
能够按设定的时间,缩放指定的比例。 |
支持 |
不支持 |
显隐动画 |
能够设置标号在一定时间内是否可见。 |
支持 |
支持 |
生长动画 |
能够设置标号的生长比例和生长时间,在指定时间内完成标号生长。 |
不支持 |
支持 |
SuperMap iClient3D for WebGL动态标绘技术中态势推演主要是利用GOAnimationManager类(动画管理类)完成态势推演功能。为方便用户顺利实现态势推演功能,下面列出GOAnimationManager类使用方法。
(1)获取动画管理对象
animationManager = plotting.getGOAnimationManager();
(2)创建动画
animationManager. createAnimation(animationType, name, goFeature); // animationType表示动画类型,name为动画名称,goFeature为动画对象 // 注意:在创建动画时,必须选中想要创建动画的对象
(3)执行动画
animationManager.execute();
(4)播放动画
animationManager.play(); // 注意:动画播放时可以单个播放,也可以多个动画一起播放。
(5)暂停动画
animationManager. pause ();
(6)停止播放动画
animationManager. stop ();
(7)重置动画
animationManager. reset();
SuperMap iClient3D for WebGL动态标绘技术支持态势图管理,包括保存态势图到服务器、打开态势图文件、删除态势图文件、上传态势图文件等功能。态势图管理的各项功能是通过SitDataManager类来完成的。
首先,我们需要通过下面的语句获取态势图管理对象:
sitDataManager = plotting.getSitDataManager();
态势图管理的功能将在下表中列出。
序号 |
功能描述 |
实现语句 |
1 |
保存当前态势图数据到服务器 |
sitDataManager . saveSmlFile(); |
2 |
打开指定的已发布态势图文件 |
sitDataManager .openSmlFileOnServer(smlFileName); |
3 |
删除指定的已发布态势图文件 |
sitDataManager .deleteSmlFileOnServer(smlFileName); |
4 |
上传态势图文件 |
sitDataManager .uploadSmlFile(fileId, success, fail); |
态势图管理如下图: