本篇的重点内容是利用openlayers实现地图标绘功能，效果图如下：
 
 
 
 
实现思路：
 
 
标绘界面设计以及标绘面板控制 
 
 
  
<!-- 标绘面板 -->
<div style="position:absolute;right:180px;top:80px;display:none;" id="map_toolbar_plot">
<ul class="map_toolbar_list_more map_toolbar_list_more-float  clearfix">
       <li plottype="freehandline">自由线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar28"></span></li>
       <li plottype="polyline">折线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar29"></span></li>
       <li plottype="arc">弧线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar30"></span></li>
       <li plottype="curve">曲线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar31"></span></li>
       <li plottype="freehandpolygon">手绘<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar32"></span></li>
       <li plottype="polygon">多边形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar33"></span></li>
       <li plottype="rectangle">矩形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar34"></span></li>
       <li plottype="circle">圆形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar35"></span></li>
       <li plottype="assaultdirection">直角<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar36"></span></li>
       <li plottype="squadcombat">简单<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar37"></span></li>
       <li plottype="tailedsquadcombat">燕尾<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar38"></span></li>
       <li plottype="gatheringplace">集结地<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar39"></span></li>
</ul>
</div>
 
 
 
 
 
  
//标绘例
var plotFlag = false;
$("#bPlot").click(function () {
            if(!plotFlag){
                $("#map_toolbar_plot").show();
                plotFlag = true;
            }else{
                bmap.setCurrentMutexInteraction(null);
                if(bmap.dataClear){
                    bmap.dataClear.clear();
                }
                $("#map_toolbar_plot").hide();
                plotFlag = false;            
            }            
});
 
 
 
 
标绘初始化以及核心代码实现
 
 
  
//标绘
var plottypes = ["freehandline","polyline","arc","curve","freehandpolygon","polygon",
        "rectangle","circle","assaultdirection","squadcombat","tailedsquadcombat","gatheringplace"];
for(var i = 0; i < plottypes.length; i++){
        var selector = '#map_toolbar_plot li[plottype="' + plottypes[i] + '"]';
        $(selector).on('click',function(){
            var id = "10006";//标绘工具
            var tool = bmap.getIndexInteraction(id);
            bmap.setCurrentMutexInteraction(tool);
            //标绘类型
            var plottype = $(this).attr("plottype");
            tool.setDrawType(plottype);
        })
}
 
 
 
 
 
  
/**
 *  获取带有索引的交互工具
 * @param index {String}
 * @returns {ol.interaction.Interaction|null}
 */
bxmap.Map.prototype.getIndexInteraction = function(index){
    var indexInteractions = this.get("bxmap_index_interactions") || {};
    var interaction = indexInteractions[index];
    if(interaction == null && this.getMap()){
        var arr = this.getMap().getInteractions().getArray();
        for(var i = 0; i < arr.length ; i++){
            if(index == arr[i].get(bxmap.INDEX_INTERACTION_ID)){
                interaction = arr[i];
                indexInteractions[index] = interaction;
                break;
            }
        }
    }
    return interaction;
}
 
 
 
 
 
  
/*----------标绘，依赖于GISpace动态标绘开源项目{bxmap.interaction.Plot}---------*/
/**
 * @classdesc 用于绘制军事图形，依赖于依赖于GISpace动态标绘开源项目
 * @extends {ol.interaction.Interaction}
 * @param options {Object}
 * @param options.type {String} 默认为polygon
 */
bxmap.interaction.Plot = function (options) {
    ol.interaction.Interaction.call(this, { handleEvent: this._handleKeyboardEvent });

    this.plotDraw = null; //绘制标绘
    this.plotEdit = null; //编辑标绘
    this.plotLayer = null; //标绘图层
    this.editingFeatures = new ol.Collection();//当前选择的要素

    var opt_options = options ? options : {};
    var type = opt_options.type ? opt_options.type : "polygon";
    this.setDrawType(type);
}
ol.inherits(bxmap.interaction.Plot, ol.interaction.Interaction);

/**
 * @inheritdoc
 * @param {ol.CanvasMap} map
 */
