recent study ARCGIS for Javascript process, ESRI's online help saw such a Example , view the source code, I find that the left side of the tool is not very good scalability, and the elements of style can not be defined, so he began to design a custom border and Fill Color gadget.
1. Package setSymbol categories: the realization of such a prototype-based chain, has an initial (init), initialization (initOperater), generate style items (initItem), Add Item (addItem), edit the item (editItem, unrealized) , delete items (deleteItem) and so on. Detailed code is as follows:
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.id="addContent";
40 operates.innerHTML='边框颜色<input type="text" onfocus="showPicker(this);" id="borderColor"><br/>填充颜色<input type="text" onfocus="showPicker(this)"; id="fillColor">';
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 };
2. class mainly through ZEvent.addListener event registration method, purpose of doing so is to maintain setSymol object to reduce the coupling components other JS
can also be carried out using JQuery or Dojo event registration. Code is as follows:
1 window.ZEvent = { //自定义事件处理
2 addListener: function(obj, target, act){
3 if (obj.attachEvent)
4 obj.attachEvent("on" + target, act);
5 if (obj.addEventListener)
6 obj.addEventListener(target, act, false);
7 },
8 removeListener: function(obj, target, act){
9 if (obj.detachEvent)
10 obj.detachEvent("on" + target, act);
11 if (obj.removeEventListener)
12 obj.removeEventListener(target, act, false);
13 }
14 }
3.setSymbol supports manual input color value and generate elements of style, of course, in order to obtain a better user experience, the example uses the dojo color picker for color acquisition.
Because IE10, Chrome obtained colored value is in decimal, IE8 get is hexadecimal, which requires a color conversion function to get Arcgis supported color format.
code is as follows:
1 function rgbToDojoColor(obj){
2 var result;
3 var temp=new Array();
4 if(obj.lastIndexOf("rgb")>=0){
5 result=obj.replace("rgb(","");
6 result=result.replace(")","");
7 temp=result.split(',');
8 }
9 else if(obj.lastIndexOf("#")>=0){
10
11
12 result=obj.replace("#","");
13 temp.push(parseInt("0x"+result.substring(0,2)));
14 temp.push(parseInt("0x"+result.substring(2,4)));
15 temp.push(parseInt("0x"+result.substring(4,6)));
16 }
17 return temp;
18 }
4. At this point, the tool's main code has been completed. Operating results are shown below:
5. release Note: This example source files at the end of the article, published modify the two addresses.
indexMap3.5.html in Arcgis Api address:
init.js the map service address:
Summary: The preparation gadget has several deficiencies:
1. deleteItem method in place, call the declared variables zsymbol, is not conducive to the code porting and redefine
2.Item of _onmouseover and _onmouseout method has problems, so the style of editing and deleting the small icon failed to achieve.
3. For the text of the deficiencies, please feel free to correct me park friends! Meanwhile, in this beautiful "Tanabata" day, I wish the program ape / Yuan were happy Tanabata! ! !
没有评论:
发表评论