Web-GIS Stack:Openlayers, JQuery, AJAX, GeoJSON, PHP, geoPHP und MySQL

erstellt am: 21.12.2012 | Kategorien: Geo/GIS Corner / Webentwicklung | Schlagworte: Ajax • geoPHP • PHP • Webgis

Im Folgenden möchte ich zeigen, wie man mit Openlayers, JQuery, AJAX, GeoJSON, PHP, geoPHP und MySQL einfache Web-GIS Anwendungen aufbauen kann, die für einfache Anzeigefunktionalitäten genügen und auf jedem Webhosting Paket laufen können. Zudem ist keine teure GIS-Server Technologie notwendig und es muss keine Serversoftware wie UMN Mapserver oder Geoserver betrieben werden (was bei den meist Webhostern generell unmöglich ist).

Schritt 1: Tabelle in MySQL anlegen, die Godaten enthält.

CREATE TABLE IF NOT EXISTS `poi` (
`POIID` int(11) NOT NULL auto_increment,
`GEOM` point NOT NULL,
`POITXT` varchar(255) NOT NULL,
`X` double default NULL,
`Y` double default NULL,
PRIMARY KEY (`POIID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

Schritt2: PHP Code zur Umwandlung in GeoJSON:

Hierzu muss die geoPHP Bibliothek heruntergeladen werden und auf dem Server abgelegt werden.

include_once('geoPHP.inc');
header('Content-type: application/json');

header("Cache-Control: no-cache, must-revalidate");

//DB Connection

$con = mysql_connect(HOST,USER,PW);

mysql_select_db(DB, $con);

$sql = 'SELECT POIID, AsText(GEOM) as GEOM, POITXT FROM poi';

$dbErgebnis = mysql_query($sql, $con);

//Arrays fuer JSON Strukturbildung

$all = array();

$features =array();

$geometry = array();

$geometries = array();

$featCon = array();

while($datErg = mysql_fetch_array($dbErgebnis)){

//Umwandlung der Geometrie in JSON

$point =geoPHP::load($datErg['GEOM'],'wkt');

$pjson=$point->out('json');

$pjsonArray = json_decode($pjson);

array_push($geometries, $pjsonArray);

}

//JSON Arraystruktur aufbauen

$geometry['type']= "GeometryCollection";

$geometry['geometries'] = $geometries;

$features['geometry'] = $geometry;

$features['type']= "Feature";

$features['properties']= "{}";

$all['type']= "FeatureCollection";

array_push($featCon, $features);

$all['features'] = $featCon;

//Ausgabe der GeoJSON Datei

print json_encode($all, JSON_HEX_APOS);

Schritt3: Client erstellen:

Nun können wir einen Openlayers Client erstellen. Hierzu werden die JavaScript Bibliotheken JQuery und Openlayers benötigt. Im wesentlichen spielt sich die Musik hier ab:

<script src="lib/jquery-1.6.4.min.js" type="text/javascript">
</script>

<script src="lib/OpenLayers/OpenLayers.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var lon = 5;

var lat = 40;

var zoom = 5;

var map, layer;

map = new OpenLayers.Map( 'map' );

layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://vmap0.tiles.osgeo.org/wms/vmap0",

{layers: 'basic'} );

map.addLayer(layer);

map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

var geojson_format = new OpenLayers.Format.GeoJSON();

var vector_layer = new OpenLayers.Layer.Vector();

map.addLayer(vector_layer);

$.getJSON("https://www.ulrischa.de/geoPHP/geophpdao.php",

function(data) {

vector_layer.addFeatures(geojson_format.read(data));

});

});

</script>

Den ganzen Quellcode der Clientseite kann man hier einsehen.

Kleiner Tipp zum Testen: Wenn man lokal die Clientseite testet, schlägt der Aufruf der entfernten PHP Seite, die das JSON erzeugt fehl.

Kommentare wurden abgeschlossen.