bxmap.interaction.Plot.prototype.setMap = function (map) {
    ol.interaction.Interaction.prototype.setMap.call(this, map);
    if (map) {
        // 初始化标绘绘制工具，添加绘制结束事件响应
        var plotDraw = this.plotDraw = new P.PlotDraw(map);
        plotDraw.on("draw_end", this._onDrawEnd, this);
        // 初始化标绘编辑工具
        var plotEdit = this.plotEdit = new P.PlotEdit(map);

        var plotLayer = this.plotLayer = this.getLayer();
        // 添加标绘图层
        map.addLayer(plotLayer);

        map.on('click', function (e) {
            if (plotDraw.isDrawing()) return;

            var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                return feature;
            },{
                layerFilter: function (layer) {
                    return layer == plotLayer;
                },
                hitTolerance: 1 //1像素，仅在canvas render中有效
            });
            if (feature) {
                this.editingFeatures.push(feature);
                // 开始编辑
                this._startEditingFeature(feature);
            } else {
                // 结束编辑
                this._finishEditing();
            }
        },this);
    }
}

/**
 * @description 设置绘制图形类型
 * @param {String} drawType 类型
 * @example <caption> 图形类型有效值 </caption>
 *     arc - 弧线，curve - 曲线，polyline - 折线，freehandline - 自由线，circle - 圆，
 *     ellipse - 椭圆，closedcurve - 曲线面，polygon - 多边形，rectangle - 矩形，
 *    freehandpolygon - 自由面，gatheringplace - 聚集地，doublearrow - 钳击双箭头，
 *  straightarrow - 直线箭头，finearrow - 细直箭头，assaultdirection - 直箭头，
 *    attackarrow - 进攻箭头，tailedattackarrow - 燕尾进攻箭头，squadcombat - 斜箭头，
 *     tailedsquadcombat - 燕尾斜箭头
 */
bxmap.interaction.Plot.prototype.setDrawType = function(drawType){
    var map = this.getMap();
    this.setCursor("default");
    
    this.set("draw_type", drawType);
    if (this.plotEdit && this.plotDraw) {
        this._finishEditing();
        this.plotDraw.activate(drawType);
    }
}

/**
 * @description 获取绘制图形类型
 * @returns {String} 绘制图形类型
 */
bxmap.interaction.Plot.prototype.getDrawType = function(){
    return this.get("draw_type");
}

/**
 * @private
 * @description 更新状态
 */
bxmap.interaction.Plot.prototype._updateState = function() {
    var map = this.getMap();
    if(map == null) return;
    var active = this.getActive();
    
    var plotDraw = this.plotDraw;
    var plotEdit = this.plotEdit;
    var layer = this.plotLayer;
    //使激活
    if(active){
        this._finishEditing();
        if(plotDraw){
            var type = this.getDrawType();
            plotDraw.activate(type);
        }
    }else{
        if(plotDraw){
            plotDraw.deactivate();
        }
        this._finishEditing();
    }
};

/**
 * @description 获取标绘图层
 * @returns {ol.layer.Vector}
 */
bxmap.interaction.Plot.prototype.getLayer = function(){
    if(this.plotLayer == null){
        // 设置标绘符号显示的默认样式
        var stroke = new ol.style.Stroke({color: '#FF0000', width: 2});
        var fill = new ol.style.Fill({color: 'rgba(0,255,0,0.4)'});
        var image = new ol.style.Circle({fill: fill, stroke: stroke, radius: 8});
        drawStyle = new ol.style.Style({image: image, fill:fill, stroke:stroke});
    
        // 绘制好的标绘符号，添加到FeatureOverlay显示。
        var layer = this.plotLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        layer.setStyle(drawStyle);
        layer.setZIndex(bxmap.CONFIG_LEVEL_MAX + 1);//保持不被其他图层覆盖
    }
    return this.plotLayer;
}

/**
 * @private
 * @param mapBrowserEvent
 * @returns {Boolean}
 */
