Mostrar/Ocultar

 Hacer dinamicas capas estaticas 


Foro de Programación de Google Earth y Maps  Foro de Programación de Google Earth y Maps: Programación con las APIs de Google: Google Earth, Google Maps, KML, Aplicaciones Moviles

SubForos: KML - Google Maps - Html - Kmz - Java - Javascript - Excel - Php - Programacion
Página 1 de 1 - Tema con 7 Mensajes y 9817 Lecturas
Último Mensaje Publicado:
Autor Mensaje
Rsalazar
Avatar de Rsalazar
Usuario Reciente

Usuario Reciente
Registrado:
May 19, 2010
Mensajes: 4

Votos: 0 👍
Enlaces Asunto: Re: Foro de Programación para aplicaciones de Google   Responder citando
Necesito saber como hacer para volar hacia las capas que muestro ya que solo se queda estatica la imagen. el codigo es el siguiente y esta en la liga: www.aguademexico.com.mx/ ...heros.html

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<title>Capas en Google Earth</title>
<!--SUSTITUYE POR TU KEY API-->
<script src="http://www.google.com/jsapi?key=ABQIAAAAvVdETXRVjvhZiycw4fgOORQLNchPlEBxB9hxIhD1AqzNtzRTFRS6ugXFI9alitYEClFh8UsS5TkbSw"></script>

<script type="text/javascript">
function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;

if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);

// Añade botón
document.getElementById('sample-ui').appendChild(btn);
}

function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
</script>

<script type="text/javascript">
var ge;

// store the object loaded for the given fichero... initially none of the objects
// are loaded, so initialize these to null
var currentKmlObjects = {
'1': null,
'2': null,
'3': null
};

google.load("earth", "1");

function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);

addSampleUIHtml(
'<h2>Como cargar varios kml en Google Earth y visualizarlos a modo de capas independientes</h2>' +
'<input type="checkbox" id="kml-1-check" onclick="toggleKml(\'1\');"/><label for="kml-1-check">Distrito Federal</label><br/>' +
'<input type="checkbox" id="kml-2-check" onclick="toggleKml(\'2\');"/><label for="kml-2-check">Suspensiones</label><br/>' +
'<input type="checkbox" id="kml-3-check" onclick="toggleKml(\'3\');"/><label for="kml-3-check">Medidores</label><br/>'
);
}

function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);

// se añade control de navegación
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// se añaden capas
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

// nos situamos en el mapa
var la = ge.createLookAt('');
la.set(19.214947, -99.134050,
110000, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, // heading
0, // straight-down tilt
1000 // range (inverse of zoom)
);
ge.getView().setAbstractView(la);


//carga el fichero que seleccionemos en el checkbox
if (document.getElementById('kml-1-check').checked)
loadKml('1');

if (document.getElementById('kml-2-check').checked)
loadKml('2');

if (document.getElementById('kml-3-check').checked)
loadKml('3');
}

function failureCallback(errorCode) {
}

function toggleKml(fichero) {
// borra los kml que pudieran existir anteriormente
if (currentKmlObjects[fichero]) {
ge.getFeatures().removeChild(currentKmlObjects[fichero]);
currentKmlObject = null;
}

// Si se selecciona el checkbox carga el fichero y lo muestra
var kmlCheckbox = document.getElementById('kml-' + fichero + '-check');
if (kmlCheckbox.checked)
loadKml(fichero);
}

function loadKml(fichero) {
if (fichero=="1")
{
var kmlUrl = 'http://www.aguademexico.com.mx/padron/kmls/df.kml';
}
if (fichero=="2")
{
var kmlUrl = 'http://www.aguademexico.com.mx/padron/kmls/ctassusp.kml';
}
if (fichero=="3")
{
var kmlUrl = 'http://www.aguademexico.com.mx/padron/kmls/Legaria.kml';
}


// fetch the KML
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {

if (kmlObject) {
// se muestra en Google Earth
currentKmlObjects[fichero] = kmlObject;
ge.getFeatures().appendChild(kmlObject);
} else {
// en caso de que no exista el fichero kml o sea corrupto
currentKmlObjects[fichero] = null;

//Alerta en devolución de la llamada a la API y los controladores de eventos
//para evitar estancamiento en algunos navegadores
setTimeout(function() {
alert('Bad or null KML.');
}, 0);

// elimina la marca del checkbox
document.getElementById('kml-' + fichero + '-check').checked = '';
}
});
}

</script>
</head>
<body>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="sample-ui"></div>
<div id="map3d" style="width: 800px; height: 600px;"></div>
<br>
</body>
</html>
Ir arriba Necesito saber como hacer para volar hacia las capas que muestro ya que solo se queda estatica la imagen. el codigo es el siguiente y esta en la... Rsalazar Compartir:
_polifemo
Avatar de _polifemo
SuperExpert

