Go to content Go to navigation Go to search

geo-spatial.org: An elegant place for sharing geoKnowledge & geoData

Căutare



RSS / Atom / WMS / WFS


Contact


Lista de discuții / Forum


Publicat cu Textpattern


Comunitatea:

Conferința FOSS4G-Europe 2017
Conferința FOSS4G 2017

ArcIMS: eliminarea butonului Refresh Map

de Vasile Crăciunescu

Publicat la 15 Aug 2006 | Secţiunea: Tutoriale | Categoria: IMS/
Nivel de dificultate:
25.10.2014 Tutorialul de fața folosește o versiunea mai veche a softului prezentat. Va rugăm consultați versiunea actualizată sau contactați autorul.

Introducere

În majoritatea aplicațiilor de webmapping, bifarea/debifarea casetei ce controlează vizibilitatea unui strat nu produce un efect imediat, fiind necesară folosirea unui buton care să actualizeze conținutul hărții (Ex: Refresh Map, Redraw Map, Update Map). Motivația pentru aceastăa bordare, diferită de ceea ce găsim în aplicațiile GIS desktop, trebuie căutată în modul de funcționare a acestor aplicații. Practic, fiecare modificare, efectuată de utilizator, asupra modului de afișarea a straturilor, este trimisă către aplicația server. În funcție de extinderea spațială, nivelul de zoom și configurația straturilor, aceasta generează harta și o trimite către browser. În cazul în care utilizatorul nu dispune de o conexiune Internet rapidă și dorește să facă mai multe modificări în modul de afișare a straturilor, abordarea cu butonul Refresh Map este de preferat deoarece scurtează timpii de încărcare, trimițînd o singură cerere către server. În situația în care utilizatorul dispune de o conexiune rapidă sau aplicația mapserver rulează în cadrul unui Intranet, butonul de Refresh poate fi eliminat. În continuare vom prezenta pașii ce trebuiesc parcurși pentru eliminarea acestui buton din template-ul implicit al aplicației ArcIMS 9.x (HTML viewer) și afișarea/ascunderea imediată a unui strat la bifarea/debifarea butonului corespunzător.

Abordare practică

Pentru realizarea acestui tutorial am am folosit instrumentele standard oferite de ESRI: ArcIMS Administrator, ArcIMS Author, ArcIMS Designer, pentru crearea și publicarea serviciului de webmapping și un editor de text, EditPlus, pentru modificarea codului HTML și JavaScript. Codul de plecare a fost cel implicit realizat de aplicația ArcIMS Designer (Figura 1).

ArcIMS - Interfața HTML implicită.

Figura 1. ArcIMS – Interfața HTML implicită.

Firesc, primul pas în eliminarea butonului este identificarea codului care îl generează. Template-urile implicite ale ArcIMS se bazează pe o structură HTML complicată, ce utilizează elementele Frame și Table pentru poziționarea elementelor funcționale ale aplicației. Această abordare nu este recomandată de standardele WC3 deoarece nu asigură separarea setructurii semantice de prezentarea grafică.

După o scurtă căutare, am identificat codul cu pricina, liniile 174 – 179, din fișierul toc.htm aflat în rădăcina site-ului generat de ArcIMS Designer (Listing 1).

listing 1: arcims_toc_initial
#Code
0001document.writeln('<TR>');
0002document.writeln(' <TD ALIGN="center" COLSPAN="3">');
0003document.writeln(' <HR WIDTH=90%>');
0004document.writeln(' <INPUT TYPE="button" NAME="refreshButton" VALUE="' + t.buttonList[44] + '" onClick="updateLayers()">');
0005document.writeln(' </TD>');
0006document.writeln('</TR>');

De aici aflăm informația esențială, și anume numle funcției care realizează actualizarea hărții, atunci cînd utilizatorul apasă butonul: onClick=“updateLayers()”. În continuare, vom încerca să declanșăm aplelarea aceastei funcții, folosind checkbox-urile din dreptul fiecărui strat și nu butonul Refresh Map. Am identificat codul care generează acest checkbox în linia 150 din fișierul toc.htm (Listing 2).

