Load KML with OpenLayers

Question

Load KML with OpenLayers

Navigation

#1 by (0 votes)

1

I want to upload my KML files in a web viewer with OpenLayers3. I have seen the example similar to what I want in your library of examples

link

However when I copy the code and paste it (VS12) it shows only the base map, but the kml of earthquakes does not show it (I downloaded the kml and pasted it in the root path where I am programming).

I also downloaded the example (hoping that its example to which I have not moved anything, works) ... but when opening the HTML page it continues to show only the base map. What am I doing wrong?

visual-studio openlayers

asked by Kate2707 10.05.2016 в 20:01

source

1 answer

I can not join two users to the same room with socket.io Problem installing vstoolsforxamarin

score 0 · Accepted Answer

As it is the code of the example does not look for the file kml in the root folder if not in a relative route data / kml / 2012_Earthquakes_Mag5.kml from the folder in which it is located the page.

What you can do is modify the code so that it also reads the kml file from the OpenLayers website (you would have to change the url of line 71 of the example):

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

Here is the complete example:

      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>