SuperExpert
Registrado:
Nov 27, 2009
Mensajes: 436

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
Hola rsalazar. Que sepas que en tu web no consigo ver los kml, me da la impresión que falla al cargar los kml.

respecto a como volar hacia la capa activada, y así a bote pronto:

Cuando se produzca el evento "checked sobre el checkbox en cuestión, además de un loadKml ejecuta un "createLookAt('')" como ya has hecho al inicio de la función "initCallback".

Un saludo.
Ir arriba Hola rsalazar. Que sepas que en tu web no consigo ver los kml, me da la impresión que falla al cargar los kml. respecto a como volar hacia la capa... _polifemo Compartir:
Rsalazar
Avatar de Rsalazar
Usuario Reciente

Usuario Reciente
Registrado:
May 19, 2010
Mensajes: 4

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
Muchas gracias por tu pronta respuesta y bueno con respecto de que no consigues ver los kml quizá es porque son pesados y otros porque son pequeños y están lejos de la vista. Voy a meter lo que me recomiendas y te volveré a molestar si es que tengo problemas. gracias de nuevo
Ir arriba Muchas gracias por tu pronta respuesta y bueno con respecto de que no consigues ver los kml quizá es porque son pesados y otros porque son pequeños... Rsalazar Compartir:
Rsalazar
Avatar de Rsalazar
Usuario Reciente

Usuario Reciente
Registrado:
May 19, 2010
Mensajes: 4

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
Esto de volar hacia una capa ya lo tengo resuelto de otra manera pero por el otro no puedo hacer que desaparezca la capa cuando desmarco el checkbox, no se si me puedas recomendar algo en este sentido. El siguiente código es el que tengo en otra página.
<!DOCTYPE html PUBLIC "-//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>GIS de Agua de México S.A. de C.V.</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAvVdETXRVjvhZiycw4fgOORQLNchPlEBxB9hxIhD1AqzNtzRTFRS6ugXFI9alitYEClFh8UsS5TkbSw">
</script>

<script type="text/javascript">
var ge = null;
google.load("earth", "1");

function init() {
var content = document.getElementById('content');
google.earth.createInstance('content', initCB, failureCB);
}

function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);

// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// Vuela hasta el DF
var la = ge.createLookAt('');
la.set( 19.320699, -99.152816,
0, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, // heading
0, // straight-down tilt
10000000 // range (inverse of zoom)
);

// añadir capas de google
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
//ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
//ge.getLayerRoot().enableLayerById(ge.LAYER_BULDINGS, true);

ge.getView().setAbstractView(la);
document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString();
}
function failureCB(errorCode) {
}
//////
//////
function createNetworkLink(file) {
var kmlCheckbox = document.getElementById('checkbox_' + file);
if (networkLink == null) {
var networkLink = ge.createNetworkLink("");
networkLink.setDescription("NetworkLink open to fetched content");
networkLink.setName("Open NetworkLink");
networkLink.setFlyToView(true);
// create a Link object
var link = ge.createLink("");
liga = "http://www.aguademexico.com.mx/padron/kmls/" + file + ".kmz" ;
cajita = 'checkbox_' + file ;
link.setHref(liga);
// attach the Link to the NetworkLink
networkLink.setLink(link);
// add the NetworkLink feature to Earth
}
if (kmlCheckbox.checked){
ge.getFeatures().appendChild(networkLink);
} else {
networklink.setVisibility(kmlChecbox.checked);
}
}
google.setOnLoadCallback(init);
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}

</script>
<style type="text/css">
<!--
.Chica {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #495678;
}
-->
</style>
</head>
<body style="font-family: Arial;font-size:13px;border: 0 none;">
<!-- Copiar dentro del tag BODY -->
<script language="JavaScript1.2">
<!--
// Maximizar Ventana por Nick Lowe (nicklowe@ukonline.co.uk)
window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
} else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="checktree.css" />
<script type="text/javascript" src="checktree.js"></script>
<script type="text/javascript"><!--

// USAGE NOTES: Create a new CheckTree() object like so, and pass it its own name.
var checkmenu = new CheckTree('checkmenu');
// You can create several such tree objects, just give each a unique name.

// One optional property: whether to count all checkboxes beneath the current level,
// or just to count the checkboxes immediately beneath the current level (the default).
//checkmenu.countAllLevels = true;

//--></script>

