Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από Sermac » 04 Απρ 2013 19:45

Καλησπέρα!

Προσπαθώ να φορτώσω με Google Maps API v3 τα map tiles από τον wms server του Κτηματολογίου. Κολλάω στο σημείο που πρέπει να μετατρέψω τα coords των tiles σε Latitude-Longitude για την παράμετρο &bbox={minx,miny,maxx,maxy}.

Αν το έχει προσπαθήσει κανείς ας με βοηθήσει!

Demo: http://www.sermac.gr/lab/maps/

Ο κώδικας:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
			* &#123;
				margin&#58;0;
				padding&#58;0;
			&#125;
			
			body, html &#123;
				width&#58;100%;
				height&#58;100%;
			&#125;
			
			#map &#123;
				position&#58;absolute;
				top&#58;0;
				left&#58;0;
				width&#58;100%;
				height&#58;100%;
			&#125;
			
				#map-canvas &#123;
					position&#58;absolute;
					top&#58;0;
					left&#58;0;
					z-index&#58;0;
					width&#58;100%;
					height&#58;100%;
				&#125;
				
				#map-types &#123;
					position&#58;absolute;
					top&#58;30px;
					right&#58;20px;
					width&#58;200px;
					height&#58;30px;
					z-index&#58;1;
				&#125;
		</style>
		<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
		<div id="map">
			<div id="map-canvas"><!-- --></div>
			<select id="map-types">
				<option value="google_roadmap">Google Maps</option>
				<option value="google_satellite">Google Maps Satellite</option>
				<option value="google_hybrid">Google Maps Hybrid</option>
				<option value="google_terrain">Google Maps Terrain</option>
				<option value="openstreetmap">OpenStreetMap &#40;OSM&#41;</option>
				<option value="soviet-military">Soviet Military Map</option>
				<option value="ktimatologio">Κτηματολόγιο Α.Ε.</option>
			</select>
		</div>
		<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			<!--//--><!&#91;CDATA&#91;//><!--
			function initialize&#40;&#41; &#123;
				map = new google.maps.Map&#40;document.getElementById&#40;'map-canvas'&#41;, &#123;
					zoom&#58; 13,
					center&#58; new google.maps.LatLng&#40;40.634929,22.959023&#41;,
					mapTypeId&#58; google.maps.MapTypeId.SATELLITE,
					mapTypeControl&#58; false,
					streetViewControl&#58; false
				&#125;&#41;;
			&#125;;
			
			var mapTypeIds = &#91;&#93;;
			for&#40;var type in google.maps.MapTypeId&#41; &#123;
				mapTypeIds.push&#40;google.maps.MapTypeId&#91;type&#93;&#41;;
			&#125;
			
			function tile2long&#40;x,z&#41; &#123;
				return &#40;x/Math.pow&#40;2,z&#41;*360-180&#41;;
			&#125;

			function tile2lat&#40;y,z&#41; &#123;
				var n=Math.PI-2*Math.PI*y/Math.pow&#40;2,z&#41;;
				return &#40;180/Math.PI*Math.atan&#40;0.5*&#40;Math.exp&#40;n&#41;-Math.exp&#40;-n&#41;&#41;&#41;&#41;;
			&#125;
			
			$&#40;'#map-types'&#41;.change&#40;function&#40;&#41; &#123;
				if&#40;$&#40;this&#41;.val&#40;&#41; === 'google_roadmap'&#41; &#123;
					map.setMapTypeId&#40;google.maps.MapTypeId.ROADMAP&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'google_satellite'&#41; &#123;
					map.setMapTypeId&#40;google.maps.MapTypeId.SATELLITE&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'google_hybrid'&#41; &#123;
					map.setMapTypeId&#40;google.maps.MapTypeId.HYBRID&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'google_terrain'&#41; &#123;
					map.setMapTypeId&#40;google.maps.MapTypeId.TERRAIN&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'openstreetmap'&#41; &#123;
					map.mapTypes.set&#40;'openstreetmap', new google.maps.ImageMapType&#40;&#123;
						getTileUrl&#58; function&#40;coord, zoom&#41; &#123;
							return 'http&#58;//tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
						&#125;,
						tileSize&#58; new google.maps.Size&#40;256, 256&#41;,
						name&#58; 'OpenStreetMap',
						maxZoom&#58; 18
					&#125;&#41;&#41;;
					mapTypeIds.push&#40;'openstreetmap'&#41;;
					map.setMapTypeId&#40;'openstreetmap'&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'soviet-military'&#41; &#123;
					map.mapTypes.set&#40;'soviet-military', new google.maps.ImageMapType&#40;&#123;
						getTileUrl&#58; function&#40;coord, zoom&#41; &#123;
							return 'http&#58;//78.46.61.141/cgi-bin/tilecache-2.11/tilecache.py/1.0.0/topomapper_gmerc/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
						&#125;,
						tileSize&#58; new google.maps.Size&#40;256, 256&#41;,
						name&#58; 'Soviet Military Map',
						maxZoom&#58; 13
					&#125;&#41;&#41;;
					mapTypeIds.push&#40;'soviet-military'&#41;;
					map.setMapTypeId&#40;'soviet-military'&#41;;
				&#125;
				else if&#40;$&#40;this&#41;.val&#40;&#41; === 'ktimatologio'&#41; &#123;
					map.mapTypes.set&#40;'ktimatologio', new google.maps.ImageMapType&#40;&#123;
						getTileUrl&#58; function&#40;coord, zoom&#41; &#123;
							/************ FIX NEEDED ************/
							
							var coordLat = tile2lat&#40;coord.y, zoom&#41;;
							var coordLng = tile2long&#40;coord.x, zoom&#41;;
							//alert&#40;coordLat + ', ' + coordLng&#41;;
							
							/*
							var southWestLat = 32.400000;
							var southWestLng = 19.153000;
							var northEastLat = 41.625000;
							var northEastLng = 30.962000;
							*/
							var bbox = '32.400000,19.153000.41.625000,30.962000';
							return 'http&#58;//gis.ktimanet.gr/wms/wmsopen/wmsserver.aspx?LAYERS=KTBASEMAP&FORMAT=image/png&WIDTH=512&HEIGHT=512&TRANSPARENT=TRUE&SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&SRS=EPSG&#58;4326&BBOX=' + bbox;
						
							/*
							WMS Parameter Reference&#58; http&#58;//webhelp.esri.com/arcims/9.3/general/mergedprojects/wms_connect/wms_connector/get_map.htm
							*/
							
							/************ FIX NEEDED ************/
						&#125;,
						tileSize&#58; new google.maps.Size&#40;512, 512&#41;,
						name&#58; 'Ktimatologio AE',
						maxZoom&#58; 18
					&#125;&#41;&#41;;
					mapTypeIds.push&#40;'ktimatologio'&#41;;
					map.setMapTypeId&#40;'ktimatologio'&#41;;
				&#125;
			&#125;&#41;;
			
			google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
			//--><!&#93;&#93;>
		</script>
	</body>
