1

Quiero cargar mis archivos KML en un visor web con OpenLayers3. He visto el ejemplo similar a lo que quiero en su biblioteca de ejemplos

http://openlayers.org/en/v3.15.1/examples/kml-earthquakes.html

Sin embargo cuando copio el codigo y lo pego (VS12) me muestra solo el mapa base, pero el kml de terremotos no lo muestra (ya descargué el kml y lo pegué en la ruta de la raíz donde estoy programando).

También descargué el ejemplo (esperando que su ejemplo al cual no le he movido nada, funcione)... pero al abrir la página HTML sigue mostrando solo el mapa base. ¿Qué estoy haciendo mal?

1 respuesta 1

0

Tal y como está el código del ejemplo no busca el archivo kml en la carpeta raíz si no en una ruta relativa data/kml/2012_Earthquakes_Mag5.kml a partir de la carpeta en la que se encuentra la página.

Lo que puedes hacer es modificar el código para que lea también el archivo kml del sitio web de OpenLayers (tendrías que cambiar la url de la línea 71 del ejemplo):

  var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'http://openlayers.org/en/v3.15.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
      format: new ol.format.KML({
        extractStyles: false
      })
    }),
    style: styleFunction
  });

Aquí tienes el ejemplo completo:

      var styleCache = {};
      var styleFunction = function(feature) {
        // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
        // standards-violating <magnitude> tag in each Placemark.  We extract it from
        // the Placemark's name instead.
        var name = feature.get('name');
        var magnitude = parseFloat(name.substr(2));
        var radius = 5 + 20 * (magnitude - 5);
        var style = styleCache[radius];
        if (!style) {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: radius,
              fill: new ol.style.Fill({
                color: 'rgba(255, 153, 0, 0.4)'
              }),
              stroke: new ol.style.Stroke({
                color: 'rgba(255, 204, 0, 0.2)',
                width: 1
              })
            })
          });
          styleCache[radius] = style;
        }
        return style;
      };

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'http://openlayers.org/en/v3.15.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
          format: new ol.format.KML({
            extractStyles: false
          })
        }),
        style: styleFunction
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.Stamen({
          layer: 'toner'
        })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      var info = $('#info');
      info.tooltip({
        animation: false,
        trigger: 'manual'
      });

      var displayFeatureInfo = function(pixel) {
        info.css({
          left: pixel[0] + 'px',
          top: (pixel[1] - 15) + 'px'
        });
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });
        if (feature) {
          info.tooltip('hide')
              .attr('data-original-title', feature.get('name'))
              .tooltip('fixTitle')
              .tooltip('show');
        } else {
          info.tooltip('hide');
        }
      };

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          info.tooltip('hide');
          return;
        }
        displayFeatureInfo(map.getEventPixel(evt.originalEvent));
      });

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });
    <style>
        #map {
            position: relative;
        }

        #info {
            position: absolute;
            height: 1px;
            width: 1px;
            z-index: 100;
        }

        .tooltip.in {
            opacity: 1;
        }

        .tooltip.top .tooltip-arrow {
            border-top-color: white;
        }

        .tooltip-inner {
            border: 2px solid white;
        }
    </style>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.15.1/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="map" class="map"><div id="info"></div></div>

9
  • Hola, lo había intentado, pero no funcionó.
    – Kate2707
    el 10 may. 2016 a las 19:40
  • Pues yo me he copiado el ejemplo y simplemente cambiando la url me ha funcionado. el 10 may. 2016 a las 19:43
  • Que extraño. crees que sea algo de mi computadora?, he visto muchos ejemplos "sencillos" y algo tan simple no he sido capaz de hacerlo.
    – Kate2707
    el 10 may. 2016 a las 19:50
  • ¿Qué navegador estás utilizando? el 10 may. 2016 a las 19:51
  • Google chrome, programo con visual studio 2012.
    – Kate2707
    el 10 may. 2016 a las 19:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.