<table width="1110" border="0" align="left">
<tr>
<td width="200" valign="top"><div align="center">
<p><img src="imagenes/LOGO CABECERA3.jpg" alt="" width="200" height="104" /></p>
<p class="style1">Sistema de Información Geográfica</p>
</div>
<form action="javascript:void(0)">
<ul id="tree-checkmenu" class="checktree">
<li id="show-explorer"><img src="imagenes/Network-Graphite-48x48.png" alt="Capas Básicas de Google" width="48" height="48" /><strong>DISTRITO FEDERAL
</strong>
<ul id="tree-explorer">
<li id="show-iemac">
<input type="checkbox" name="checkbox_limitedf" id="checkbox_limitedf" onclick="javascript:createNetworkLink('limitedf');"/>
Delegaciones
<ul id="tree-iemac">
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Alvaro Obregón </li>
<li class="last">
<input type="checkbox" />
Azcapotzalco </li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Benito Juárez </li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Coyoacán</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Cuajimalpa</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Cuauhtémoc</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Gustavo A. Madero</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Iztacalco</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Iztapalapa</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Magdalena Contreras</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Miguel Hidalgo</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Milpa Alta</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Tlahuac</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Tlalpan</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Venustiano Carranza</li>
<li>
<input type="checkbox" name="checkbox_delAO" id="checkbox_delAO" onclick="javascript:createNetworkLink('delAO');"/>
Xochimilco</li>
</ul>
</li>
<li id="show-iewin" class="last">
Ciudad
<span id="count-iewin" class="count"></span>
<ul id="tree-iewin">
<li>
<input type="checkbox" name="checkbox_metro" id="checkbox_metro" onclick="javascript:createNetworkLink('metro');"/>
Metro </li>
<li>
<input type="checkbox" name="checkbox_sucursales_amsa" id="checkbox_sucursales_amsa" onclick="javascript:createNetworkLink('sucursales_amsa');"/>
OAP'S </li>
<li>
<input type="checkbox" name="checkbox_metro3" id="checkbox_metro3" onclick="javascript:createNetworkLink('metro');"/>
Tesorería </li>
</ul>
</li>
</ul>
</li>
<li id="show-netscape"><img src="imagenes/Network-48x48.png" alt="" width="48" height="48" />
<strong>3a. DIMENSIÓN</strong>
<ul id="tree-netscape">
<li>
<input type="checkbox" name="checkbox_3D-Legaria" id="checkbox_3D-Legaria" onclick="javascript:createNetworkLink('3D-Legaria');"/>
Legaria</li>
<li>
<input type="checkbox" name="checkbox_3D-Torre_Blanca" id="checkbox_3D-Torre_Blanca" onclick="javascript:createNetworkLink('3D-Torre_Blanca');"/>
Torre Blanca</li>
</ul>
</li>
<li id="show-opera"><img src="imagenes/talk-48x48.png" alt="Mapas Temáticos" width="48" height="48" /><strong>MAPAS TEMÁTICOS</strong>
<ul id="tree-opera">
<li>
<input type="checkbox" name="checkbox_Ctas_suspendidas" id="checkbox_Ctas_suspendidas" onclick="javascript:createNetworkLink('Ctas_suspendidas');"/>
Suspensiones</li>
<li>
<input type="checkbox" name="checkbox_con_D150" id="checkbox_con_D150" onclick="javascript:createNetworkLink('con_D150');"/>
Cons Dom.&gt;150</li>
<li class="last">
<input type="checkbox" name="checkbox_con_ND240" id="checkbox_con_ND240" onclick="javascript:createNetworkLink('con_ND240');"/>
Cons NDom &gt; 240</li>
<li class="last">
<input type="checkbox" />
Ctas Fabriquitas</li>
<li class="last">
<input type="checkbox" />
Dom. &gt; 240</li>
<li class="last">
<input type="checkbox" />
Dom &gt; 480</li>
<li class="last">
<input type="checkbox" />
Medidor Lectura igual</li>
<li class="last">
<input type="checkbox" name="checkbox_Sectores" id="checkbox_Sectores" onclick="javascript:createNetworkLink('Sectores');"/>
Sectores</li>
<li class="last">
<input type="checkbox" name="checkbox_pulmones_df" id="checkbox_pulmones_df" onclick="javascript:createNetworkLink('pulmones_df');"/>
Pulmones del DF</li>
</ul>
</li>
<li id="show-khtml"><img src="imagenes/Finder-Toolbar-Burn-48x48.png" alt="" width="48" height="48" />
<strong>BUSQUEDAS</strong>
<ul id="tree-khtml">
<li>
<label>
<input name="vcuenta" type="text" id="vcuenta" size="20" maxlength="16" />
</label>
Cuenta CADF </li>
<li class="last">
<input type="text" name="vcalle" id="vcalle" />
Calle</li>
<li class="last">
<label>
<select name="select" id="select">
<option selected="selected">Selecciona Colonia</option>
<option value="Legaria">Legaria</option>
<option value="Torre Blanca">Torre Blanca</option>
</select>
</label>
</li>
<li class="last">
<input name="vcp" type="text" id="vcp" size="10" maxlength="5" />
Codigo Postal
<label>
<input type="submit" name="button" id="button" value="Buscar" />
</label>
</li>
</ul>
</li>
<li id="show-netscape2"><img src="imagenes/Burn-48x48.png" alt="" width="48" height="48" />
<strong>PLANIMETRÍA</strong>
<ul id="tree-netscape2">
<li>
<input type="checkbox" name="checkbox_pru-mh" id="checkbox_pru-mh" onclick="javascript:createNetworkLink('pru-mh');"/>
Miguel Hidalgo</li>
</ul>
</li>
<li id="show-netscape3"><img src="imagenes/Application-icon.jpg" alt="" width="48" height="48" />
<strong>RED HIDRAULICA</strong>
<ul id="tree-netscape3">
<li>
<input type="checkbox" name="checkbox_Red_MH" id="checkbox_Red_MH" onclick="javascript:createNetworkLink('Red_MH');"/>
Miguel Hidalgo </li>
<li>
<input type="checkbox" name="checkbox_PT_Santa_Fe" id="checkbox_PT_Santa_Fe" onclick="javascript:createNetworkLink('PT_Santa_Fe');"/>
PT Santa Fé
</li>
</ul>
</li>
</ul>
</form>
<p>&nbsp;</p></td>
<td width="900"><script language="JavaScript">
document.writeln("<div id='content' style='border: 1px solid silver;height:" + (screen.height-100) + "px; width:" + (screen.width-200) +"px'></div>")
</script> </td>
</tr>
</table>
</body>
</html>