listing 2: arcims_toc_checkbox_initial
#Code
0001document.write('<input type="Checkbox" name="LayerVisible" value="' + i + '"');

Apelarea funcției updateLayers() se face prin adăugarea fragmentului de cod onClick=“updateLayers()” în această linie (Listing 3).

listing 3: arcims_toc_checkbox
#Code
0001document.write('<input type="Checkbox" name="LayerVisible" onClick="updateLayers()" value="' + i + '"');

Pentru finalizarea tutorialului, se elimină liniile 174-179 și se salvează documentul. Efectul este cel așteptat, bifarea/debifarea checkbox-ului asociat unui strat va declanșa reafișarea hărții și includerea/excluderea stratului respectiv în/din hartă. Fișierul toc.htm astfel modificat poate fi studiat în Listingul 4.

listing 4: arcims_toc_final
#Code
0001<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
0002<HTML>
0003<HEAD>
0004<TITLE>LayerList</TITLE>
0005<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
0006<STYLE TYPE="text/css">
0007a {text-decoration:none;}
0008</STYLE>
0009<SCRIPT LANGUAGE="Javascript">
0010var t;
0011var tName = "";
0012if (opener) {
0013if (opener.name=="MapFrame") {
0014t = opener.parent.MapFrame;
0015tName = "opener.parent.MapFrame.";
0016} else {
0017t = opener;
0018tName = "opener.";
0019}
0020} else {
0021 
0022if (parent.MapFrame!=null) {
0023t = parent.MapFrame;
0024tName = "parent.MapFrame.";
0025} else {
0026t=document;
0027}
0028}
0029 
0030function setActiveLayer(i) {
0031var theForm = document.forms[0];
0032t.ActiveLayer=t.LayerID[i];
0033t.ActiveLayerType=t.LayerType[i];
0034t.ActiveLayerIndex=i;
0035t.setActiveLayer(i);
0036var isOk = t.checkHyperLinkLayer(i);
0037if (t.toolMode==15) {
0038 
0039if (!isOk) {
0040t.currentHyperLinkLayer="";
0041t.currentHyperLinkField="";
0042t.currentHyperLinkPrefix="";
0043t.currentHyperLinkSuffix="";
0044alert(t.msgList[47]);
0045 
0046}
0047}
0048//alert(t.ActiveLayerIndex + "." + t.ActiveLayer);
0049 
0050}
0051 
0052function showLayerInfo(i) {
0053t.showLayerInfo(i);
0054}
0055 
0056// refresh map display with checked layers visible
0057function updateLayers() {
0058//alert(layerCount);
0059//alert(parent.TOCFrame.document.forms[0].LayerVisible.length);
0060var theForm = document.forms[0];
0061var j = 0;
0062if (theForm.LayerVisible.length>1) {
0063for (var i=0;i<theForm.LayerVisible.length;i++) {
0064j = theForm.LayerVisible[i].value;
0065if (theForm.LayerVisible[i].checked) {
0066t.LayerVisible[j] = 1;
0067}
0068else {
0069t.LayerVisible[j] = 0;
0070}
0071}
0072/*
0073} else {
0074if (theForm.LayerVisible.checked) {
0075j = theForm.LayerVisible.value;
0076t.LayerVisible[j] = 1;
0077}
0078else {
0079t.LayerVisible[j] = 0;
0080}
0081}
0082*/
0083} else {
0084j = theForm.LayerVisible.value;
0085if (theForm.LayerVisible.checked) {
0086t.LayerVisible[j] = 1;
0087} else {
0088t.LayerVisible[j] = 0;
0089}
0090}
0091 
0092t.sendMapXML();
0093 
0094}
0095// stop displaying the Layerlist
0096// only works in separate window
0097function closeIt() {
0098t.LayerListOpen=false;
0099window.close();
0100}
0101// startup function for separate window
0102function startUp() {
0103if (opener) {
0104t.LayerListOpen=true;
0105window.focus();
0106}
0107}
0108 
0109</SCRIPT>
0110</HEAD>
0111<BODY BGCOLOR="Silver" TEXT="Black" LEFTMARGIN=0 RIGHTMARGIN=0 LINK="Black" VLINK="Black" ALINK="Black" TOPMARGIN=0 onload="startUp()">
0112<FORM>
0113<CENTER>
0114 
0115<TABLE WIDTH="100%">
0116<TR>
0117<TD ALIGN="LEFT">
0118<FONT FACE="Arial" SIZE="-2"><B>
0119 
0120<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
0121if (opener) {
0122document.writeln('<td align="CENTER">');
0123document.writeln('<font face="Arial" size="-2"><b>');
0124 
0125document.writeln('<INPUT TYPE="button" NAME="hideButton" VALUE="' + t.buttonList[42] + '" onClick="closeIt()">');
0126}
0127</SCRIPT>
0128 
0129</B></FONT>
0130</TD>
0131</TR>
0132</TABLE>
0133 
0134<HR WIDTH="75%">
0135<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
0136document.writeln('<FONT FACE="Arial"><B>' + t.titleList[13] + '</B>');
0137document.writeln('<TABLE CELLSPACING="0" CELLPADDING="1" NOWRAP>');
0138document.writeln('<TR>');
0139document.writeln('<TD ALIGN="CENTER"><FONT FACE="Arial Narrow" SIZE="-3">' + t.titleList[14] + '</FONT></TD>');
0140document.writeln('<TD ALIGN="CENTER"><FONT FACE="Arial Narrow" SIZE="-3">' + t.titleList[15] + '</FONT></TD>');
0141document.writeln('<TD><FONT FACE="Arial Narrow" SIZE="-3"> </FONT></TD>');
0142 
0143document.writeln('</TR>');
0144var theCount = t.layerCount;
0145//alert(theCount);
0146for (var i=0;i<theCount;i++) {
0147if ((!t.hideLayersFromList) || ((t.hideLayersFromList) && (!t.noListLayer[i]))) {
0148if ((t.listAllLayers) || ((t.mapScaleFactor>=t.LayerMinScale[i]) && (t.mapScaleFactor<=t.LayerMaxScale[i]))) {
0149document.writeln('<tr><td>');
0150document.write('<input type="Checkbox" name="LayerVisible" onClick="updateLayers()" value="' + i + '"');
0151if (t.LayerVisible[i] == 1) document.write(' checked');
0152document.writeln(' ></td>');
0153document.write('<td>');
0154 
0155if (t.LayerIsFeature[i]) {
0156document.write('<input type="Radio" onclick="setActiveLayer(' + i + ')" name="Active"');
0157if (t.ActiveLayerIndex==i) document.write(' checked');
0158document.write('>');
0159} else {
0160document.write('&nbsp;');
0161}
0162document.writeln('</td>');
0163 
0164document.writeln('<td><font face="Arial" size="-1">' + t.LayerName[i] + '</font></td>');
0165if (t.displayLayerInfoButton) {
0166document.write('<td><INPUT TYPE="Button" NAME="InfoButton" VALUE="' + t.buttonList[43] + '" onclick="showLayerInfo(' + i + ')"></td>');
0167}
0168document.writeln('</tr>');
0169}
0170}
0171}
0172 
0173 
0174</SCRIPT>
0175 
0176</TABLE>
0177</FONT>
0178</CENTER>
0179</FORM>
0180</BODY>
0181</HTML>
0182<HTML>
0183<HEAD>
0184<TITLE>Table of Contents</TITLE>
0185<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
0186</HTML>

Descarcă codul în format text
[Nr. descărcări: 790]

Discută articolul (0 comentarii)

Categorii