SuperMap IS.NET自定义Action之兴趣点标注

在SuperMap IS.NET AjaxScripts开发中，提供了一个名为SuperMap.IS.Action.js的脚本文件，供开发人员添加自定义动作。

兴趣点（Point Of  Interest）标注算是经常用到的功能，供用户在浏览地图时，对自己感兴趣内容在图上进行标注。

本脚本算是初步完成，提供文本、点、线和面的标注。代码如下：

//用户自定义兴趣点标注
//title: 标注名
//note: 备注
//showPic: 是否显示logo ture/false
//hotpic: logo图片名(包含后缀)
SuperMap.IS.DrawMarkPointAction=function(title, note, showPic, hotpic)
{
    this.type="SuperMap.IS.DrawMarkPointAction";
    var x=null;
    var y=null;
    var _showPic=false;
    var _hotpic=null;
   
    this.Init=function(mapControl)
    {
        this.mapControl=mapControl;
        if(ygPos.browser=="ie")
        {
            mapControl.container.style.cursor="images/cursors/PointQuery.cur";
        }
        else
        {
            mapControl.container.style.cursor="crosshair";
        }
        
        if(showPic != null)
        {
            _showPic = showPic;
        }
        
        if(hotpic == null)
        {
            _hotpic = "images/hotball.gif";
        }
        else
        {
            _hotpic = "images/" + hotpic;
        }
    }
    
    this.Destroy=function()
    {
        this.mapControl=null;
        x=null;
        y=null;
    }
    
    function _OnClick(e)
    {
       x = e.mapCoord.x;
       y = e.mapCoord.y;
       
       if(_showPic == true)
       {
           this.mapControl.CustomLayer.AddMark("markPoint", x, y, null, null, "<div><img src='" + _hotpic + "' style='cursor:pointer' title='" + note + "' /><span> " + title + "</span></div>");
       }
       else
       {
           this.mapControl.CustomLayer.AddMark("markPoint", x, y, null, null, "<div><b>" + title + "</b> " + note + "</div>");
       }
    }
    
    function _OnContextMenu(e)
    {
        this.mapControl.SetAction(null);
    }
    
    function _GetJSON()
    {
        return _ActionToJSON(this.type,[]);
    }

    this.OnClick=_OnClick;
    this.OnContextMenu=_OnContextMenu;
    this.GetJSON=_GetJSON;
}

//用户自定义兴趣线标注
//title: 标注名
//note: 备注
//showPic: 是否显示标注内容
//hotpic: logo图片名(包含后缀)
SuperMap.IS.DrawMarkLineAction=function(title, note, showLabel, hotpic)
{
    this.type="SuperMap.IS.DrawMarkLineAction";
    var actionStarted=false;    
    var keyPoints=new Array();
    var xs=new Array();
    var ys=new Array();
    var _showLabel=false;
    var _hotpic=null;
    
    this.Init=function(mapControl)
    {
        this.mapControl=mapControl;
        if(ygPos.browser=="ie")
        {
            mapControl.container.style.cursor="images/cursors/PointQuery.cur";
        }
        else
        {
            mapControl.container.style.cursor="crosshair";
        }
        
        if(showLabel != null)
        {
            _showLabel = showLabel;
        }
        
        if(hotpic == null)
        {
            _hotpic = "images/hotball.gif";
        }
        else
        {
            _hotpic = "images/" + hotpic;
        }
    }
    
    this.Destroy=function()
    {
        this.mapControl=null;
        xs=null;
        ys=null;
    }
    
    function _OnClick(e)
    {        
        if(!actionStarted)
        {
            keyPoints.push(e.mapCoord);
            xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
            actionStarted=true;         
        }       
        
        keyPoints.push(e.mapCoord);
        xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
    }
    
    this.OnMouseMove=function(e){
        if(!actionStarted){return false;}
        keyPoints.pop();
        xs.pop();ys.pop();
        keyPoints.push(e.mapCoord);
        xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
        this.mapControl.CustomLayer.InsertLine(title,xs,ys,2,"blue");
    }
        
    function _OnContextMenu(e)
    {
        if(_showLabel == true)
        {
            var i = Math.round(keyPoints.length / 2) - 1;    
            this.mapControl.CustomLayer.InsertMark("markPoint", xs[i], ys[i], null, null, "<div><img src='" + _hotpic + "' style='cursor:pointer' title='" + note + "' /><span>" + title + "</span></div>");
        }
        
        this.mapControl.SetAction(null);
    }
    
    function _GetJSON()
    {
        return _ActionToJSON(this.type,[]);
    }

    this.OnClick=_OnClick;
    this.OnContextMenu=_OnContextMenu;
    this.GetJSON=_GetJSON;
}

