Google Maps Javascript-API mit einer OpenWeatherMap Kachel-Layer-Überlagerung

Wie kann ich einen XYZ-Kachelsatz (something like this) in Google Maps API 3 überlagern? Ich möchte Wetterdaten überlagern (Wolkendecke ... etc). Fühlen Sie sich frei, meine OpenWeatherMaps URL zu verwenden um es zu testen:Google Maps Javascript-API mit einer OpenWeatherMap Kachel-Layer-Überlagerung

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

Ich habe mehrere Tage damit verbracht, diese scheinbar einfache Funktion, um herauszufinden. Wenn jemand ein funktionierendes Beispiel geben kann, wäre ich in Ihrer Schuld. Fühlen Sie sich frei, meine GitHub Gist implementation using OL3 and OSM dieser Wetterdaten Overlay zu überprüfen. Ich würde auch gerne wissen, ob das nicht leicht zu erreichen ist/Hacks benötigt.

Vielen Dank!

aktualisieren: Dank @ wf9a5m75 Antwort konnte ich diese jsFiddle, um gemeinsam mit der Lösung zu meinem Problem: https://jsfiddle.net/601oqwq2/4/

Quelle

2016-03-04 Karl Floersch

Lassen Sie uns wissen, wenn @ wf9a5m75 Vorschlag für Sie gearbeitet. –

ImageMapType für Ihren Zweck. hier lesen: 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]

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

Quelle

2016-03-04 19:18:28 wf9a5m75

Es scheint, es muss eine Opazität gesetzt werden. Außerdem gibt es ein fehlendes Komma nach 'minZoom: 0'. Hier ist ein kurz zusammengehacktes JSFiddle: https://jsfiddle.net/601oqwq2/ –

In meiner Lösung sieht es so aus, als gäbe es keine Google Maps Kacheln unter den OpenWeatherMap Kacheln. Ich habe versucht, die Kartenelemente zu löschen, aber nichts ist darunter. Hast du irgendwelche Vorschläge/Änderungen an meinem jsFiddle? –

Lassen Sie mich für klar bestätigen. Möchten Sie die ursprünglichen Google Maps-Kacheln unter der OSM-Ebene sehen oder nicht? – wf9a5m75

Verbesserung auf wf9a5m75 Antwort die ImageMapType über dem aktuellen mapType Overlay.

Die Overlay-Bildkacheln decken die darunter liegende Karte beim Herauszoomen nicht ab. Wir können eine Normalisierungsfunktion verwenden (wie im Link here erwähnt), um sicherzustellen, dass sie das gesamte Gebiet abdecken.

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>

Quelle

2016-10-04 23:14:46

Ich bin nicht ganz sicher, was das (2018) mehr leistet - es sei denn, ich missverstehe - Derzeit mit 'coord.x' und' y' anstelle ihrer normalisierten Gegenstücke bietet ein präzises, bewegliches Teil, das sich unabhängig vom Zoom auch über die X-Achse wiederholt. Außerdem schlägt OpenWeatherMap vor, 'https://tile.openweathermap.org/map/ {layer}/{z}/{x}/{y} .png? Appid = {api_key}' für freie Karten zu verwenden, was praktisch funktioniert Sie müssen nur auswählen, welche Art von Karte Sie überlagern möchten.(Niederschlag, Wolken, Temp, etc.) –

Vergiss den letzten Teil - endlich begann zu verstehen, wie Vane funktioniert, und die URL, die in deiner Antwort verwendet wird, ist die Art, die sie immer noch geben! Wenn jemand so verloren war wie ich - Sie müssen im owm.io Karteneditor Ebenen erstellen und eine oder mehrere Wetterlagen auswählen. –

Google Maps Javascript-API mit einer OpenWeatherMap Kachel-Layer-Überlagerung

Antwort

Verwandte Themen