动态标绘专题--不使用标绘面板和属性面板

一、简介

前面提到，为了方便用户，SuperMap iClient for JavaScript动态标绘功能提供标绘和属性两个面板。如果用户不去加载现有面板的情况下还需要做哪些工作呢？这篇专题主要介绍的是在不存在标绘和属性面板的情况下，还需要做的工作。所以这里着重介绍动态标绘专题里面替代“6、初始化标绘面板和属性面板”的初始化工作，而动态标绘专题里面的1至5点的创建图层、标绘和编辑控件并添加到地图等的工作就不重复介绍了，但并不代表不需要。相反，他们都是动态标绘必须的工作。这点需要引起注意。

二、使用

1、初始化标号库

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

//标绘服务地址
var plottingUrl = "http://localhost:8090/iserver/services/plot-jingyong/rest/plot/";

//声明动态标绘总控类，从总控类获取标号库管理类
var plotting = SuperMap.Plotting.getInstance(map, plottingUrl);
var symbolLibManager = plotting.getSymbolLibManager();

//判断标号库管理类如果没有进行初始化，则异步初始化。初始化完成后返回支持的标号库ID列表，目前由于服务器不支持多个标号库，所以客户端也不支持多个标号库。
if(!symbolLibManager.isInitializeOK()){
    //标号库管理类初始化完成的处理函数
    function initializeCompleted(result){
        console.log(result);
    }

    symbolLibManager.events.on({"initializeCompleted": initializeCompleted,
        scope: this});
    symbolLibManager.initializeAsync();
}

值得注意的是：标号库管理类初始化完成后，返回支持的标号库ID列表所对应的标号库已经初始化完成，不需要再单独初始化。

下面开始介绍鼠标标绘和编辑标号，严格意义来说，标绘和编辑不属于初始化工作。但是如果使用客户端提供的面板，这些工作都是封装在面板内部，是不需要用户自己去做任何事的。

2、绘制标号

激活控件，绘制控件。这里以警用库的刑事案件标号为例。警用标号库的ID为421，刑事案件的Code为20100。用标号库ID和标号Code就可以确定要绘制的标号。

//激活控件
drawGraphicObject.activate();

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

3、编辑标号

选中标号后，可以鼠标编辑编号的大小、旋转等；也可以对标号的边线、衬线、填充、镜像、等级、子标号及注记等属性进行修改。

鼠标编辑，鼠标编辑只需要在绘制结束后激活编辑控件。

//取消激活绘制控件
drawGraphicObject.deactivate();
//激活编辑控件
plottingEdit.activate();

修改属性。标号可以修改的属性分两部分存储，和风格有关的属性从SuperMap.Feature.Vector的style里获取，和形状有关的属性从SuperMap.Feature.Vector的geometry里获取。这里的代码段只以少部分属性为例，4、动态标绘标号的属性会具体列出所有属性。

