WebGL对接标绘功能流程及注意事项

---

自9D版本开始SuperMap iClient3D for WebGL（简称WebGL）支持对接标绘功能，并且研发在第一时间提供了标绘范例，编写了标绘控件，但是还是有客户疑惑，如何从零开始在WebGL上对接标绘功能？对接标绘功能有哪些地方需要注意？如何做一套符合自己业务需求的动态标绘和态势推演系统？接下来我们一一来看。

---

1.发布三维标绘服务

WebGL标绘功能依赖于三维标绘服务，所以首先需要找到标绘库，发布成三维标绘服务。通常我们可以在iDesktop的安装目…\Templates\Plot下能找到标绘库，然后通过iServer发布成三维标绘服务。

2.使用封装好的标绘控件

首先我们需要引用标绘扩展模块文件，这里我们需要注意几点，（1）某些WebGL版本中在依赖库文件夹里面存在两个标绘扩展模块文件，我们需要引用名称为“PlotAlgoInclude_NoCommon.js”的文件，因为该文件解决了与某些其它库文件命名冲突的问题。（2）如果同时要使用二维客户端某些功能（例如查询）和三维标绘功能，需要先引用二维库文件，再引用标绘扩展模块文件。（3）要使用封装的标绘控件，需要先引用jquery，再引用封装好的标绘控件文件“PlottingUI.Include.js”。具体引用顺序如下：

<script src="./js/supermap/SuperMap.Include.js"></script>
<script type="text/javascript" src="../Build/Cesium/ThirdParty/Workers/PlotAlgo/PlotAlgoInclude_NoCommon.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/plotPanelControl/PlottingUI.Include.js"></script>

最后就是编写功能代码，第一步，创建一个标绘图层，添加到场景中：

 plottingLayer = new cesium.PlottingLayer(scene, "plottingLayer");
 scene.layers.add(plottingLayer);

第二步，实例化标绘控件面板，初始化风格面板：

 plotEditControl = new cesium.PlotEditControl(scene, plottingLayer);//编辑控件
 plotDrawControl = new cesium.PlotDrawControl(scene, plottingLayer);//绘制控件
 plotting = cesium.Plotting.getInstance(serverUrl, scene); //标绘面板
 initPlotPanel("plotPanel", serverUrl, plotDrawControl, plotEditControl,plotting);
 stylePanel = new StylePanel('stylePanel', plotEditControl, plotting);

第三步，做一些逻辑控制功能，标绘结束，激活编辑控件：

 plotDrawControl.drawFinishEvent.addEventListener(function () {//标绘结束，激活编辑控件
        plotEditControl.activate();
    });

这样我们就使用上了研发封装好的标绘控件，完整代码获取方式将在文章最后给出，功能效果如图：

3.使用代码来创建标绘符号和动画

首先还是引用标绘扩展文件“PlotAlgoInclude_NoCommon.js”，然后就开始编写功能代码：

第一步，创建标绘图层，添加至当前场景：

plottingLayer = new cesium.PlottingLayer(scene, "plottingLayer");
scene.layers.add(plottingLayer);

第二步，获取标绘实例，创建动画管理类：

plotting = cesium.Plotting.getInstance(serverUrl, scene);
animationManager = plotting.getGOAnimationManager();

第三步，创建符号位置对象：

var pointsJGSZ = [];
pointsJGSZ[0] = new cesium.Cartesian3(13.0486416724835, 47.827217402435, 0);

第四步，创建标绘符号和动画，这里需要指定符号库ID和符号ID，建议在iDesktop打开标绘功能，在属性中查看符号库ID和符号ID。

plottingLayer.createSymbol(22, 1004, pointsJGSZ, function (even) {
            geoJGSZ = even.feature;
            var goAnimationJGSZ = animationManager.createGOAnimation(cesium.GOAnimationType.ANIMATION_GROW, "JGSZ", geoJGSZ);//进攻警力生长动画
            goAnimationJGSZ.startTime = 0;//动画开始时间
            goAnimationJGSZ.duration = 5;//动画播放时长
        });//22是符号库ID，1004是符号ID

然后我们就用代码创建好了一个带生长动画的标绘符号，效果如下图：

完整WebGL包获取地址：

链接：https://pan.baidu.com/s/1jQZdw7yy_4gMtu-2buW9vw
提取码：yqbw
完整代码参考WebGL包中examples目录下plot_dynamicPlot.html和plot_plotGOAnimation.html