bxmap.interaction.Plot.prototype._handleKeyboardEvent = function(mapBrowserEvent) {
    var stopEvent = false;
    var map = this.getMap();
    if(map == null) return;
    
    if (mapBrowserEvent.type == "keydown" || mapBrowserEvent.type == "keypress") {
        var keyEvent = mapBrowserEvent.originalEvent;
        var keyCode = keyEvent.keyCode;
        if (keyCode == 46) {//delete
            var plotLayer = this.plotLayer;
              this.editingFeatures.forEach(function (elem, index, array) {
                  var close = elem.get("close_button");
                  if (close) {
                      map.removeOverlay(close);
                  }
                  var source = plotLayer.getSource();
                source.removeFeature(elem);
              });
              this.plotEdit.deactivate();
              this.editingFeatures.clear();    
              mapBrowserEvent.preventDefault();
              stopEvent = true;
      }
    }
    return !stopEvent;
}

/**
 * @private
 * @description 绘制结束后，添加图层显示。
 */
bxmap.interaction.Plot.prototype._onDrawEnd = function (event) {
    var feature = event.feature;
    if (feature) {
        //添加到编辑要素集合中
        this.editingFeatures.push(feature);
        //添加到标绘图层
        this.plotLayer.getSource().addFeature(feature);
        this._bindingCloseButton(feature);
        //开始编辑
        this._startEditingFeature(feature);
    }
}

/**
 * @private
 * @description 开始编辑要素
 */
bxmap.interaction.Plot.prototype._startEditingFeature = function (feature) {
    if (this.plotEdit == null || feature == null) return;
    this.plotEdit.activate(feature);
    var close = feature.get("close_button");
    var map = this.getMap();
    if (map && close) {
        var exists = map.getOverlayById(close.getId());
        if(exists == null){
            map.addOverlay(close);
        }
        var ctlPoints = this.plotEdit.getControlPoints();
        var point = ctlPoints[ctlPoints.length - 1];
        close.setPosition(point);
    }
}

/**
 * @private
 * @description 结束编辑要素
 */
bxmap.interaction.Plot.prototype._finishEditing = function () {
    if (this.plotEdit) {
        this.plotEdit.deactivate();
    }

    //移除删除按钮
    var map = this.getMap();
    if (map == null) return;
    this.editingFeatures.forEach(function (elem, index, array) {
        var close = elem.get("close_button");
        if (map && close) {
            map.removeOverlay(close);
        }
    });
    this.editingFeatures.clear();
}

/**
 * @private
 * @description 获取删除按钮
 * @returns {ol.Overlay}
 */
bxmap.interaction.Plot.prototype._bindingCloseButton = function (feature) {
    if (feature == null) return;
    var uid = bxmap.common.getCounterUid(feature);
    var closeTooltipElement = document.createElement('div');
    closeTooltipElement.className = 'tooltip tooltip-close';
    var closeOverlay = new ol.Overlay({
        id: uid,
        element: closeTooltipElement,
        offset: [16, 0],
        positioning: 'bottom-center'
    });
    closeTooltipElement.innerHTML = '<a style="color:red;" href:"#" title="删除">✘</a>';
    feature.set("close_button", closeOverlay);

    //执行删除绘制
    var plotLayer = this.plotLayer;
    var plotEdit = this.plotEdit;
    var map = this.getMap();
    closeTooltipElement.addEventListener('click', function () {
        if (plotEdit && feature && plotLayer) {
            var close = feature.get("close_button");
            if (close && map) {
                map.removeOverlay(close);
            }
            var source = plotLayer.getSource();
            source.removeFeature(feature);
            plotEdit.deactivate();
        }
    });
}

/**
 * 清空绘制的数据
 */
bxmap.interaction.Plot.prototype.clear = function(){
    this._finishEditing();
    if(this.plotLayer){
        this.plotLayer.getSource().clear();
    }
}
 
 
 
 
 

1. 概述
 
水经注软件除了可以轻松下载无水印Google Earth卫星影像、有明确拍摄日期的历史影像、地方高清天地图、百度高德大字体打印地图，按1万/5千等国家标准图幅下载，对百度坐标与火星坐标进行纠偏，下载陆地及海洋高程、STRM高程、提取10米等高线等深线、CASS高程点之外，还有具有线制功能。这里，我们以标绘线为例，对软件中的标注点功能参数进行说明。
 
