Abrir el menú principal

Diferencia entre revisiones de «Widget:OP»

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

Última modificación el 4 dic 2018, a las 17:09