iClient for Javascript拖拽绘制图标

时间:2022-05-17 20:31:54

作者:柳惠珠

引言

    在现在的动态标绘中,只能点击要绘制的标号然后绘制到地图上,可是有些小伙伴却想要拖拽绘制到地图上。现在我们就来说说拖拽绘制标号该如何实现吧~
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").onmousemove=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()方法
iClient for Javascript拖拽绘制图标
    这里我们实现的拖拽警用标号里面的图标,警用标号中的标号库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,需要自己进行替换