Ugrás a fő tartalomra

Gmap, leaflet, OpenLayer térképkezelések

Google maps api verzió eltérései (objektum tulajdonságokban)



Óvatosan kell bánni a GMAP API használatával mert nem várt hibákat okozhatnak a verzió váltások. Ha konkrét API verziót nem adunk meg, akkor a legfrissebbet használva előjöhetnek nem várt program működések.
Lehetőleg inkább használjuk a setPosition(), getPosition() függvényeket objektum pozíció beállítás és kiolvasásra. Ha objektum tulajdonságot használunk óvatosnak kell lennünk.

Nyitott verzió megadásnál (itt gond lehet az idő nullásával):

<script src ="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Objektum tulajdonságok:
Geometry: Object
bounds: rh
location:
D: 18.98778040000002
k: 47.7240115

Kiolvasás és pozicionálás:
 map.getView().setCenter(ol.proj.transform([results[0].geometry.location.D, results[0].geometry.location.k], 'EPSG:4326', 'EPSG:3857'));



Konkrét verzió megadás esetén :

<script src ="https://maps.googleapis.com/maps/api/js?v=3.19"></script>

Objektum tulajdonságok:
Geometry: Object
bounds: rh
location: qf
A: 47.7240115
F: 18.98778040000002

Kiolvasás és pozicionálás:
map.getView().setCenter(ol.proj.transform([results[0].geometry.location.F, results[0].geometry.location.A], 'EPSG:4326', 'EPSG:3857'));

 Milyen egyszerű vagy bonyolult azt legjobban a megvalósítás mintákból lehet leszürni.

Leaflet forráskód: Link Link2
 function init() {
 var bounds = new L.LatLngBounds(
 new L.LatLng(45.618357, 15.846121),
 new L.LatLng(48.780321, 23.005039));
 var map = L.map('map').fitBounds(bounds);
).addTo(map);
 var options = {
 minZoom: 4,
 maxZoom: 7,
 opacity: 1,
 tms: false
 };
 L.tileLayer('{z}/{x}/{y}.png', options).addTo(map);
 }

GMAP forráskód: Link Link2
<script>
 var moonTypeOptions = {
 getTileUrl: function(coord, zoom) {
 console.log(coord);
 console.log(zoom);
 var normalizedCoord = getNormalizedCoord(coord, zoom);
 if (!normalizedCoord) {
 return null;
 }
 var bound = Math.pow(2, zoom);
 var fin = "./" + zoom + "/" + coord.x + "/" + coord.y + ".png";
 console.log(fin);
 return fin;
 },
 tileSize: new google.maps.Size(256, 256),
 maxZoom: 7,
 minZoom: 4,
 radius: 1738000,
 name: "Test"
 };
 var moonMapType = new google.maps.ImageMapType(moonTypeOptions);
 function initialize() {
 var myLatlng = new google.maps.LatLng(42, 28);
 var myOptions = {
 center: myLatlng,
 backgroundColor : "#000000",
 draggableCursor: "default",
 zoom: 5,
 backgroundColor: '#000',
 streetViewControl: false,
 mapTypeControl : false,
 mapTypeId: 'moon'
 };
 $('#map_canvas').width(window.innerWidth).height(window.innerHeight);
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 map.mapTypes.set('moon', moonMapType);
 map.setMapTypeId('moon');
 }
 function getNormalizedCoord(coord, zoom) {
 var y = coord.y;
 var x = coord.x;
 var tileRange = 1 << zoom;
 if (y < 0 || y >= tileRange) {
 return null;
 }
 if (x < 0 || x >= tileRange) {
 x = (x % tileRange + tileRange) % tileRange;
 }
 return {
 x: x,
 y: y
 };
 }
 </script>

OL2 forráskód: Link Link2

<script type="text/javascript">
var map, layer;
var mapBounds = new OpenLayers.Bounds(15.846121, 45.618357, 23.005039, 48.780321);
var mapMinZoom = 4;
var mapMaxZoom = 7;
function init() {
 var options = {
 projection: "EPSG:3857",
 displayProjection: "EPSG:4326",
 numZoomLevels: 5
 };
 map = new OpenLayers.Map('map', options);
 
 layer = new OpenLayers.Layer.XYZ("MapTiler layer", "${z}/${x}/${y}.png", {
 transitionEffect: 'resize',
 isBaseLayer: false
 });
 
 var osm = new OpenLayers.Layer.OSM();
 var gmap = new OpenLayers.Layer.Google(
 "Google Streets", {numZoomLevels: 7}
 );
 var ghyb = new OpenLayers.Layer.Google(
 "Google Hybrid",
 {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 7}
 );
 var gsat = new OpenLayers.Layer.Google(
 "Google Satellite",
 {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 7}
 );
 var gphy = new OpenLayers.Layer.Google(
 "Google Physical",
 {type: google.maps.MapTypeId.TERRAIN}
 );
 map.addLayers([
 layer, osm, gmap, gsat, ghyb, gphy
 ]);
 map.zoomToExtent(mapBounds.transform(map.displayProjection, map.projection ));
 map.addControl(new OpenLayers.Control.MousePosition());
 map.addControl(new OpenLayers.Control.Permalink());
 map.addControl(new OpenLayers.Control.LayerSwitcher()); 
}
</script>