2. 开启线标绘功能
 
可以通过在"我的标注"工具栏中点击"线"工具，或在软件顶部工具栏中选择"编辑\绘线"菜单开启线标绘功能。些时，鼠标处理绘制状态，只需要在地图中连续点击可以开始标绘线段。
 
标绘线完成之后，可以在"我的标注"可侧显示的属性面板中设置线属性，也可以通过右键单击线段，然后在选择"属性"菜单后显示"线属性编辑"对话中设置参数，如下图所示。
 
 
 
 
在显示的"线属性编辑"对话框中，可以为标绘的线段设置名称、汽泡提示内容、线段颜色、线段宽度、不透明度、标注字体样式和提取坐标等。
 
3. 名称与汽泡提示设置
 
在属性对话框中，可以为当前标绘的线段指定名称和说明备注信息，如果有图片备注，可以点击"插入图片"按钮，插入对应的备注图片，如下图所示。
 
 
 
 
4. 线段颜色与样式设置
 
在"颜色/样式"参数中，可以为线段设置颜色、线宽和不透明度，还可以设置线段标注文字的相关参数，比如字体和字号等，如下图所示。
 
 
 
 
5. 线段长度与坐标查看
 
在"长度/坐标"参数中可以查看线段长度、设置长度单位、拾取高程、查看线段节点坐标和导出坐标为矢量文件等，如下图所示。
 
 
 
 
点击"拾取高程"按钮可以拾取当前线段每一个点节所在位置对应的高程值，如下图所示。
 
 
 
 
点击"导出坐标"按钮可以将线节点坐标与高程数据导出为多种矢量文件格式，主要包括ESRI Shapefile(*.shp)、Google Earth(*.kml)、Google Earth(*.kmz)、AutoCAD(*.dxf)、Mapinfo(*.tab)、文本文件(*.csv)和文本文件(*.txt)等。
 
6. 单个线段属性设置
 
需要修改单个线段对象的属性时，可以在右键单击标注对象并在显示的菜单中选择"属性"即可，也可以在"我的标注"列表中右键单击需要修改的对象并选择"线属性"菜单，最后在显示的属性对话杠中修改相关参数即可。
 
 
 
 
7. 批量线段属性设置
 
当需要批量修改线段属性时，在线段所属的文件夹目录上单击鼠标右键，然后选择"图层属性\线属性"菜单，将显示"批量修改线属性"对话框。
 
 
 
 
在"批量修改线属性"对话框中，只可以批量修改图标和"颜色/样式"等公共参数，如下图所示。
 
 
 
 
这里，我们批量修改线段颜色为紫色、线段宽度为8和线段的不透明度为50%，修改完成并确认之后，效果如下图所示。
 
 
 
 
8. 结语
 
以上就是关于标绘线段参数的详细说明，主要包括了开启线标绘功能、名称与汽泡提示设置、线段颜色与样式设置、线段长度与坐标查看、单个线段属性设置和批量线段属性设置等功能

上一篇实现了demo的地图查询功能，本篇新增地图态势标绘模块，截图如下：
 
 
 
 
 
本篇核心的在于调用API的Draw工具：https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html
 
 
 
require(["esri/toolbars/draw"], function(Draw) { /* code goes here */ });
 
 
构造函数：
 
 
 
new Draw(map, options?)
 
 
一般来说，传参map对象进来就行，其他参数可选的，用默认的就行，除非你想专门设置；
 
默认的可绘制图形类型常量Constants：
 
 
 

  
 
 
 
ARROW    Draws an arrow.箭头
CIRCLE    Draws a circle.圆形
DOWN_ARROW    Draws an arrow that points down.下箭头
ELLIPSE    Draws an ellipse.椭圆
EXTENT    Draws an extent box.矩形
FREEHAND_POLYGON    Draws a freehand polygon.手绘多边形
FREEHAND_POLYLINE    Draws a freehand polyline.手绘线
LEFT_ARROW    Draws an arrow that points left.左箭头
LINE    Draws a line.线
MULTI_POINT    Draws a Multipoint.多点
POINT    Draws a point.点
POLYGON    Draws a polygon.多边形
POLYLINE    Draws a polyline.折线
RECTANGLE    Draws a rectangle.矩形
RIGHT_ARROW    Draws an arrow that points right.右键头
TRIANGLE    Draws a triangle.三角形
UP_ARROW    Draws an arrow that points up.上箭头
 
 

  
 
 
 