//用户自定义兴趣面标注
//title: 标注名
//note: 备注
//showPic: 是否显示标注内容
//hotpic: logo图片名(包含后缀)
SuperMap.IS.DrawMarkPolygonAction=function(title, note, showLabel, hotpic)
{
    this.type="SuperMap.IS.DrawMarkPolygonAction";
    var actionStarted=false;
    var keyPoints=new Array();
    var xs=new Array();
    var ys=new Array();
    var xcenter=0;
    var ycenter=0;
    var _showLabel=false;
    var _hotpic=null;
    
    this.Init=function(mapControl)
    {
        this.mapControl=mapControl;
        if(ygPos.browser=="ie")
        {
            mapControl.container.style.cursor="images/cursors/PointQuery.cur";
        }
        else
        {
            mapControl.container.style.cursor="crosshair";
        }
        
        if(showLabel != null)
        {
            _showLabel = showLabel;
        }
        
        if(hotpic == null)
        {
            _hotpic = "images/hotball.gif";
        }
        else
        {
            _hotpic = "images/" + hotpic;
        }
    }
    
    this.Destroy=function()
    {
        this.mapControl=null;
        xs=null;
        ys=null;
    }
    
    function _OnClick(e)
    {        
        if(!actionStarted)
        {
            keyPoints.push(e.mapCoord);
            xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
            actionStarted=true;         
        }       
        
        keyPoints.push(e.mapCoord);
        xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
    }
    
    this.OnMouseMove=function(e){
        if(!actionStarted){return false;}
        keyPoints.pop();
        xs.pop();ys.pop();
        keyPoints.push(e.mapCoord);
        xs.push(e.mapCoord.x);ys.push(e.mapCoord.y);
        this.mapControl.CustomLayer.InsertPolygon(title, xs, ys, 2, "blue", "white", 0.6,1);
    }
        
    function _OnContextMenu(e)
    {
        if(_showLabel == true)
        {
            // 多边形几何中心
            var n = keyPoints.length;
            for(var i=0; i<n; i++)
            {
                xcenter += xs[i] / n;
                ycenter += ys[i] / n;
            }
            
            this.mapControl.CustomLayer.InsertMark("markPoint", xcenter, ycenter, null, null, "<div><img src='" + _hotpic + "' style='border:0px; cursor:pointer' title='" + note + "' /><span>" + title + "</span></div>");
        }
        
        this.mapControl.SetAction(null);
    }
    
    function _GetJSON()
    {
        return _ActionToJSON(this.type,[]);
    }

    this.OnClick=_OnClick;
    this.OnContextMenu=_OnContextMenu;
    this.GetJSON=_GetJSON;
}
调用方法：

function SetCustomMark()
{
    var caption = $("Caption").value;
    var remark = $("Remark").value;
    var type = $("mark_type").value;
   
    switch(type)
    {
        case "text":
            SetMarkTextAction(caption,remark);
            break;
        case "point":
            SetMarkPointAction(caption,remark);
            break;
        case "line":
            SetMarkLineAction(caption,remark);
            break;
        case "polygon":
            SetMarkPolygonAction(caption,remark);
            break;
        default:
            break;
    }
}

function SetMarkTextAction(caption,remark)
{
    markPointAction = new SuperMap.IS.DrawMarkPointAction(caption,remark,false);
    MapControl1.SetAction(markPointAction);
}

function SetMarkPointAction(caption,remark)
{
    markPointAction = new SuperMap.IS.DrawMarkPointAction(caption,remark,true);
    MapControl1.SetAction(markPointAction);
}

function SetMarkLineAction(caption,remark)
{
    markLineAction = new SuperMap.IS.DrawMarkLineAction(caption,remark);
    MapControl1.SetAction(markLineAction);
}

function SetMarkPolygonAction(caption,remark)
{
    markPolygonAction = new SuperMap.IS.DrawMarkPolygonAction(caption,remark);
    MapControl1.SetAction(markPolygonAction);
}
脚本下载地址：http://download.csdn.net/source/591063

还有部分待完善，使自主标注内容能在线保存：）

欢迎提供建议！