MapTilerLayer
Sovrapposizione di immagini per GoogleMaps con controllo dell'opacità
Una semplice libreria che aggiunge un facile supporto per l'Overlay a Google Maps API. Aggiunge anche un semplice controllo dell'opacità da usare con Google Maps, che consente di modificare l'opacità della tile e un semplice controllo di geolocalizzazione.
Il modo più semplice per preparare la mappa per la sovrapposizione a Google Maps è utilizzare MapTiler Desktop.
Per saperne di piùUtilizzo nella pagina
<!DOCTYPE html>
<html>
<head>
<title>Campus Map</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
<script>
function init() {
var opts = {
streetViewControl: false,
tilt: 0,
center: new google.maps.LatLng(0, 0),
zoom: 3
};
var map = new google.maps.Map(document.getElementById('map'), opts);
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.433639, -100.470039),
new google.maps.LatLng(31.444161, -100.448983));
var mapMinZoom = 12;
var mapMaxZoom = 18;
var overlay = new klokantech.MapTilerMapType(map, function (x, y, z) {
return "https://tileserver.maptiler.com/campus/{z}/{x}/{y}.png".replace('{z}', z).replace('{x}', x).replace('{y}', y);
},
mapBounds, mapMinZoom, mapMaxZoom);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var opacitycontrol = new klokantech.OpacityControl(map, overlay);
var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);
map.fitBounds(mapBounds);
}
</script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Documentazione
klokantech.MapTilerMapType(map, tileurl, opt_bounds, opt_minZoom, opt_maxZoom, opt_dontAdd)
Parametri
- map {google.maps.Map} Oggetto mappa.
- tileurl {function} function(number, number, number) Funzione che restituisce l'url della piastrella.
- opt_bounds {google.maps.LatLngBounds} Limiti della sovrapposizione.
- opt_minZoom {numero} Zoom minimo del livello.
- opt_maxZoom {number} Zoom massimo del livello.
- opt_dontAdd {boolean} Il livello deve essere creato ma non aggiunto alla mappa.
Metodi
- getTile(tileCoord, zoom, ownerDocument)
- setOpacity(value) Sets opacity to value <0,1>
klokantech.OpacityControl(mappa, livello, opacità)
Parametri
- map {google.maps.Map} Oggetto mappa.
- layer {Oggetto} Livello per la modifica dell'opacità.
- opacità {numero} Opacità predefinita del livello.
Metodi
- setOpacity(value) Sets opacity to value <0,1>