</html>
Χρήσιμα:
https://developers.google.com/maps/docu ... /reference
http://webhelp.esri.com/arcims/9.3/gene ... ms_connect
https://groups.google.com/forum/#!msg/m ... 8Gzg_0xqYJ
http://www.maptiler.org/google-maps-coo ... et_map.htm
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από alou » 04 Απρ 2013 20:23

Δεν νομίζω ότι θα σε βοηθήσει ιδιαίτερα αλλά τώρα φτιάχνω και εγώ κάτι για χάρτες κτηματολογίου και πληροφορίες ΟΤΑ... τα στοιχεία lat long υπάρχουν στη βάση - αν και θέλουν κάποια δουλειά ακόμα τόσο σημεία όσο και η παρουσίαση.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από fafos » 04 Απρ 2013 20:59

exeis polla lathi ston kodika.. en to metaxy to screen tou kthmatologio mou dinei ena watermarked leuko screenshot:

Κώδικας: Επιλογή όλων

function initialize&#40;&#41; &#123;
	var myOptions = &#123;
		zoom &#58; 13,
		center &#58; new google.maps.LatLng&#40;40.634929, 22.959023&#41;,
		mapTypeId &#58; google.maps.MapTypeId.SATELLITE,
		mapTypeControl &#58; false,
		streetViewControl &#58; false
	&#125;
	var map = new google.maps.Map&#40;document.getElementById&#40;"map-canvas"&#41;, myOptions&#41;;

	var mapTypeIds = &#91;&#93;;
	for &#40;var type in google.maps.MapTypeId&#41; &#123;
		mapTypeIds.push&#40;google.maps.MapTypeId&#91;type&#93;&#41;;
	&#125;

	function tile2long&#40;x, z&#41; &#123;
		return &#40;x / Math.pow&#40;2, z&#41; * 360 - 180&#41;;
	&#125;

	function tile2lat&#40;y, z&#41; &#123;
		var n = Math.PI - 2 * Math.PI * y / Math.pow&#40;2, z&#41;;
		return &#40;180 / Math.PI * Math.atan&#40;0.5 * &#40;Math.exp&#40;n&#41; - Math.exp&#40;-n&#41;&#41;&#41;&#41;;
	&#125;

	$&#40;'#map-types'&#41;.change&#40;function &#40;&#41; &#123;
		if &#40;$&#40;this&#41;.val&#40;&#41; === 'google_roadmap'&#41; &#123;
			map.setMapTypeId&#40;google.maps.MapTypeId.ROADMAP&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'google_satellite'&#41; &#123;
			map.setMapTypeId&#40;google.maps.MapTypeId.SATELLITE&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'google_hybrid'&#41; &#123;
			map.setMapTypeId&#40;google.maps.MapTypeId.HYBRID&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'google_terrain'&#41; &#123;
			map.setMapTypeId&#40;google.maps.MapTypeId.TERRAIN&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'openstreetmap'&#41; &#123;
			map.mapTypes.set&#40;'openstreetmap', new google.maps.ImageMapType&#40;&#123;
					getTileUrl &#58; function &#40;coord, zoom&#41; &#123;
						return 'http&#58;//tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
					&#125;,
					tileSize &#58; new google.maps.Size&#40;256, 256&#41;,
					name &#58; 'OpenStreetMap',
					maxZoom &#58; 18
				&#125;&#41;&#41;;
			mapTypeIds.push&#40;'openstreetmap'&#41;;
			map.setMapTypeId&#40;'openstreetmap'&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'soviet-military'&#41; &#123;
			map.mapTypes.set&#40;'soviet-military', new google.maps.ImageMapType&#40;&#123;
					getTileUrl &#58; function &#40;coord, zoom&#41; &#123;
						return 'http&#58;//78.46.61.141/cgi-bin/tilecache-2.11/tilecache.py/1.0.0/topomapper_gmerc/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
					&#125;,
					tileSize &#58; new google.maps.Size&#40;256, 256&#41;,
					name &#58; 'Soviet Military Map',
					maxZoom &#58; 13
				&#125;&#41;&#41;;
			mapTypeIds.push&#40;'soviet-military'&#41;;
			map.setMapTypeId&#40;'soviet-military'&#41;;
		&#125; else if &#40;$&#40;this&#41;.val&#40;&#41; === 'ktimatologio'&#41; &#123;
			map.mapTypes.set&#40;'ktimatologio', new google.maps.ImageMapType&#40;&#123;
					getTileUrl &#58; function &#40;coord, zoom&#41; &#123;
						/************ FIX NEEDED ************/

						var coordLat = tile2lat&#40;coord.y, zoom&#41;;
						var coordLng = tile2long&#40;coord.x, zoom&#41;;
						//alert&#40;coordLat + ', ' + coordLng&#41;;

						/*
						var southWestLat = 32.400000;
						var southWestLng = 19.153000;
						var northEastLat = 41.625000;
						var northEastLng = 30.962000;
						 */
						var bbox = '32.400000,19.153000,41.625000,30.962000';
						return 'http&#58;//gis.ktimanet.gr/wms/wmsopen/wmsserver.aspx?LAYERS=KTBASEMAP&FORMAT=image/png&WIDTH=512&HEIGHT=512&TRANSPARENT=TRUE&SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&SRS=EPSG&#58;4326&BBOX=' + bbox;

						/*
						WMS Parameter Reference&#58; http&#58;//webhelp.esri.com/arcims/9.3/general/mergedprojects/wms_connect/wms_connector/get_map.htm
						 */

						/************ FIX NEEDED ************/
					&#125;,
					tileSize &#58; new google.maps.Size&#40;512, 512&#41;,
					name &#58; 'Ktimatologio AE',
					maxZoom &#58; 18
				&#125;&#41;&#41;;
			mapTypeIds.push&#40;'ktimatologio'&#41;;
			map.setMapTypeId&#40;'ktimatologio'&#41;;
		&#125;
	&#125;&#41;;
