Openlayers Bing, Google, Osm, Yandex ve Here Maps Altlıklarının Kullanımı Örneği

26 Kudo 2020 Omer-UYGUN Open Layers

Aşağıdaki kodlar openlayers son sürümü üzerinde Bing, Google, Osm, Yandex ve Here Maps Altlıklarını ekleyebilirsiniz. Fakat bing altlıklarını görüntüleyebilmek için https://www.bingmapsportal.com/Application#   adresinden web bing lisansı almanız gerekiyor.

<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width" />
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>
	 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
	 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
	  <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
</head>

<body>
	<div id="map" class="map"></div>
	<br/>
	<div>
		Altlık Katman <select id="cmbBaseLayers">
						<option value="0">Altlık Yok</option>
						<option value="1" selected>Google Yol</option>
						<option value="2">Google Uydu</option>
						<option value="3">Google Fiziksel</option>
						<option value="4">Bing Yol</option>
						<option value="5">Bing Uydu</option>
						<option value="6">Bing Karma</option>
						<option value="13">Bing Koyu</option>
						<option value="7">Osm Yol</option>
						<option value="8">Yandex Yol</option>
						<option value="9">Yandax Uydu</option>
						<option value="10">Yandex Karma</option>
						<option value="11">Here Uydu</option>
					  </select>
					  <br/>
		Bing Maps Key <input type="text" id="txtBingMapsKey" value="" style="width: 70%" />
	</div>
	<script type="text/javascript">
	var bingMapKey = "";
    var GlobalBaseLayer=null;
    var map=null;
		$(document).ready(function(){
			bingMapKey=$("#txtBingMapsKey").val();
			GlobalBaseLayer = new ol.layer.Tile({
							preload: Infinity,
				            source: getBaseLayerSource()
				          });
			map = new ol.Map({
        				target: 'map',
				        layers: [
				          GlobalBaseLayer
				        ],
				        view: new ol.View({
				          center: [4061987.4979090793, 4676100.696126919],
				          zoom: 6
				        })
			});
			$("#cmbBaseLayers").change(function(){
				GlobalBaseLayer.setSource(getBaseLayerSource());
			});
		});
      	function getBaseLayerSource(){
      		bingMapKey=$("#txtBingMapsKey").val();
      		var selected=$("#cmbBaseLayers").val();
      		var source=null;
      		switch (selected) {
                case "0":
                    source = null;
                    break;
                case "1":
                    source = new ol.source.XYZ({ crossOrigin: 'Anonymous', url: 'https://mts0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' });
                    break;
                case "2":
                    source = new ol.source.XYZ({ crossOrigin: 'Anonymous', url: 'https://mts0.google.com/vt/lyrs=y&x={x}&y={y}&z={z}' });
                    break;
                case "3":
                    source = new ol.source.XYZ({ crossOrigin: 'Anonymous', url: 'https://mts0.google.com/vt/lyrs=p&x={x}&y={y}&z={z}' });
                    break;
                case "4":
                    source = new ol.source.BingMaps({ crossOrigin: 'Anonymous',key: bingMapKey, imagerySet: 'RoadOnDemand' });
                    break;
                case "5":
                    source = new ol.source.BingMaps({ crossOrigin: 'Anonymous', key: bingMapKey, imagerySet: 'Aerial' });
                    break;
                case "6":
                    source = new ol.source.BingMaps({ crossOrigin: 'Anonymous', key: bingMapKey, imagerySet: 'AerialWithLabelsOnDemand' });
                    break;
                case "13":
                    source = new ol.source.BingMaps({ crossOrigin: 'Anonymous',key: bingMapKey, imagerySet: 'CanvasDark' });
                    break;
                case "7":
                    source = new ol.source.OSM({ crossOrigin: 'Anonymous', url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png' });
                    break;
                case "8":
                    source = new ol.source.XYZ({
                        crossOrigin: 'Anonymous', url: 'https://vec01.maps.yandex.net/tiles?l=map&v=4.49.1&x={x}&y={y}&z={z}&scale=1&lang=tr_TR',
                        projection: 'EPSG:3395',
                        tileGrid: ol.tilegrid.createXYZ({
                            extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
                        })
                    });
                    thumb = 'yandexRoadLogo';
                    break;
                case "9":
                    source = new ol.source.XYZ({
                        crossOrigin: 'Anonymous', url: 'https://sat01.maps.yandex.net/tiles?l=sat&v=3.249.0&x={x}&y={y}&z={z}&lang=tr_TR',
                        projection: 'EPSG:3395',
                        tileGrid: ol.tilegrid.createXYZ({
                            extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
                        })
                    });
                    thumb = 'yandexSatLogo';
                    break;
                case "10":
                    source = new ol.source.XYZ({
                        crossOrigin: 'Anonymous', url: 'https://sat01.maps.yandex.net/tiles?l=sat&v=3.249.0&x={x}&y={y}&z={z}&lang=tr_TR',
                        projection: 'EPSG:3395',
                        tileGrid: ol.tilegrid.createXYZ({
                            extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
                        })
                    });
                    labelsource = new ol.source.XYZ({
                        crossOrigin: 'Anonymous', url: 'https://vec01.maps.yandex.net/tiles?l=skl&v=4.49.1&x={x}&y={y}&z={z}&scale=1&lang=tr_TR',
                        projection: 'EPSG:3395',
                        tileGrid: ol.tilegrid.createXYZ({
                            extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
                        })
                    });
                    thumb = 'yandexHybLogo';
                    break;
                case "11":
                    source = new ol.source.XYZ({
                        crossOrigin: 'Anonymous', url: 'https://{1-4}.aerial.maps.cit.api.here.com'
                            + '/maptile/2.1/maptile/newest/satellite.day/{z}/{x}/{y}/256/png'
                            + '?app_id=uCoOL3v85PjRtYVNrrsq&app_code=hOQlSS5oPF4XojrhSoW-Jw'
                    });
                    break;
                }
                return source;
      	};
    </script>
</body>
</html>

 

 

Örnek dosya indirme linki:

OpenlayersExample.rar (1.69 kb)

Add comment

Loading