地图动态标绘--B/S应用（一）

作者：小舜

动态标绘广泛应用于电力、通信和应急等多个行业和领域。它可以用形象生动的矢量符号描述各种业务对象，表示各种资源，还可以动态渲染业务进度和流程。

在前篇地图动态标绘一我们讲了动态标绘的基本构成及在C/S应用上的使用方法，今天我们着重介绍下iServer下的的动态标绘服务以及如何用iClient for JavaScript 开发动态标绘的B/S应用。

开始前的准备

SuperMap iClient for JavaScript提供了动态标绘图层（PlottingLayer），用于动态的绘制和编辑标号，但是首先我们需要在iServer发布一个动态标绘服务。发布动态标绘服务需要iServer的动态标绘服务许可模块，请确保使用前拥有该模块许可。进入iServer管理页面，服务选项卡选择快速发布：

点击下一步需要您选择plot符号库文件（后缀为：.plot，目前iServer提供两个自带的标号库文件在samples/data/plot/目录下，iServer也默认发布的有示范动态标绘服务，地址为ip:8090/iserver/services/plot-jingyong/rest/plot/）；目前plot符号库文件暂时无法自主制作，但是iServer提供的自带两个符号库已经能满足大多数项目需求，研发工程师正在加紧开发，不久将推出plot符号库制作工具。

开始二次开发

由于动态标绘只是渲染矢量数据，所以不能作为底图，我们需要在map上添加一个 TiledDynamicRESTLayer做为底图。这里就不贴代码了。

1.添加标绘图层

//标绘服务地址var plottingUrl = "http://localhost:8090/iserver/services/plot-jingyong/rest/plot/";//创建一个名为“plottingLayer”的标绘图层。var plottingLayer = new SuperMap.Layer.PlottingLayer("plottingLayer", plottingUrl);//向map中添加图层map.addLayers([plottingLayer]);

2.添加标绘绘制控件和编辑控件

var drawGraphicObject = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GraphicObject);// 绘制控件var plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);//编辑控件map.addControls([plottingEdit,drawGraphicObject]);

接下来有两种开发方式，iClient for JavaScript提供了两个div面板：标绘面板和属性面板，大大简化了用户编辑和绘制标绘符号的方式，您可以选择使用自带的面板和不使用面板。

3.使用标绘面板和属性面板

首先引入相应的库文件，将 iClient for JavaScript包中samples/js/plottingPanle文件夹拷贝到项目中。
其次在html标签中创建两个div标签。

   <!--标绘面板显示的div-->    <div id="plotPanel" title="标绘面板" style="background-color: #ffffff;position: absolute; width: 19.8%; height: 90%;overflow: hidden"></div>    <!--属性面板显示的div-->    <div id="stylePanel" title="属性面板" style="background-color: #ffffff;position: absolute; width: 19.8%; height: 100%;overflow: hidden"></div>

然后在js代码中初始化两个面板

//创建标绘面板并初始化var serverUrl='http://localhost:8090/iserver/services/plot-jingyong/rest/plot/';var plotPanel = new SuperMap.Plotting.PlotPanel("plotPanel", serverUrl, map);//div idplotPanel.events.on({"initializeCompleted": initializeCompleted});plotPanel.initializeAsync();//标绘面板初始化成功后设置标绘控件，切换图层绘制时需要将相应的绘制控件传给标绘面板function initializeCompleted(evt){    plotPanel.setDrawFeature(drawGraphicObject);//drawGraphicObject为前面创建的符号绘制控件}//创建属性面板并将准备编辑的对象所在相应图层传入属性面板var stylePanel = new SuperMap.Plotting.StylePanel("stylePanel");//div idstylePanel.addEditLayer(plottingLayer);

到这里为止，动态标绘初始化已经完成。可以在标绘面板上点击想要标绘的标号后，在地图的任意位置进行标绘，标绘完成后选中标号就可以进行鼠标编辑或通过属性面板修改属性。

4.不使用标绘面板和属性面板

动态标绘里面用到的所有标号都是标号库提供的，除了绘制基本图元以外，绘制其他所有标号都需要初始化标号所在的标号库。

//标绘服务地址// "http://localhost:8090/iserver/services/plot-jingyong/rest/plot/";var plotting = SuperMap.Plotting.getInstance(map, serverUrl);var symbolLibManager = plotting.getSymbolLibManager();//判断标号库管理类如果没有进行初始化，则异步初始化。初始化完成后返回支持的标号库ID列表，目前由于服务器不支持多个标号库，所以客户端也不支持多个标号库。if(!symbolLibManager.isInitializeOK()){    symbolLibManager.events.on({"initializeCompleted": initializeCompleted,        scope: this});    //标号库管理类初始化完成的处理函数    function initializeCompleted(result){        console.log(result);    }    symbolLibManager.initializeAsync();}

不使用标绘面板和属性面板时就需要手动给绘制控件添加标号库id，符号code和服务地址。

//激活控件drawGraphicObject.activate();//将标号的标号库ID、符号号Code以及标绘服务地址赋值给标绘控件内部的handler，即SuperMap.Handler.GraphicObjectdrawGraphicObject.handler.libID = 421;drawGraphicObject.handler.symbolCode = 20100;drawGraphicObject.handler.serverUrl = plottingUrl;

如果不清楚您用的符号是哪个，可以使用symbolLibManager.getSymbolLibJSONInfo(index) 获取相关符号code信息。getSymbolLibNumber()可以获取该标绘服务中标号库个数，getSymbolLibByIndex(index)可以根据数组索引获取标号库，更多请参考帮助文档。

5.编辑标号

标号的符号大小形状可以直接用编辑控件PlottingEdit进行编辑，标号的颜色等属性信息，如果使用的是属性面板可以直接在属性面板里面修改，如果没有使用属性面板则与风格有关的属性从SuperMap.Feature.Vector的style里获取，和形状有关的属性从SuperMap.Feature.Vector的geometry里获取。

//首先绑定PlottingEdit控件的beforefeaturemodified事件plottingEdit.events.on({"beforefeaturemodified": changeProperty});//修改属性，beforefeaturemodified事件的处理函数function changeProperty(event){    if(event && event !== null){        //被选中，要修改的feature        selectfeature = event.feature;        //修改风格相关的属性        if(selectfeature !== null && selectfeature.style !== null){            //修改边线宽度、边线颜色、边线颜色透明度            selectfeature.style.strokeWidth = 2;            selectfeature.style.strokeColor = "#ff0000";            selectfeature.style.strokeOpacity = 1;        }        //修改形状相关的属性        if(selectfeature !== null && selectfeature.geometry !== null){            //修改旋转、缩放、标号等级，适用于点标号            selectfeature.geometry.setRotate(30);            selectfeature.geometry.setScale(1.2);            selectfeature.geometry.setSymbolRank(1);        }    }    SuperMap.Event.stop(event);}

完成以上步骤我们基本实现了动态标绘符号的绘制和编辑，那么我们如何保存已经绘制好的符号以及如何对已绘制的符号进行查询呢？咱们下一篇再讲，请持续关注！