可以设置绘制的符号样式：
 
 
 
其中，activate函数可以激活触发绘制的行为，绘制结束之后在绘制结束事件里面获取geometry：
 
 
 
activate(geometryType, options?)
 
 
 
 
 
地图态势标绘实现的思路：利用API的Draw工具实现普通的点线面绘制，但是对于燕尾箭头、集结地、弧线、曲线、简单箭头等特殊的军事态势需要自定义来绘制了，所以需要拓展Draw工具才能实现，也是本篇的精华所在。
 
一、下面谈谈怎么在项目引用拓展Draw类js文件：
 
 
1是继承拓展Draw的文件目录；2是实现态势标绘模块的js文件。
 
首先，需要在map.html页面引用进来：
 
 
 

  
 
 
 
    <script type="text/javascript">
        //配置arcgis拓展解析天地图服务类引用的路径
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'tdlib',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/js/tdlib"
            }],
            paths: {
                Extension: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/Extension",
                ExtensionDraw: location.pathname.replace(/\/[^/]+$/, "") + "/js/main/drawExtension/plotDraw"
            }
        };
    </script>
 
 

  
 
 
 
其中，paths代表需要引用的路径。
 
 
 
    <script type="text/javascript" src="js/main/map.plot.js"></script>
 
 
其次，在map.js文件的初始化里面引用拓展的js文件DrawEx以及DrawExt：
 
 
 
(function () {
    dojo.require("Extension.DrawEx");
    dojo.require("ExtensionDraw.DrawExt");
})();
 
 
最后，在工具栏菜单的态势标绘菜单响应事件里面调用plot.js即可:
 
 
 

  
 
 
 
        //态势标绘
        $("#bPlot").click(function () {
            //初始化军势标绘接口
            if (!DCI.Plot.isload)
                DCI.Plot.Init(map);
            if (DCI.Plot.dialog)
                DCI.Plot.dialog.close();
            DCI.Plot.dialog = jDialog.dialog({
                title: '态势标绘',
                width: 370,
                height: 200,
                left: 450,
                top: 200,
                modal: false, // 非模态，即不显示遮罩层
                content: DCI.Plot.Html
            });
            DCI.Plot.InitEvent();

        });
 
 

  
 
 
 
二、谈谈Draw工具调用的思路，不管调用arcgis api原生态的Draw，还是拓展Draw的，都是先创建一个Draw对象，然后监听Draw的draw-end绘制结束的回调函数，获取绘制的图形叠加在地图显示；Draw工具的activate函数会触发draw-end回调函数；
 
首先，初始化Draw工具对象以及默认的符号样式symbol：
 
 
 

  
 
 
 
//定义默认点 线  面符号
DCI.Plot.markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 8, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 69, 0]), 2), new dojo.Color([255, 255, 255, 1]));
            DCI.Plot.lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 160, 122]), 2);
            DCI.Plot.fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 160, 122]), 2), new dojo.Color([255, 255, 255, 0.5]));
            //初始化拓展Draw
            DCI.Plot.toolbar = new Extension.DrawEx(map);
            DCI.Plot.toolbar.on("draw-end", DCI.Plot.addToMap);
            DCI.Plot.toolbar1 = new ExtensionDraw.DrawExt(map);
            DCI.Plot.toolbar1.on("draw-end", DCI.Plot.addToMap);
            //arcgis api自带的Draw
            DCI.Plot.drawToolbar = new esri.toolbars.Draw(map);
            DCI.Plot.drawToolbar.markerSymbol = DCI.Plot.markerSymbol;
            DCI.Plot.drawToolbar.lineSymbol = DCI.Plot.lineSymbol;
            DCI.Plot.drawToolbar.fillSymbol = DCI.Plot.fillSymbol;
            DCI.Plot.drawToolbar.on("draw-end", DCI.Plot.drawEnd);
 
 

  
 
 
 