OL3 forráskód: Link  Link2
 <body>
 <div id="map" class="map"></div>
 <script> 
 var map = new ol.Map({
 target: 'map',
 renderer: 'canvas',
 layers: [
new ol.layer.Tile({
 source: new ol.source.XYZ({
 url: './{z}/{x}/{y}.png', 
 minZoom: 4,
 maxZoom: 7,
 tilePixelRatio: 1
 })
 })
 ], 
 view: new ol.View({
center: ol.proj.transform([19.6350, 47.2964], 'EPSG:4326', 'EPSG:3857'),
 zoom: 5
 }) 
 });
var myFullScreenControl = new ol.control.FullScreen();
 map.addControl(myFullScreenControl);
 </script>
 </body>
</html>

 Néhány hasznos online eszköz:

– JSON: JSONLint
http://www.jsonlint.com
– GeoJSON: GeoJSONLint
http://www.geojsonlint.com
– KML: FEED Validator
http://www.feedvalidator.org
– GPSVisualizer/GPSBabel:
http://www.gpsvisualizer.com/gpsbabel/
– GPSBabel: http://www.gpsbabel.org



Leaflet-ről már írtam, hogy nyílt forráskódú JavaScript könyvtár mely mobilbarát interaktív webes térképek megjelenítésére szolgál.
De hogyan is használja a térkép fájlokat? Hogyan használjuk?  …
Forráskód minta:
L.tileLayer('http://{s}.mierdekel.hu/{z}/{x}/{y}.png', {
 attribution: 'Map data &copy; mierdekel.hu ',
 maxZoom: 18,
 }).addTo(map);
Az alábbi paraméterek alapján betölti a térképet.
http://{s}.mierdekel.hu/{z}/{x}/{y}.png
– {s} (subdomain) => Azonos tartalmú sorszámozott szerverek aldomén nevek (A gyorsaság növelésére akár több párhuzamos kéréssel is képes dolgozni.)
– {z} (zoom) => nagyítás mértéke
– {x} és {y} => meghatározza a rész koordinátákat

Tile elemi képek és leképzési elve:

Valóságos alap (példa) definíció és forrás:
 <!-- HTML HEADER-rész api és hozzátartózó stilus betöltése -->
 <!DOCTYPE html>
 <html>
 <head>
 <title>Simple Leaflet Map</title>
 <meta charset="utf-8" />
 <link
 rel="stylesheet"
 href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
 />
 <script
 src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
 </script>
 </head>
 <!-- HTML BODY-rész alap map DIV és JS program -->
 <body>
 <div id="map" style="width: 800px; height: 600px"></div>
<script
 // térkép réteg alapdeffinició
 var map = L.map('map').setView([47.2, 19.2], 14);
 mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '&copy; ' + mapLink + ' Contributors',
 maxZoom: 18,
 }).addTo(map);
// Jelőlőpont felvétele
 var marker = L.marker([47.2, 19.2] // jelőlő poziciója
 ,{
 title: 'Hover Text', // toltip szöveg (egér felé állásra megjelenő)
 acity: 0.5, // ikon átlátszóság
 draggable: true // mozgatható
 }
 )
 .bindPopup("<b>MIE tile szöveg</b>")
 // .openPopup() // azonnal megnyít, és látható marad
 .addTo(map);
 // vonal rajzolás
 var polyline = L.polyline([
 [47.0, 19.0], // vonalszakaszok poziciói
 [47.2, 19.2],
 [47.3, 19.5],
 [47.5, 19.2]],
 {
 color: 'blue', // vonal szín
 weight: 5, // vonal vastagság
 opacity: .5, // átlátszóság
 dashArray: '8,5', // szaggatása a vonalnak
 lineJoin: 'round' // vonalvégek lekerekítettek
 }
 ).addTo(map);
// Zárások (JS, BODY, HTML)
 </script>
 </body>
 </html>


Specialitások:
Több (választható) térkép rétegek kezelése
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
 thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 osmAttrib = '&copy; ' + osmLink + ' Contributors',
 landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
 thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
 landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
 ...
var baseLayers = {
 "OSM Mapnik": osmMap,
 "Landscape": landMap
 };
L.control.layers(baseLayers).addTo(map); // rétegkezelő meghívása paraméteresen



Réteg csoport (együtt kezelt objektomok összefogása):
var mieLayerGroup = new L.LayerGroup();
 L.marker([47.0, 19.0])
 .bindPopup('Te Papa').addTo(mieLayerGroup),
 L.marker([47.2, 19.2])
 .bindPopup('Te Papa').addTo(mieLayerGroup),
L.polyline([
 [47.0, 19.0], // vonalszakaszok poziciói
 [47.2, 19.2],
 [47.3, 19.5],
 [47.5, 19.2]]
 ).addTo(mieLayerGroup);


Rétegcsoport felvétele a rétegválasztásra:
var overlays = {"MIE saját helyek": mieLayerGroup};
 L.control.layers(baseLayers,overlays).addTo(map);




További doksik forrása:


















































Megjegyzések











Megjegyzés küldése