//首先绑定图层的beforefeaturemodified事件
plottingLayer.events.register("featureselected", this, changeProperty);
//修改属性，featureselected事件的处理函数
function showFeatureProperty(selectFeatueEvt)
{
    if(selectFeatueEvt && selectFeatueEvt !== null){
        //被选中，要修改的feature
        selectfeature = selectFeatueEvt.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(selectFeatueEvt);
}

4、动态标绘标号的属性

属性名/属性接口	属性含义	点标号	线面标号
selectfeature.geometry.symbolType	获取标号几何类型，点标号、线面标号或者基本图元类型，只读属性	支持	支持
selectfeature.geometry.libID	获取标号所属标号库ID，只读属性	支持	支持
selectfeature.geometry.code	获取标号Code，只读属性	支持	支持
selectfeature.geometry.symbolName	获取标号名称，只读属性	支持	支持
selectfeature.style.strokeWith	{Number}设置/获取标号边线宽度，单位是像素	支持	支持
selectfeature.style.strokeColor	{String}设置/获取标号边线颜色, 例如，"ff0000"	支持	支持
selectfeature.style.strokeOpacity	{Number}设置/获取标号边线颜色透明度，取值范围(0-1)	支持	支持
selectfeature.style.strokeDashstyle	{String}设置/获取标号边线类型，dot、dash、dashdot、longdash、longdashdot、solid	支持	支持
selectfeature.style.surroundLineWidth	{Number}设置/获取标号衬线宽度，单位是像素	支持	支持
selectfeature.style.surroundLineColor	{String}设置/获取标号衬线颜色，例如，"ffff00"	支持	支持
selectfeature.style.surroundLineColorOpacity	{Number}设置/获取标号衬线颜色透明度，取值范围(0-1)	支持	支持
selectfeature.style.fill	{Boolean}设置/获取标号填充，不需要填充则设置成false	支持	支持
selectfeature.style.fillGradientMode	{String}设置/获取标号渐变填充方式，渐变填充的优先级高于填充，支持LINEAR、RADIAL两种渐变方式	支持	支持
selectfeature.style.fillColor	{String}设置/获取标号填充颜色，例如，"ff0000"	支持	支持
selectfeature.style.fillOpacity	{Number}设置/获取标号填充透明度，取值范围(0-1)	支持	支持
selectfeature.style.fillBackColor	{String}设置/获取标号背景色，例如，"ffff00"，渐变填充时生效	支持	支持
selectfeature.style.fillBackOpacity	{Number}设置/获取标号背景填充透明度，，取值范围(0-1)，渐变填充时生效	支持	支持
selectfeature.style.display	{String}设置/获取标号可见性，display可见，none不可见	支持	支持
selectfeature.style.fontSize	{String}设置/获取点标号注记字体大小，单位是像素,例如，fontSize="2em"	支持	不支持
selectfeature.style.fontColor	{String}设置/获取点标号注记字体颜色，十六进制颜色	支持	不支持
selectfeature.style.fontFamily	{String}设置/获取点标号注记字体类型	支持	不支持
selectfeature.geometry.setRotate(value)/getRetate()	{Number}设置/获取点标号旋转角度	支持	不支持
selectfeature.geometry.setScale(value)/getSclae()	{Number}设置/获取点标号缩放比例	支持	不支持
selectfeature.geometry.setNegativeImage(value)/getNegativeImage()	{Boolean}设置/获取点标号镜像	支持	不支持
selectfeature.geometry.setSymbolRank(value)/getSymbolRank()	{Number}设置/获取点标号等级，标号可以设置的等级范围可以通过selectfeature.geometry.symbolData.symbolRanks获取	支持	不支持
selectfeature.geometry.setSymbolSize(w, h)/getSymbolSize()	{Number, Number}设置/获取点标号大小，参数分别为军标宽度和高度，单位是像素	支持	不支持
selectfeature.geometry.setTextContent(value)/getTextContent()	{String}设置/获取点标号注记内容	支持	不支持
selectfeature.geometry.setTextPosition(value)/getTextPosition()	{Number}设置/获取点标号注记位置，有0：左上，1：左下，2：右上，3：右下，4：上，5：下，6：左，7：右，8：中间共九个位置，标号是否可以设置中间注记可以通过selectfeature.geometry.symbolData.middleMarkExist判断	支持	不支持
selectfeature.geometry.setSurroundLineType(value)/getSurroundLineType()	{Number}设置/获取标号衬线类型，点标号只有0：无衬线和1：有衬线两种，而线面标号除了无衬线外，还有1：内侧衬线，2：外侧衬线，3：双侧衬线	支持	支持
selectfeature.geometry.setSubSymbol(code，index)/getSubSymbol()	{Number, Number}设置/获取线面标号的子标号，参数分别为修改后的子标号code及其索引	不支持	支持

到这里为止，这篇专题对标号库初始化以及鼠标交互式标绘和编辑，相关属性的修改都做了详细介绍。相信即使不使用SuperMap iClient for JavaScript提供的标绘面板和属性面板，也可以很容易的熟悉动态标绘。