Google Maps JavaScript API z nakładką warstwy kafli OpenWeatherMap

Jak mogę nałożyć zestaw płytek XYZ (something like this) na Google Maps API 3? Chcę nakładać dane pogodowe (zachmurzenie itd.). Zapraszam do korzystania z mojego OpenWeatherMaps URL do przetestowania go:Google Maps JavaScript API z nakładką warstwy kafli OpenWeatherMap

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

Spędziłem kilka dni próbuje dowiedzieć się tego pozornie prostego funkcję. Jeśli ktoś może podać przykład pracy, byłbym w twoim długu. Zapraszam do obejrzenia mojej GitHub Gist implementation using OL3 and OSM tej nakładki danych pogodowych. Chciałbym również wiedzieć, czy nie jest to łatwe do osiągnięcia/wymaga hackowania.

Dziękujemy!

Aktualizacja: Dzięki użytkownika @ wf9a5m75 odpowiedź, udało mi się połączyć z tą jsFiddle rozwiązania mojego problemu: https://jsfiddle.net/601oqwq2/4/

Źródło

2016-03-04 Karl Floersch

Daj nam znać, jeśli @ wf9a5m75 sugestia pracował dla ciebie. –

ImageMapType jest do celu. przeczytać tutaj: 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');

[aktualizacja] Nakładka na imageMapType powyżej obecnego mapType

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

Źródło

2016-03-04 19:18:28 wf9a5m75

Wygląda na to, że trzeba ustawić krycie. Brakuje również przecinka po 'minZoom: 0'. Oto szybkie zhackowane JSFiddle: https://jsfiddle.net/601oqwq2/ –

W moim rozwiązaniu wygląda na to, że pod kafelkami OpenWeatherMap nie ma kafelków Map Google. Próbowałem usunąć elementy mapy, ale nic nie jest pod. Czy masz jakieś sugestie/zmiany do mojego jsFiddle? –

Pozwolę sobie jasno potwierdzić. Czy chcesz zobaczyć oryginalne kafelki mapy Google pod warstwą OSM, czy nie? – wf9a5m75

Poprawa na odpowiedź wf9a5m75 użytkownika.

Po przybliżeniu pomalowane kafelki obrazu nie pokrywają podstawowej mapy. Możemy skorzystać z funkcji normalizacji (jak wspomniano w linku here), aby zapewnić, że obejmują one cały obszar.

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>

Źródło

2016-10-04 23:14:46

Nie jestem do końca pewien, co to już daje (2018) - chyba że się nie mylę - Obecnie, używając 'coord.x' i' y' zamiast ich znormalizowanych odpowiedników zapewnia dokładny, ruchomy element, który również powtarza się na osi X, niezależnie od powiększenia. Dodatkowo OpenWeatherMap sugeruje użycie 'https://tile.openweathermap.org/map/ {layer}/{z}/{x}/{y} .png? Appid = {api_key}' dla darmowych map, które działają praktycznie tak samo, wystarczy wybrać rodzaj mapy, którą chcesz nałożyć.(Opady, chmury, temp, itp.) –

Nieważne, że ostatnia część - w końcu zacząłem rozumieć, jak działa Vane, a adres URL, którego używasz w odpowiedzi, jest nadal taki, jaki dają! Jeśli ktoś był tak zagubiony jak ja - musisz utworzyć warstwy w edytorze map owm.io i wybrać jedną lub więcej warstw pogody. –

Google Maps JavaScript API z nakładką warstwy kafli OpenWeatherMap

Odpowiedz

Powiązane problemy