&#125;
google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από Sermac » 04 Απρ 2013 21:11

fafos έγραψε:exeis polla lathi ston kodika.. en to metaxy to screen tou kthmatologio mou dinei ena watermarked leuko screenshot:
Επειδή σε εκείνο το σημείο δεν υπάρχει έδαφος. Αν για παράδειγμα βάλεις:

Κώδικας: Επιλογή όλων

var bbox = '23.115234375,40.60546875,23.203125,40.693359375';
θα τυπώσει την λίμνη Κορώνεια.

Το θέμα είναι να υπολογίζονται δυναμικά οι συντεταγμένες του bbox ανάλογα με το coord ώστε να καλύπτει όλο τον χάρτη και να μην κάνει repeat την ίδια εικόνα.
Εικόνα

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από fafos » 04 Απρ 2013 21:17

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από Sermac » 04 Απρ 2013 21:28

Έχω κάνει κάτι αντίστοιχο. Πήρα με printscreen μια εικόνα από το Κτηματολόγιο, την έκανα γεωαναφορά στο ArcGIS, μετά export σε KML και τέλος την φόρτωσα στο Google Maps με geoxml3. Αλλά έτσι έχω μόνο μια στατική εικόνα από ψηλά, χωρίς να μπορεί να γίνει zoom in/out.
Εικόνα

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από Sermac » 04 Απρ 2013 21:35

