Logo Patagonia.png

Diferencia entre revisiones de «Widget:OP»

De Wikiexplora
Saltar a: navegación, buscar
(Página creada con « <html> <head><title>OpenLayers KML Example</title></head> <body> <div id="mapdiv"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/Op...»)
 
 
(No se muestra una edición intermedia del mismo usuario)
Línea 1: Línea 1:
 
+
<!DOCTYPE html>
 
<html>
 
<html>
   <head><title>OpenLayers KML Example</title></head>
+
   <head>
 +
    <title>KML</title>
 +
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
 +
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
 +
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
 +
 
 +
  </head>
 
   <body>
 
   <body>
  <div id="mapdiv"></div>
+
    <div id="map" class="map"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>         
+
    <div id="info">&nbsp;</div>
 
+
    <script>
  <script>
+
      import Map from 'ol/Map.js';
    map = new OpenLayers.Map("mapdiv");
+
      import View from 'ol/View.js';
    map.addLayer(new OpenLayers.Layer.OSM());
+
      import KML from 'ol/format/KML.js';
     
+
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
    var kmllayer = new OpenLayers.Layer.Vector("KML", {
+
      import BingMaps from 'ol/source/BingMaps.js';
            strategies: [new OpenLayers.Strategy.Fixed()],
+
      import VectorSource from 'ol/source/Vector.js';
            protocol: new OpenLayers.Protocol.HTTP({
+
 
                url: "./mapperz-kml-example.kml",
+
      var raster = new TileLayer({
                format: new OpenLayers.Format.KML({
+
        source: new BingMaps({
                    extractStyles: true,  
+
          imagerySet: 'Aerial',
                    extractAttributes: true,
+
          key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
                    maxDepth: 2
+
        })
                })
+
      });
            })
+
 
 +
      var vector = new VectorLayer({
 +
        source: new VectorSource({
 +
          url: 'http://www.wikiexplora.com/images/2/23/Monolito.kmz',
 +
          format: new KMZ()
 +
        })
 +
      });
 +
 
 +
      var map = new Map({
 +
        layers: [raster, vector],
 +
        target: document.getElementById('map'),
 +
        view: new View({
 +
          center: [876970.8463461736, 5859807.853963373],
 +
          projection: 'EPSG:3857',
 +
          zoom: 10
 +
        })
 +
      });
 +
 
 +
      var displayFeatureInfo = function(pixel) {
 +
        var features = [];
 +
        map.forEachFeatureAtPixel(pixel, function(feature) {
 +
          features.push(feature);
 
         });
 
         });
          
+
         if (features.length > 0) {
    map.addLayer(kmllayer);
+
          var info = [];
   
+
          var i, ii;
    //Set start centrepoint and zoom
+
          for (i = 0, ii = features.length; i < ii; ++i) {
    //TODO: Is it possible to just zoom to extents of KML objects instead?
+
            info.push(features[i].get('name'));
   
+
          }
    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
+
          document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
          .transform(
+
          map.getTarget().style.cursor = 'pointer';
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
+
        } else {
            map.getProjectionObject() // to Spherical Mercator Projection
+
           document.getElementById('info').innerHTML = '&nbsp;';
           );
+
          map.getTarget().style.cursor = '';
    var zoom=14;
+
        }
    map.setCenter (lonLat, zoom)
+
      };
   
+
    //Add a selector control to the kmllayer with popup functions
+
    var controls = {
+
      selector: new OpenLayers.Control.SelectFeature(kmllayer, { onSelect: createPopup, onUnselect: destroyPopup })
+
    };
+
  
    function createPopup(feature) {
+
      map.on('pointermove', function(evt) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
+
        if (evt.dragging) {
          feature.geometry.getBounds().getCenterLonLat(),
+
           return;
           null,
+
        }
          '<div class="markerContent">'+feature.attributes.description+'</div>',
+
        var pixel = map.getEventPixel(evt.originalEvent);
          null,
+
        displayFeatureInfo(pixel);
          true,
+
       });
          function() { controls['selector'].unselectAll(); }
+
      );
+
       //feature.popup.closeOnMove = true;
+
      map.addPopup(feature.popup);
+
    }
+
  
    function destroyPopup(feature) {
+
      map.on('click', function(evt) {
      feature.popup.destroy();
+
        displayFeatureInfo(evt.pixel);
       feature.popup = null;
+
       });
    }
+
     </script>
   
+
   </body>
    map.addControl(controls['selector']);
+
</html>
     controls['selector'].activate();
+
  </script>
+
   <div id="explanation">Populate vector layer with data from a KML file.
+
  Also bind popup events to the display the description attributes.
+
  The KML file (this example taken from <a href="http://mapperz.blogspot.co.uk">mapperz</a>
+
  originally) must be served under the same domain name.</div>
+
</body></html>
+

Revisión actual del 17:09 4 dic 2018

<!DOCTYPE html> <html>

 <head>
   <title>KML</title>
   <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
 </head>
 <body>
 
   <script>
     import Map from 'ol/Map.js';
     import View from 'ol/View.js';
     import KML from 'ol/format/KML.js';
     import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
     import BingMaps from 'ol/source/BingMaps.js';
     import VectorSource from 'ol/source/Vector.js';
     var raster = new TileLayer({
       source: new BingMaps({
         imagerySet: 'Aerial',
         key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
       })
     });
     var vector = new VectorLayer({
       source: new VectorSource({
         url: 'http://www.wikiexplora.com/images/2/23/Monolito.kmz',
         format: new KMZ()
       })
     });
     var map = new Map({
       layers: [raster, vector],
       target: document.getElementById('map'),
       view: new View({
         center: [876970.8463461736, 5859807.853963373],
         projection: 'EPSG:3857',
         zoom: 10
       })
     });
     var displayFeatureInfo = function(pixel) {
       var features = [];
       map.forEachFeatureAtPixel(pixel, function(feature) {
         features.push(feature);
       });
       if (features.length > 0) {
         var info = [];
         var i, ii;
         for (i = 0, ii = features.length; i < ii; ++i) {
           info.push(features[i].get('name'));
         }
         document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
         map.getTarget().style.cursor = 'pointer';
       } else {
         document.getElementById('info').innerHTML = ' ';
         map.getTarget().style.cursor = ;
       }
     };
     map.on('pointermove', function(evt) {
       if (evt.dragging) {
         return;
       }
       var pixel = map.getEventPixel(evt.originalEvent);
       displayFeatureInfo(pixel);
     });
     map.on('click', function(evt) {
       displayFeatureInfo(evt.pixel);
     });
   </script>
 </body>

</html>