este ejemplo lo tengo en la liga: www.aguademexico.com.mx/ ..._kml5.html

espero me puedas ayudar
Ir arriba Esto de volar hacia una capa ya lo tengo resuelto de otra manera pero por el otro no puedo hacer que desaparezca la capa cuando desmarco el... Rsalazar Compartir:
_polifemo
Avatar de _polifemo
SuperExpert

SuperExpert
Registrado:
Nov 27, 2009
Mensajes: 436

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
Hola de nuevo rsalazar: Lo primero quitarme el sombrero y reconocer tu espléndido trabajo.

Tu función createNetworklink tiene un error de concepto, te explico: Cada vez que ocurre el evento "on click" el código carga el kml "si o si", de modo que si le doy 5 veces al check tendré cinco kml cargados. Deberás comprobar antes si el kml está o no cargado (lo he buscado pero no he encontrado el modo aún). En la condición "if (kmlCheckbox.checked)" el argumento de setVisibility, parece no ejecutarse y tal vez esté ahí la clave.

Echale también un ojo a esto: code.google.com/ ...checkboxes)

Veo que tienes una función de maximizar ventana. Pero en mi navegador Google Chrome la ventana instanciada es demasiado grande. Puede que sea problema del navegador. ¿En el tuyo va bién?, ¿cual es?.

De verdad, un buen trabajo.
Ir arriba Hola de nuevo rsalazar: Lo primero quitarme el sombrero y reconocer tu espléndido trabajo. Tu función createNetworklink tiene un error de concepto... _polifemo Compartir:
Rsalazar
Avatar de Rsalazar
Usuario Reciente

Usuario Reciente
Registrado:
May 19, 2010
Mensajes: 4

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
Te agradezco los comentarios y voy a visitar la liga que me comentas y espero encontrar una solución para que quede algo verdaderamente bien hecho. Mi navegador es el iexplorer 8 y al parecer funciona bien aunque como lo comentas despliega un poco mas grande el API, sin embargo se ve bien, gracias de nuevo y si encuentro una solución te lo comento
Ir arriba Te agradezco los comentarios y voy a visitar la liga que me comentas y espero encontrar una solución para que quede algo verdaderamente bien hecho... Rsalazar Compartir:
Ginesrh
Avatar de Ginesrh
Usuario Reciente

Usuario Reciente
Registrado:
Jun 10, 2014
Mensajes: 1

Votos: 0 👍
Enlaces Asunto: Re: Hacer dinamicas capas estaticas   Responder citando
......
Ir arriba Ginesrh escribió: ................ Ginesrh Compartir:
Mostrar mensajes de anteriores:   
SubForos: KML - Google Maps - Html - Kmz - Java - Javascript - Excel - Php - Programacion
 Responder al tema   Versión Imprimible
Todas las horas son GMT + 1 Hora
Página 1 de 1 - Tema con 7 Mensajes y 9817 Lecturas - Última modificación: 10/06/2014




RSS: Foro Programación de Google Earth y Maps RSS - Ultimos Mensajes
Cambiar a:  


Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro
No Puedes adjuntar archivos en este foro
Tu puedes descargar archivos en este foro