Εντωμεταξύ με OpenLayers Map Viewer γίνεται πανεύκολα... Πφφφ... :evil:

http://www.sermac.gr/lab/maps/ktimatologio.html
Εικόνα

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από fafos » 04 Απρ 2013 21:36

allazontas tis syntetagmenes pairno to screen tou kthamatologiou xoris provlhma:

Κώδικας: Επιλογή όλων

var overlay;

USGSOverlay.prototype = new google.maps.OverlayView&#40;&#41;;

function initialize&#40;&#41; &#123;
	var myLatLng = new google.maps.LatLng&#40;40.682721, 23.154373&#41;;
	var mapOptions = &#123;
		zoom &#58; 13,
		center &#58; myLatLng,
		mapTypeId &#58; google.maps.MapTypeId.SATELLITE
	&#125;;

	var map = new google.maps.Map&#40;document.getElementById&#40;'map-canvas'&#41;, mapOptions&#41;;

	var swBound = new google.maps.LatLng&#40;40.60546875, 23.115234375&#41;;
	var neBound = new google.maps.LatLng&#40;40.693359375, 23.203125&#41;;
	var bounds = new google.maps.LatLngBounds&#40;swBound, neBound&#41;;
	var bbox = '23.115234375,40.60546875,23.203125,40.693359375';
	// Photograph courtesy of the U.S. Geological Survey
	var srcImage = 'http&#58;//gis.ktimanet.gr/wms/wmsopen/wmsserver.aspx?LAYERS=KTBASEMAP&FORMAT=image/png&WIDTH=512&HEIGHT=512&TRANSPARENT=TRUE&SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&SRS=EPSG&#58;4326&BBOX=' + bbox;
	overlay = new USGSOverlay&#40;bounds, srcImage, map&#41;;
&#125;

function USGSOverlay&#40;bounds, image, map&#41; &#123;

	// Now initialize all properties.
	this.bounds_ = bounds;
	this.image_ = image;
	this.map_ = map;

	// We define a property to hold the image's div. We'll
	// actually create this div upon receipt of the onAdd&#40;&#41;
	// method so we'll leave it null for now.
	this.div_ = null;

	// Explicitly call setMap on this overlay
	this.setMap&#40;map&#41;;
&#125;

USGSOverlay.prototype.onAdd = function &#40;&#41; &#123;

	// Note&#58; an overlay's receipt of onAdd&#40;&#41; indicates that
	// the map's panes are now available for attaching
	// the overlay to the map via the DOM.

	// Create the DIV and set some basic attributes.
	var div = document.createElement&#40;'div'&#41;;
	div.style.borderStyle = 'none';
	div.style.borderWidth = '0px';
	div.style.position = 'absolute';

	// Create an IMG element and attach it to the DIV.
	var img = document.createElement&#40;'img'&#41;;
	img.src = this.image_;
	img.style.width = '100%';
	img.style.height = '100%';
	img.style.position = 'absolute';
	div.appendChild&#40;img&#41;;

	// Set the overlay's div_ property to this DIV
	this.div_ = div;

	// We add an overlay to a map via one of the map's panes.
	// We'll add this overlay to the overlayLayer pane.
	var panes = this.getPanes&#40;&#41;;
	panes.overlayLayer.appendChild&#40;div&#41;;
&#125;

USGSOverlay.prototype.draw = function &#40;&#41; &#123;

	// Size and position the overlay. We use a southwest and northeast
	// position of the overlay to peg it to the correct position and size.
	// We need to retrieve the projection from this overlay to do this.
	var overlayProjection = this.getProjection&#40;&#41;;

	// Retrieve the southwest and northeast coordinates of this overlay
	// in latlngs and convert them to pixels coordinates.
	// We'll use these coordinates to resize the DIV.
	var sw = overlayProjection.fromLatLngToDivPixel&#40;this.bounds_.getSouthWest&#40;&#41;&#41;;
	var ne = overlayProjection.fromLatLngToDivPixel&#40;this.bounds_.getNorthEast&#40;&#41;&#41;;

	// Resize the image's DIV to fit the indicated dimensions.
	var div = this.div_;
	div.style.left = sw.x + 'px';
	div.style.top = ne.y + 'px';
	div.style.width = &#40;ne.x - sw.x&#41; + 'px';
	div.style.height = &#40;sw.y - ne.y&#41; + 'px';
&#125;

USGSOverlay.prototype.onRemove = function &#40;&#41; &#123;
	this.div_.parentNode.removeChild&#40;this.div_&#41;;
	this.div_ = null;
&#125;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Google Maps API v3 με basemap τον χάρτη του Κτηματολογίου

Δημοσίευση από Sermac » 05 Απρ 2013 12:45

Δούλεψε τελικά! Χωρίς overlay.

http://www.sermac.gr/lab/maps/
Εικόνα

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες