javascript生成自定义的arcgis simpletoolbar

javascript生成自定义的arcgis simpletoolbar

　最近在学习ARCGIS for Javascript过程中，在ESRI的在线帮助上看见了这样一个示例，查看源码后，觉得左侧工具的可扩展性并不是太好，并且要素的样式还不能自定义，于是就开始着手设计一个可以自定义边框和填充颜色的小工具。

　　1.封装setSymbol类：此类的实现基于原型链，有初始（init)、初始化操作(initOperater)、生成样式项（initItem)、添加项（addItem)、编辑项（editItem,未实现）、删除项（deleteItem) 等。详细代码如下：

 

function ZSymbol(){
this.items=[{borderColor:"#ffcc00",fillColor:"#bfbfbf"},{borderColor:"#eaeaea",fillColor:"#dcdcdc"},{borderColor:"#efeaea",fillColor:"#dcacdc"}];
this.sym;
this.symItems;
this.symOperater;
}

ZSymbol.prototype={
initItem:function(){
for(var i=0;i<this.items.length;i++){
var item=this.addItem(this.items[i]);

this.symItems.appendChild(item);
}
},
initOperater:function(){
var add=document.createElement("INPUT");
add.type="button";
add.value="添加";
ZEvent.addListener(add,"click",function(){
var obj = zsymbol.addItem({borderColor:document.getElementById("borderColor").value,fillColor:document.getElementById("fillColor").value})
zsymbol.symItems.appendChild(obj);
});
this.symOperater.appendChild(add);

var edit=document.createElement("INPUT");
edit.type="button";
edit.value="编辑";
ZEvent.addListener(edit,"click",this.editItem);
this.symOperater.appendChild(edit);

var del=document.createElement("INPUT");
del.type="button";
del.value="删除";
ZEvent.addListener(del,"click",this.deleteItem);
this.symOperater.appendChild(del);

var operates=document.createElement("DIV");
operates.id="addContent";
operates.innerHTML='边框颜色<input type="text" onfocus="showPicker(this);" id="borderColor"><br/>填充颜色<input type="text" onfocus="showPicker(this)"; id="fillColor">';
this.symOperater.appendChild(operates);
},
selectItem: function(event){
drawPolygon(rgbToDojoColor(event.srcElement.style.borderColor),rgbToDojoColor(event.srcElement.style.backgroundColor));

},
addItem:function(obj){
var item=document.createElement("DIV");
item.className="symbolItem";
item.title="单击绘图，双击删除该样式"
item.style.borderColor=obj.borderColor;
item.style.backgroundColor=obj.fillColor;
ZEvent.addListener(item,"click",this.selectItem);
ZEvent.addListener(item,"mouseover",this._onmouseover);
ZEvent.addListener(item,"mouseout",this._onmouseout);
ZEvent.addListener(item,"dblclick",this.deleteItem);
// var itemEdit=document.createElement("SPAN");
// itemEdit.className="symbolEdit";
// itemEdit.title="编辑选中项";
// ZEvent.addListener(itemEdit,"click",this.editItem);
// item.appendChild(itemEdit);
//
// var itemDeletet=document.createElement("SPAN");
// itemDeletet.className="symbolDelete";
// itemDeletet.title="删除选中项";
// ZEvent.addListener(itemDeletet,"click",this.deleteItem);
// item.appendChild(itemDeletet);
return item;
},
editItem:function(){
alert(2);
},
deleteItem:function(evt){
if(confirm("确定删除此项吗？")){
zsymbol.symItems.removeChild(evt.srcElement);
}
},
_onmouseover:function(evt){
var obj=evt.srcElement.getElementsByTagName("SPAN");
for(var i=0;i<obj.length;i++){
obj[i].style.display="inline-block";
}
},
_onmouseout:function(evt){
var obj=evt.srcElement.getElementsByTagName("SPAN");
for(var i=0;i<obj.length;i++){
obj[i].style.display="none";
}
}

};

ZSymbol.prototype.init=function(){
var zSymbol=document.createElement("DIV");
zSymbol.className="symbolContainer";
this.sym=zSymbol;

var items=document.createElement("DIV");
items.className="symbolItems";
this.symItems=items;
zSymbol.appendChild(items);

var operaters=document.createElement("DIV");
operaters.className="symbolOperater";
this.symOperater=operaters;
zSymbol.appendChild(operaters);

document.body.appendChild(zSymbol);
this.initItem();
this.initOperater();
};

　　2.该类的事件注册主要是通过ZEvent.addListener方法实现，这样做的目的是为了保持setSymol对象减少其它JS组件的耦合性

也可以使用JQuery或Dojo进行事件注册。代码如下：

 

window.ZEvent = { //自定义事件处理
addListener: function(obj, target, act){
if (obj.attachEvent)
obj.attachEvent("on" + target, act);
if (obj.addEventListener)
obj.addEventListener(target, act, false);
},
removeListener: function(obj, target, act){
if (obj.detachEvent)
obj.detachEvent("on" + target, act);
if (obj.removeEventListener)
obj.removeEventListener(target, act, false);
}
}

　　3.setSymbol支持手工输入颜色值并生成要素样式，当然为了获得更好的使用体验，示例采用了dojo的拾色器进行颜色的获取。

由于IE10、Chrome得到的着色值是十进制的，IE8得到的是十六进制的，因而需要一个颜色转换函数，来获得Arcgis支持的颜色格式。

代码如下：

 

function rgbToDojoColor(obj){
var result;
var temp=new Array();
if(obj.lastIndexOf("rgb")>=0){
result=obj.replace("rgb(","");
result=result.replace(")","");
temp=result.split(',');
}
else if(obj.lastIndexOf("#")>=0){

result=obj.replace("#","");
temp.push(parseInt("0x"+result.substring(0,2)));
temp.push(parseInt("0x"+result.substring(2,4)));
temp.push(parseInt("0x"+result.substring(4,6)));
}
return temp;
}

　　4.至此，该工具的主要代码已完成。运行效果图如下所示：

　　

　　5.发布注意：本示例的源文件在文章结尾处，发布时请修改两处的地址。

　　　　indexMap3.5.html中Arcgis Api的地址：

　　　　　　　　

　　　　init.js中地图服务的地址：

　　总结：此次编写小工具有几处不足的地方：

　　1.在deleteItem方法处，调用了声明的变量zsymbol,不利于代码移植和重新定义

　　2.Item的_onmouseover和_onmouseout方法实现有问题，因此样式的编辑和删除功能未能过小图标实现。

　　3.针对文中的不足，请各位园友不吝指正！同时，在此美好的“七夕”之日，祝程序猿/媛们七夕快乐！！！

　　

Restarting......自我完善中.............

 

分类: ArcGIS