Depois de tanta teoria vamos iniciar a prática analisando a aplicação que está no seguinte endereço: http://gmaps-utility-gis.googlecode.com/svn/trunk/arcgislink/examples/simpleags.html Primeiro o simpleags.html: <!–
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Simple AGS</title> Nesse ponto a aplicação está chamando três scripts: o primeiro é o script do google maps versão 3 e não necessita mais uma chave para desenvolver as suas aplicações; o segundo script é um javascript da esri (arcgislink.js) com todos os seus componentes e têm as funções necessárias para estes; e finalmente o javascript da aplicação em si (simpleags.js) end e serão definidos todos os elementos para a aplicação em si. É nesse arquivo que a aplicação é desenvolvida de acordo com as necessidades. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"> </script> <script type="text/javascript" src="../src/arcgislink.js"> </script> <script type="text/javascript" src="simpleags.js"> </script> A aplicação continua... </head> <body> This sample has the basic functions of a GIS application: <br/> 1) A table of contents(TOC) to allow layers turn on/off, layers visiblity controled by map scale and reflected on TOC. <br/> 2) Allow click on map to do spatial query, with options to choose layers.<hr/> <table> <tr> <td valign="top"> <div style="width:200px;overflow:auto"> <div id="svcInfo"> </div> Note:Layers from cached service or Layers that are not visible in current zoom level are disabled. <br/> <div id="toc" style="border:1px solid gray"> </div> Click anywhere on map to show data(on right side of map). <br/> Essa combobox serve para selecionar o tipo de camada (layer) para obter os dados... Retrieve data for layer: <div id="clickOptsDiv"> </div> </div> </td> <td> Nessa div – map_canvas - será incluída o mapa conforme definido e de acordo com a posição definida no javascript... <div id="map_canvas" style="width:600px; height:400px; border:1px solid #000;"> </div> <div id="working" style="width:150px;height:100px;visibility:hidden;position:absolute;top:250px;left:450px;background-color:yellow"> Working.... </div> </td> <td valign="top" width="200"> Map data at clicked location: <div id="info" style="border:1px solid gray; height:380px; overflow:auto"> </div> </td> </tr> </table> <div> Nessa combobox é feita uma seleção do tipo de serviço a ser requisitado pela aplicação. Os serviços são chamados automaticamente após selecionado e sobreposto em cima do mapa c om todas as informações disponíveis. Switch to a different map service: <select id="svc" onchange="loadMapService()"> Opção 1 do serviço – Rodovias dos EUA <option selected="selected">Specialty/ESRI_StateCityHighway_USA/MapServer</option> Opção 2 do serviço – Rios dos EUA <option>Specialty/ESRI_StatesCitiesRivers_USA/MapServer</option> Opção 3 do serviço – Censo Demográfico dos EUA <option selected="selected">Demographics/ESRI_Census_USA/MapServer</option> Opção 4 do serviço – Registros de Louisville <option>Louisville/LOJIC_LandRecords_Louisville/MapServer</option> Opção 5 do serviço – Segurança Pública de Louisville <option>Louisville/LOJIC_PublicSafety_Louisville/MapServer</option> Opção 6 do serviço – Petróleo e Gás do Kansas <option>Petroleum/KGS_OilGasFields_Kansas/MapServer</option> </select> Nessa seleção as opções são relativas à transparência da camada... Map Opacity(0=transparent;1=opaque): <select id="op" onchange="setOVOpacity(this.options[this.selectedIndex].text)"> <option>0.2</option> <option>0.5</option> <option selected="selected">0.8</option> <option>1</option> </select> </div> <div id="svcDesc" style="border:1px solid red; width:1000px"> </div> </body> </html>
–> Em seguida o javascript simpleags.js: // Definição das variáveis
var map, ov, iw, svc, marker; // Essa é a função inicial do script onde são definidas e inicializadas as coordenadas do mapa do google na aplicação, o zoom, // o tipo de mapa ( normal, satélite, híbrido ou terreno ) e os eventos do mapa. function init() { var myOptions = { // Aproximação do mapa zoom: 4, // Coordenadas geográficas – latitude e longitude – do mapa. Essas coordendas //podem ser alteradas conforme a necessidade da aplicação center: new google.maps.LatLng(40, -100), // Tipo do mapa : estradas outras opções são (SATELLITE, HYBRID, TERRAIN) mapTypeId: google.maps.MapTypeId.ROADMAP, //Tipo do cursor draggableCursor: 'default' } // Conforme as opções selecionadas no myOptions essa variável vai definir as // características e o local a ser inserido o mapa que nesse caso é o div map_canvas map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Chama a função seguinte loadMapService(); // Adiciona um evento quando o mapa é clicado chamando a função doIdentify // passando como parâmetro as coordenadas do mapa google.maps.event.addListener(map, 'click', function(e) { doIdentify(e.latLng); }); // Aqui o evento do mapa atualiza a tabela de conteúdo (TOC table of Contents // na lateral direita do mapa) com informações google.maps.event.addListener(map, 'zoom_changed', updateTOC); // Mensagem inicial em amarelo tornando visível a mensagem de 'Working' google.maps.event.addListener(gmaps.ags.Util, 'jsonpstart', function() { document.getElementById('working').style.visibility = 'visible'; }); // Mensagem final em amarelo tornando oculta a mensagem de 'Working' google.maps.event.addListener(gmaps.ags.Util, 'jsonpend', function() { document.getElementById('working').style.visibility = 'hidden'; }); } // Função de leitura do mapa function loadMapService() { // Criação de uma variável com o valor da combobox das opções de leitura var el = document.getElementById('svc'); // Obtém o valor da combobox var s = el.options[el.selectedIndex].text; // Utilização do serviço de mapas do ArcGis Server disponível. Esse é o ponto em que a // a camada do serviço de mapa do ArcGis é inserido por cima do serviço do Google Maps. // No exemplo é usado o serviço demonstrativo do ArcGiscom a utilização do serviço // REST - Representational State Transfer. // Esse serviço disponibiliza tanto imagens quanto dados sendo possível a inserção de //dados particulares de uma base de dados própria no serviço do Google Maps. O 's' no // final da linha significa o número da camada da combobox da página e o número da // camada de serviço de mapas var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + s; // Define um valor para a variável 'ov' diferente de nulo if (ov != null) { if (ov instanceof gmaps.ags.MapOverlay) { ov.setMap(null); } else if (ov instanceof gmaps.ags.MapType) { map.overlayMapTypes.removeAt(0); } ov = null; } // Faz a ligação do serviço REST com o valor selecionado da combobox abaixo do mapa // para que esse traga o serviço conforme o valor selecionado svc = new gmaps.ags.MapService(url); // Lê a função 'load' inserindo o evento google.maps.event.addListener(svc, 'load', function() { // Criação de uma nova variável com o valor definido na combobox 'svc' var bnds = svc.getInitialBounds(); // Novos valores e posicionamentos no mapa conforme a seleção if (bnds) { if (bnds.getSouthWest().lng() > bnds.getNorthEast().lng()) { map.setCenter(new google.maps.LatLng(40, -100)); map.setZoom(4); } else if (!bnds.contains(map.getCenter())){ map.fitBounds(bnds); } } // Criação de uma nova variável com o valor da seleção da combobox de transparência // situada na parte inferior direito do mapa var op = document.getElementById('op').value; if (svc.singleFusedMapCache) { ov = new gmaps.ags.MapType(svc, { opacity: op }); map.overlayMapTypes.insertAt(0, ov); } else { ov = new gmaps.ags.MapOverlay(svc, { opacity: op }); ov.setMap(map); } // Inserção de textos var svcInfo = 'This is a <b>dynamic</b> map svc. You can turn on/off individual layers using the check box.' if (svc.singleFusedMapCache) { svcInfo = 'This is a <b>cached</b> map svc. You can <b>NOT</b> turn on/off individual layers.' } document.getElementById('svcInfo').innerHTML = svcInfo; document.getElementById('svcDesc').innerHTML = svc.description + '<br/>Copyright:' + svc.copyrightText; // Criação de uma variável com uma nova combobox de cálculo mostrando o resultado // na tabela à direita do mapa – TOC – Table Of Contents var clickOpts = ' <select id="clickOpts" style="font-size:9pt;width:200px" onchange="onClickOptionChanged()">'; clickOpts += '<option value="top"><Top-most layer></option>'; clickOpts += '<option value="visible"><Visible layers></option>'; clickOpts += '<option value="all"><All layers></option>'; var layers = svc.layers; for (var i = 0; i < layers.length; i++) { var layer = layers[i]; // now fetch the scale info for each layer. google.maps.event.addListenerOnce(layer, 'load', updateTOC); layer.load(); if (!layer.subLayerIds) { clickOpts += '<option value="all:' + i + '">' + layer.name + '</option>'; } } document.getElementById('clickOptsDiv').innerHTML = clickOpts + '</select>'; }); } /** * Criação de uma lista para a camada */ function updateTOC() { // Caso a variável 'ov' e a combobox da camadas de serviço REST seja lida if (ov && svc.hasLoaded()) { // Limpa a tabela de conteúdo - TOC var toc = ''; // 591657527.591555 é a escala no nível 0 var scale = 591657527.591555 / (Math.pow(2, map.getZoom())); // Define a camada var layers = svc.layers; // Percorre a camada obtendo os dados e inserindo-os na tabela de conteúdo - TOC for (var i = 0; i < layers.length; i++) { var layer = layers[i]; var inScale = layer.isInScale(scale); toc += '<div style="color:' + (inScale ? 'black' : 'gray') + '">'; if (layer.subLayerIds) { toc += layer.name + '(group)<br/>'; } else { if (layer.parentLayer) { toc += ' '; } toc += '<input type="checkbox" id="layer' + layer.id + '"'; if (layer.visible) { toc += ' checked="checked"'; } if (!inScale || svc.singleFusedMapCache) { toc += ' disabled="disabled"'; } toc += ' onclick="setLayerVisibility()">' + layer.name + '<br/>'; } toc += '</div>'; } document.getElementById('toc').innerHTML = toc; } } /** * Check the visibility of layers and refresh map */ function setLayerVisibility() { var layers = svc.layers; for (var i = 0; i < layers.length; i++) { var el = document.getElementById('layer' + layers[i].id); if (el) { layers[i].visible = (el.checked === true); } } ov.refresh(); } function onClickOptionChanged() { if (marker != null) { doIdentify(marker.getPosition()); } } function doIdentify(location) { if (!location) return; var layerOpt = document.getElementById('clickOpts').value; if (ov && svc.hasLoaded()) { var params = { geometry: location, layerOption: layerOpt || 'top', tolerance: 5, bounds: map.getBounds(), width: map.getDiv().offsetWidth, height: map.getDiv().offsetHeight, returnGeometry: false }; svc.identify(params, function(res, err) { if (err) { alert(err.message + '\n' + err.details.join('\n')); } else if (res.results) { processIdentifyResults(res, location); } }); } } function processIdentifyResults(res, ll) { var html = ''; if (res.results) { html += 'Total # of Results:' + res.results.length; for (var i = 0, c = res.results.length; i < c; i++) { var r = res.results[i]; if (i > 0) { html += '<hr/>'; } html += '<div>Result #' + (i + 1) + ': <i>' + r.value + '</i><br/><table>'; html += '<tr><td>From layer: <b>' + r.layerName + '</b></td></tr>'; html += '<tr><td > <table style="font-size:9pt">'; var a = r.feature.attributes; for (var x in a) { if (a.hasOwnProperty(x)) { html += '<tr>'; html += '<td style="background-color:#DDDDDD;">' + x + '</td>'; var val = a[x]; val = (val === null || typeof val === 'undefined') ? '' : '' + val; html += '<td>' + val + '</td></tr>'; } } html += '</table></td></tr></table></div>'; } document.getElementById('info').innerHTML = html; if (marker == null) { marker = new google.maps.Marker({ position: ll, map: map }); } else { marker.setPosition(ll); } } } function setOVOpacity(op){ if (ov) { ov.setOpacity(op); } } window.onload = init; window['setLayerVisibility'] = setLayerVisibility; window['loadMapService']= loadMapService; window['setOVOpacity'] = setOVOpacity;