其次，触发调用Draw绘制：
 
 
 

  
 
 
 
                   case 0://plot_freehandline
                        DCI.Plot.drawFreeHandPolyline(null, function (geometry) {
                            symbol = DCI.Plot.lineSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 1://plot_line
                        DCI.Plot.drawPolyline(null, function (geometry) {
                            symbol = DCI.Plot.lineSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 2://emergency_freehand
                        DCI.Plot.drawFreeHandPolygon(null, function (geometry) {
                            symbol = DCI.Plot.fillSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 3://plot_polygon
                        DCI.Plot.drawPolygon(null, function (geometry) {
                            symbol = DCI.Plot.fillSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 4://plot_extent
                        DCI.Plot.drawExtent(null, function (geometry) {
                            symbol = DCI.Plot.fillSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 5://emergency_freehand
                        DCI.Plot.drawCircle(null, function (geometry) {
                            symbol = DCI.Plot.fillSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 6://直角箭头
                        DCI.Plot.drawStraightArrow(null, function (geometry) {
                            symbol = DCI.Plot.fillSymbol;
                            DCI.Plot.drawEndPlot(geometry, symbol);
                        });
                        break;
                    case 7://简单箭头
                        DCI.Plot.toolbar.activate(Extension.DrawEx.FREEHAND_ARROW);
                      break; 
                    case 8://燕尾箭头
                        DCI.Plot.toolbar1.fillSymbol = DCI.Plot.fillSymbol;
                        DCI.Plot.toolbar1.activate("tailedsquadcombat");
                        break;  
                    case 9://集结地
                        DCI.Plot.toolbar.activate(Extension.DrawEx.BEZIER_POLYGON);
                      break; 
                    case 10://弧线
                        DCI.Plot.toolbar.activate(Extension.DrawEx.CURVE);
                      break;  
                    case 11://曲线
                        DCI.Plot.toolbar.activate(Extension.DrawEx.BEZIER_CURVE);
                      break;                        
 
 

  
 
 
 
 
 

  
 
 
 
        //画点
        drawPoint: function (symbol, onDrawEnd) {
            DCI.Plot.onDrawEnd = onDrawEnd;
            if (symbol) {
                DCI.Plot.drawToolbar.markerSymbol = symbol;
            }
            DCI.Plot.drawToolbar.activate(esri.toolbars.Draw.POINT);
            DCI.Plot.disablePan();
        },
        //画折线
        drawPolyline: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.lineSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
            this.disablePan();
        },
        //自由线
        drawFreeHandPolyline: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.lineSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
            this.disablePan();
        },
        //画多边形
        drawPolygon: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.fillSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.POLYGON);
            this.disablePan();
        },
        //手绘多边形
        drawFreeHandPolygon: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.fillSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
            this.disablePan();
        },
        //画圆形
        drawCircle: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.fillSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
            this.disablePan();
        },
        //画矩形
        drawExtent: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.fillSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.EXTENT);
            this.disablePan();
        },
        //直角箭头
        drawStraightArrow: function (symbol, onDrawEnd) {
            this.onDrawEnd = onDrawEnd;
            if (symbol) {
                this.drawToolbar.fillSymbol = symbol;
            }
            this.drawToolbar.activate(esri.toolbars.Draw.ARROW);
            this.disablePan();
        },
 
 

  
 
 
 
最后，添加绘制图形在地图上展示：
 
 
 

  
 
 
 
        /**
         * 绘制完毕调用的函数
        */
        drawEndPlot: function (geometry,symbol) {
            var title = "标题";
            var htmlCon = "测试内容测试内容";
            var attr = { "title": title, "content": htmlCon};
            var graphic = new esri.Graphic(geometry, symbol, attr);
            DCI.Plot.graphicslayer.add(graphic);
            DCI.Plot.deactivateDraw();
            DCI.Plot.map.setMapCursor('auto');//设置鼠标的光标          
        },
 
 

  
 
 
 
 
 

  
 
 
 
        /**
         * 拓展Draw绘制完毕调用的函数
        */
        addToMap: function (evt) {
            DCI.Plot.map.setMapCursor('auto');//设置鼠标的光标      
            var symbol;
            DCI.Plot.toolbar.deactivate();
            DCI.Plot.toolbar1.deactivate();
            switch (evt.geometry.type)
            {
                case "point":
                case "multipoint":
                    symbol = DCI.Plot.markerSymbol;
                    break;
                case "polyline":
                    symbol = DCI.Plot.lineSymbol;
                    break;
                default:
                    symbol = DCI.Plot.fillSymbol;
                    break;
            }
            var title = "标题";
            var htmlCon = "测试内容测试内容";
            var attr = { "title": title, "content": htmlCon};
            var graphic = new esri.Graphic(evt.geometry, symbol, attr);
            DCI.Plot.graphicslayer.add(graphic);
        },
 
 

  
 
 

 在线标注使用详解
 
 
 
 
       1、在线标注含有 点 线 面 的矢量标注（KML/KMZ/SHP/DWG/DXF）
 
       2、标注矢量导入导出（支持格式KML、KMZ、SHP、GPX（GPS测量坐标））
 
       3、矢量标注自动叠加到卫星图像上一起下载(矢量栅格化)
 
       4、在AutoCAD中打开标注的矢量点、线、面及属性
 
  
 
  打开矢量标注：如下图
 
 
 
 打开之后，如下图：
 
 
 
  开始点线面的标注，如下图：
 
 
 
  
 
 添加好点线面后，可进入编辑状态，选择标注工具栏中的【选择】按钮，然后鼠标移动都点线面上，可以左键单击选中，也可以左键双击弹出属性对话框，修改属性，如下图：
 
 【单击选中】
 
 
 
 【双击弹出属性框】
 
 
 
  
 
  双击弹出属性对话框可以完成以下属性修改：
 
  
 
         1、修改点的颜色，点的大小，拖动点的位置
 
         2、修改线的粗细、颜色、拖动线条的整体位置
 
         3、修改面的填充颜色、面的边界线条颜色、拖动面的整体移动；显示面的周长、面积
 
         4、显示/不显示 点、线、面、的标注名称
 
         5、选中点、线、面、点右键删除选中
 
         6、在标注绘制点、线、面的过程中单击右键取消上一步操作
 
  
 
 【保存标注】
 
    当你完成自己的标注后，可将标注保存为矢量格式(KML、KMZ、SHP、DXF、DWG等等)，方便在其他软件中打开，比如：Arcgis、Global Mapper、AutoCAD等等...；如下图：
 
  
 
 
 
 
 【在AutoCAD中打开矢量标注】
 
 
 
 
     将保存好的标注用global mapper(下载地址：Global Mapper 14.1汉化版.rar)打开，如下图：
 
 
 
 
 然后另存为DWG或者DXF格式 （AutoCAD），如下图：
 
 
 
 
 
 
 输出矢量格式选择 DWG 或者 DXF，如下图：
 
 
 
 选择好之后，一路确定即可，双击保存好的DXF或者DWG 文件，在AutoCAD种打开，如下图所示：
 
 
 
 【矢量标注栅格化——将矢量标注和卫星图像叠加下载】
 
    标注好的矢量数据除了可以像上面介绍的单独保存，也可以叠加到卫星图像上一起下载下来。
 
    我们要保存的标注如下图：
 
 
 
 
 
 
   选择你要保存的范围，可选择矩形框、多边形、导入边界、标准分幅等等，如下图选择矩形框保存：
 
 
 
 选择好下载范围之后，双击下载（和普通的下载一样），弹出对话框如下图：
 
 
 
   勾选上图红色箭头的地方【叠加标注图层】，其他选项和普通下载一样，选择拼接，选择好你需要的一个层级，点击确定，开始下载。下载完成后的打开如下图所示：
 
   放大图像如下图：
 
 
 
 
 
 
    【 其它应用可详询QQ：384720499；电话：4006608905】