API JavaScript di Google Maps con una sovrapposizione di layer di tessere OpenWeather

Come sovrapporre un set di tessere XYZ (something like this) all'API di Google Maps 3? Voglio sovrapporre i dati meteorologici (copertura nuvolosa ... ecc.). Sentitevi liberi di usare il mio URL OpenWeatherMaps di provarlo:API JavaScript di Google Maps con una sovrapposizione di layer di tessere OpenWeather

http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/{z}/{x}/{y}?hash=5

ho trascorso più giorni cercando di capire questa caratteristica apparentemente semplice. Se qualcuno può fornire un esempio funzionante, sarei in debito con te. Sentiti libero di controllare il mio GitHub Gist implementation using OL3 and OSM di questo overlay dei dati meteo. Mi piacerebbe anche sapere se questo non è facilmente realizzabile/richiede hack.

Grazie!

Aggiornamento: Grazie a @ di wf9a5m75 risposta, sono stato in grado di mettere insieme questo jsFiddle con la soluzione al mio problema: https://jsfiddle.net/601oqwq2/4/

fonte

2016-03-04 Karl Floersch

di farci sapere se @ wf9a5m75 suggerimento ha funzionato per voi. –

ImageMapType è per il vostro scopo. Leggi qui: https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes

var myMapType = new google.maps.ImageMapType({ 
     getTileUrl: function(coord, zoom) { 
     return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
       zoom + "/" + coord.x + "/" + coord.y + "?hash=5"; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    maxZoom: 9, 
    minZoom: 0, 
    name: 'mymaptype' 
    }); 

    map.mapTypes.set('mymaptype', myMapType); 
    map.setMapTypeId('mymaptype');

[update] sovrapporre l'imageMapType al di sopra del maptype corrente

var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 

    var myMapType = new google.maps.ImageMapType({ 
     getTileUrl: function(coord, zoom) { 
     return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
       zoom + "/" + coord.x + "/" + coord.y + "?hash=5"; 
     }, 
     tileSize: new google.maps.Size(256, 256), 
     maxZoom: 9, 
     minZoom: 0, 
     name: 'mymaptype' 
    }); 

    map.overlayMapTypes.insertAt(0, myMapType);

fonte

2016-03-04 19:18:28 wf9a5m75

Sembra che sia necessario impostare un'opacità. Inoltre c'è una virgola mancante dopo 'minZoom: 0'. Ecco un rapido hackerato insieme JSFiddle: https://jsfiddle.net/601oqwq2/ –

Nella mia soluzione, sembra che non ci siano tessere di Google Maps sotto le tessere OpenWeatherMap. Ho provato a eliminare gli elementi della mappa, ma nulla è sotto. Hai qualche suggerimento/modifica al mio jsFiddle? –

Fammi confermare chiaramente. Vuoi vedere le tessere di google maps originali sotto il livello OSM o no? – wf9a5m75

migliorando la risposta di wf9a5m75.

Le tessere dell'immagine di sovrapposizione non coprono la mappa sottostante quando si riduce lo zoom. Possiamo fare uso di una funzione di normalizzazione (come menzionato nel link here) per garantire che coprano l'intera area.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<body> 
 
    <div id="map"></div> 
 
    <script> 
 
    var map; 
 

 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 19.0356826, 
 
      lng: 72.9112641 
 
     }, 
 
     zoom: 6, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     disableDefaultUI: true 
 
     }); 
 

 
     var myMapType = new google.maps.ImageMapType({ 
 
     getTileUrl: function(coord, zoom) { 
 
      var normalizedCoord = getNormalizedCoord(coord, zoom); 
 
      if (!normalizedCoord) { 
 
      return null; 
 
      } 
 
      var bound = Math.pow(2, zoom); 
 
      return "http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/" + 
 
      zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + "?hash=5"; 
 
     }, 
 
     tileSize: new google.maps.Size(256, 256), 
 
     maxZoom: 8, 
 
     minZoom: 0, 
 
     name: 'mymaptype' 
 
     }); 
 

 
     // Normalizes the coords that tiles repeat across the x axis (horizontally) 
 
     // like the standard Google map tiles. 
 
     function getNormalizedCoord(coord, zoom) { 
 
     var y = coord.y; 
 
     var x = coord.x; 
 

 
     // tile range in one direction range is dependent on zoom level 
 
     // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc 
 
     var tileRange = 1 << zoom; 
 

 
     // don't repeat across y-axis (vertically) 
 
     if (y < 0 || y >= tileRange) { 
 
      return null; 
 
     } 
 

 
     // repeat across x-axis 
 
     if (x < 0 || x >= tileRange) { 
 
      x = (x % tileRange + tileRange) % tileRange; 
 
     } 
 

 
     return { 
 
      x: x, 
 
      y: y 
 
     }; 
 
     } 
 

 
     map.overlayMapTypes.insertAt(0, myMapType); 
 
    } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
 
</body>

fonte

2016-10-04 23:14:46

Non sono abbastanza sicuro di cosa questo comporti più (2018) - a meno che non mi fraintenda - Attualmente, usando 'coord.x' e' y' invece delle loro controparti normalizzate fornisce un pezzo preciso e mobile, che si ripete anche sull'asse X, indipendentemente dallo zoom. Inoltre, OpenWeatherMap suggerisce di usare 'https://tile.openweathermap.org/map/ {layer}/{z}/{x}/{y} .png? Appid = {api_key}' per mappe gratuite, che funziona praticamente allo stesso modo, devi solo scegliere il tipo di mappa che desideri sovrapporre.(Precipitazioni, nuvole, temperatura, ecc) –

Nevermind che l'ultima parte - finalmente iniziato a capire come funziona Vane, e l'URL essendo utilizzando nella tua risposta è il tipo che ancora danno! Se qualcuno è stato perso come me - È necessario rendere strati nel editor di mappe owm.io, e selezionare uno o più degli strati del tempo. –

API JavaScript di Google Maps con una sovrapposizione di layer di tessere OpenWeather

risposta

Problemi correlati