动态标绘专题

一、简介

SuperMap iClient for JavaScript提供了动态标绘图层（PlottingLayer），用于动态的绘制和编辑标号。

技术特点：动态标绘技术可以动态的绘制点标号和线面标号，并能够独立修改每个标号的风格，也可以灵活的修改标号位置和细节。
应用场景：主要用于结合电子地图实现军事作战方案、应急处置方案、公安围捕方案等指挥调度方案的二维动态标绘。

二、使用说明

首先我们得做一些准备：

保证服务器存在可用的标绘服务。或者我们可以自行去服务器服务管理页面，通过关联一个可用的标号库快速发布一个标绘服务。
由于动态标绘只是渲染矢量数据，所以不能作为底图，我们需要在map上添加一个 TiledDynamicRESTLayer，具体使用方法可以参见开发指南。

1、创建标绘图层

首先创建一个标绘图层对象。初始化需要设置图层的名称和标绘服务的URL地址。

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

2、添加图层到地图

然后将此图层添加到map里面。

//向map中添加图层
map.addLayers([plottingLayer]);

3、创建绘制标号控件

创建一个Handler类型为SuperMap.Handler.GraphicObject的DrawFeature控件，并将标绘图层传进去。

var drawGraphicObject = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GraphicObject);

4、创建编辑标号控件

标号的编辑控件，用标绘图层初始化。没有编辑控件无法对标号进行编辑。

var plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);

5、添加控件到地图

然后将控件添加到map里面。

//向map中添加控件
map.addControls([plottingEdit,drawGraphicObject]);

6、初始化标绘面板和属性面板

SuperMap iClient for JavaScript提供了标绘和属性两个面板，使用户更加方便的绘制和编辑标号。使用方法如下：

首先在html页面的<body>标签内部创建标绘面板和属性面板的div

<body onLoad = "init()">
    <!--标绘面板显示的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>
</body>

然后用标绘服务地址、地图及div初始化标绘面板和属性面板

//创建标绘面板并初始化
plotPanel = new SuperMap.Plotting.PlotPanel("plotPanel", serverUrl, map);
plotPanel.events.on({"initializeCompleted": initializeCompleted});
plotPanel.initializeAsync();

//标绘面板初始化成功后设置标绘控件，切换图层绘制时需要将相应的绘制控件传给标绘面板
function initializeCompleted(evt){
    plotPanel.setDrawFeature(drawGraphicObject);
}
//创建属性面板并将准备编辑的对象所在相应图层传入属性面板
stylePanel = new SuperMap.Plotting.StylePanel("stylePanel");
stylePanel.addEditLayer(plottingLayer);

到这里为止，动态标绘初始化已经完成。可以在标绘面板上点击想要标绘的标号后，在地图的任意位置进行标绘，标绘完成后选中标号就可以进行鼠标编辑或通过属性面板修改属性。那么如果不使用提供的标绘面板和属性面板，用户还需要做哪些工作呢，具体参见动态标绘专题--不使用标绘和属性面板

三、效果展示

1、鼠标标绘展示

鼠标左键单击标绘面板任一标号后，即可在图层上绘制相应标号：

2、属性修改展示

标号绘制完成后，鼠标左键单击选中标号，属性面板会显示该选中对象的属性值，即可在属性面板上直接修改：