MapTilerLayer
不透明度を調整できるGoogleMaps用画像オーバーレイ
Google Maps APIにオーバーレイのサポートを簡単に追加するシンプルなライブラリです。 Maps APIにオーバーレイを簡単にサポートするシンプルなライブラリです。また、Google Mapsで使用するためのシンプルなOpacity Controlも追加されています。 タイルオーバーレイの不透明度を変更することができます。 タイルオーバーレイの不透明度を変更したり、シンプルなジオロケーションコントロールを追加します。
Googleマップのオーバーレイ用に地図を準備する最も簡単な方法は、MapTilerDesktop を使用することです。
より詳しくページ内での使用
<!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>
ドキュメント
klokantech.MapTilerMapType(map, tileurl, opt_bounds, opt_minZoom, opt_maxZoom, opt_dontAdd)
パラメータ
- マップ{google.maps.Map}。マップオブジェクトです。
- tileurl{function} function(number, number, number) タイルへのURLを返す関数です。
- opt_bounds{google.maps.LatLngBounds}。オーバーレイの境界線。
- opt_minZoom{number} レイヤーの最小ズーム。
- opt_maxZoom{number} レイヤーの最大ズーム量。
- opt_dontAdd{boolean}レイヤを作成しますが、マップには追加しません。
メソッド
- getTile(tileCoord, zoom, ownerDocument)
- setOpacity(value) Sets opacity to value <0,1>
klokantech.OpacityControl(map, layer, opacity)
パラメータ
- マップ{google.maps.Map}。マップオブジェクトです。
- layer{Object} (オブジェクト)不透明度を変更するためのレイヤーです。
- opacity{number} レイヤーのデフォルトの不透明度。
メソッド
- setOpacity(value) Sets opacity to value <0,1>