Hacer dinamicas capas estaticas 🗺️ Foro Programación de Google Earth y Maps 🗺️

Rsalazar · 19-05-2010

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>

<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>

_polifemo · 27-11-2009

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.

Rsalazar · 19-05-2010

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

Rsalazar · 19-05-2010

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.

GIS de Agua de México S.A. De C.V.

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)
}

Sistema de Información Geográfica

DISTRITO FEDERAL

Delegaciones

Alvaro Obregón

Azcapotzalco

Benito Juárez

Coyoacán

Cuajimalpa

Cuauhtémoc

Gustavo A. Madero

Iztacalco

Iztapalapa

Magdalena Contreras

Miguel Hidalgo

Milpa Alta

Tlahuac

Tlalpan

Venustiano Carranza

Xochimilco

Ciudad

Metro

OAP'S

Tesorería

3a. DIMENSIÓN

Legaria

Torre Blanca

MAPAS TEMÁTICOS

Suspensiones

Cons Dom.>150

Cons NDom > 240

Ctas Fabriquitas

Dom. > 240

Dom > 480

Medidor Lectura igual

Sectores

Pulmones del DF

BUSQUEDAS

Cuenta CADF

Calle

Selecciona Colonia
Legaria
Torre Blanca

Codigo Postal

PLANIMETRÍA

Miguel Hidalgo

RED HIDRAULICA

Miguel Hidalgo

PT Santa Fé

Document.writeln("")

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

Espero me puedas ayudar

_polifemo · 27-11-2009

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.

Rsalazar · 19-05-2010

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