iClient for Javascript拖拽绘制图标

作者：柳惠珠

###引言
    在现在的动态标绘中，只能点击要绘制的标号然后绘制到地图上，可是有些小伙伴却想要拖拽绘制到地图上。现在我们就来说说拖拽绘制标号该如何实现吧~

    在这里我们仅以标号库的警用标号为例，警用标号是一个点即可绘制的，如果是基本图元和常用标号需要多个点。

###一.在引用的PlotPanel.js中

####1.在标绘面板类中新建一个属性

/**
 * Property: domCallback
 * 绑定标绘面板图片等dom的事件，回调返回dom对象
*/
	domCallback:null,

####2.找到createDrawNodes方法，实现domCallback

iconNode.appendChild(table);
//自定义dom事件
if(me.domCallback!=null){
	me.domCallback(iconNode,treeNode);
	//返回的是iconNode（标绘面板图例），treeNode（标绘面板树状图）
}

###二.在plot.html中

####1.在创建标绘面板后，去调用domCallback

//创建标绘面板
plotPanel = new SuperMap.Plotting.PlotPanel("plotPanel", serverUrl, map);
plotPanel.events.on({"initializeCompleted": initializeCompleted});
plotPanel.initializeAsync();
			
plotPanel.domCallback=function(iconNode,treeNode){
//标绘面板图例，标绘面板树状图
//找到面板中的所有装图例的div
var img = $(iconNode).find("td>div");
//判断里面的每一个libID是否为421，只有警用标号才绑定拖拽的事件
img.each(function(index,dom){
	if(dom.libID == 421){
	}
};

####2.监听标绘面板图例的mousedown事件
    其实标绘面板的图例就img标签，domCallback返回的是一个dom对象，可以查找到dom对象下的img标签，然后对img标签进行绑定mousedown事件。
写在domCallback的方法里面。

if(dom.libID == 421){
//如果是选择的警号标绘库里面的即libID为421，那么就绑定事件
var a=$(iconNode).find("img");
//随鼠标移动的img会有一些偏移，
wid = $(iconNode).width();
hei = a[0].height;
var mousedown,mouseup,points = [],symbolCode,src;
	a.bind("mousedown",function(e){
	e.preventDefault();
	//当plottingAllDeactivate为true绘制标号，为false时不绘制
	plottingAllDeactivate = true;
	mousedown=e;			symbolCode=mousedown.currentTarget.parentElement.symbolCode;
	src = mousedown.currentTarget.src;
//在点击的时候在地图上添加一个img标签，用于在地图上拖动的时候进行显示
$("<img src="+ss+" id ='IMG' style='position:absolute;z-index:9999;display:none'><img>").appendTo($("#iconmove"));
//判断是点击标号还是拖拽标号
click = false;
});

####3.监听监听标绘面板图例的mouseup事件
    如果有mouseup事件，即表示是点击的标号，而不是拖拽，那么就绑定地图事件

a.bind("mouseup",function(e){
	click = true;
});

####4.监听地图的onmousemove事件

document.getElementById("map").function(e){
	//判断是点击还是拖拽
	if(click == false){
	//wid为标号面板的宽度，高度为68
	var x = e.x-wid-50;
	var y = e.y-68;
	//在移动的时候获取当前鼠标的位置，然后赋给img标签
	$("#IMG").css("display","block");
	$("#IMG").css("left",x+"px");
	$("#IMG").css("top",y+"px");
	}
};

####5.监听地图的mouseup事件

    当鼠标松开的时候开始绘制标号
    绘制的时候使用plottingLayer.createSymbolWC()方法

    这里我们实现的拖拽警用标号里面的图标，警用标号中的标号库ID都是421，并且警用标号里面的图标都只是由一个坐标点构成的。

map.events.on({"mouseup":function(e){
//判断是点击还是拖拽
if(click == false){
//将显示的img标签移除掉
	$("#IMG").remove();
	mouseup=e;
	var lonlat = plottingLayer.getLonLatFromViewPortPx(new SuperMap.Pixel(mouseup.xy.x,mouseup.xy.y));
var point= new SuperMap.Geometry.Point(lonlat.lon,lonlat.lat);
	points[0] = point;
	if(plottingAllDeactivate == true){
		plottingLayer.createSymbolWC(421,symbolCode,points);
	}
}
}});

    详细的代码可以点此链接进行下载
链接: http://pan.baidu.com/s/1ge9C5AN 密码: mc84
    仅提供了修改的html页面和安装目录下
    iClient\forJavaScript\examples\js\plottingPanel\PlotPanel.js，需要自己进行替换