javascript生成自定义的arcgis simpletoolbar

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

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

  1 function ZSymbol(){
  2    this.items=[{borderColor:"#ffcc00",fillColor:"#bfbfbf"},{borderColor:"#eaeaea",fillColor:"#dcdcdc"},{borderColor:"#efeaea",fillColor:"#dcacdc"}];
  3    this.sym;
  4    this.symItems;
  5    this.symOperater;
  6 }
  7 
  8 ZSymbol.prototype={
  9     initItem:function(){
 10         for(var i=0;i<this.items.length;i++){
 11             var item=this.addItem(this.items[i]);
 12 
 13             this.symItems.appendChild(item);
 14         }
 15     },
 16     initOperater:function(){
 17         var add=document.createElement("INPUT");
 18         add.type="button";
 19         add.value="添加";
 20         ZEvent.addListener(add,"click",function(){
 21             var obj = zsymbol.addItem({borderColor:document.getElementById("borderColor").value,fillColor:document.getElementById("fillColor").value})
 22             zsymbol.symItems.appendChild(obj);
 23         });
 24         this.symOperater.appendChild(add);
 25 
 26         var edit=document.createElement("INPUT");
 27         edit.type="button";
 28         edit.value="编辑";
 29         ZEvent.addListener(edit,"click",this.editItem);
 30         this.symOperater.appendChild(edit);
 31 
 32         var del=document.createElement("INPUT");
 33         del.type="button";
 34         del.value="删除";
 35         ZEvent.addListener(del,"click",this.deleteItem);
 36         this.symOperater.appendChild(del);
 37 
 38         var operates=document.createElement("DIV");
 39         operates.>;
 40         operates.innerHTML='边框颜色<input type="text" onfocus="showPicker(this);" >;
 41         this.symOperater.appendChild(operates);
 42     },
 43     selectItem: function(event){
 44         drawPolygon(rgbToDojoColor(event.srcElement.style.borderColor),rgbToDojoColor(event.srcElement.style.backgroundColor));
 45 
 46     },
 47     addItem:function(obj){
 48         var item=document.createElement("DIV");
 49         item.className="symbolItem";
 50         item.title="单击绘图，双击删除该样式"
 51         item.style.borderColor=obj.borderColor;
 52         item.style.backgroundColor=obj.fillColor;
 53         ZEvent.addListener(item,"click",this.selectItem);
 54         ZEvent.addListener(item,"mouseover",this._onmouseover);
 55         ZEvent.addListener(item,"mouseout",this._onmouseout);
 56         ZEvent.addListener(item,"dblclick",this.deleteItem);
 57 //        var itemEdit=document.createElement("SPAN");
 58 //        itemEdit.className="symbolEdit";
 59 //        itemEdit.title="编辑选中项";
 60 //        ZEvent.addListener(itemEdit,"click",this.editItem);
 61 //        item.appendChild(itemEdit);
 62 //
 63 //        var itemDeletet=document.createElement("SPAN");
 64 //        itemDeletet.className="symbolDelete";
 65 //        itemDeletet.title="删除选中项";
 66 //        ZEvent.addListener(itemDeletet,"click",this.deleteItem);
 67 //        item.appendChild(itemDeletet);
 68         return item;
 69     },
 70     editItem:function(){
 71         alert(2);
 72     },
 73     deleteItem:function(evt){
 74         if(confirm("确定删除此项吗？")){
 75             zsymbol.symItems.removeChild(evt.srcElement);
 76         }
 77     },
 78     _onmouseover:function(evt){
 79         var obj=evt.srcElement.getElementsByTagName("SPAN");
 80         for(var i=0;i<obj.length;i++){
 81             obj[i].style.display="inline-block";
 82         }
 83     },
 84     _onmouseout:function(evt){
 85         var obj=evt.srcElement.getElementsByTagName("SPAN");
 86         for(var i=0;i<obj.length;i++){
 87             obj[i].style.display="none";
 88         }
 89     }
 90 
 91 };
 92 
 93 ZSymbol.prototype.init=function(){
 94     var zSymbol=document.createElement("DIV");
 95     zSymbol.className="symbolContainer";
 96     this.sym=zSymbol;
 97 
 98     var items=document.createElement("DIV");
 99     items.className="symbolItems";
100     this.symItems=items;
101     zSymbol.appendChild(items);
102 
103     var operaters=document.createElement("DIV");
104     operaters.className="symbolOperater";
105     this.symOperater=operaters;
106     zSymbol.appendChild(operaters);
107 
108     document.body.appendChild(zSymbol);
109     this.initItem();
110     this.initOperater();
111 };

View Code