2016-07-11 15 views
0

Ich muss eine Webseite erstellen, die eine Person über die offene Straßenkarte verfolgt, in der lat-lange Daten über eine auf seinem Telefon installierte App gesendet werden. Die App sendet die Lat und Long in JSON-Datei an einen Server in einer Datenbank, von wo aus meine Webseite die Daten und zeigen Sie den Weg des Biker in gepunkteten Linien während der Reise. Ich habe auch nach einfachen Beispielen für offene Ebenen gesucht ... aber ich konnte keine weiteren Informationen erhalten ... wenn jemand das getan hat, bitte sag mir, wie ich mich diesem Thema annähere und wie ich es mache. Danke JungsWebseite über osm verfolgen (Karte öffnen)

Ich muss den Weg zeigen, gefolgt von der Person und in meiner Karte, mit allen Werten von lat und long in der Datenbank vorhanden ... Ich muss eine gepunktete Linie zeigen, die von der Person gefolgt wird .... Ich habe die Karte integriert, indem ich den aktuellen Lat und lange im statischen Datenformat übergeben habe .... aber vor dem Problem für dynamisches Holen ... wie kann ich gepunktete Linie zeigen, dh den Weg, der von ihm verfolgt wird ...

das ist mein code-- js Code-

<script> 
    function init() 
    { 
    map = new OpenLayers.Map("mapdiv"); 
    var mapnik = new OpenLayers.Layer.OSM(); 
    map.addLayer(mapnik); 

    var lonlat1 = new OpenLayers.LonLat(77.64760799999999,12.9081357).transform(
     new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
     new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator 
    ); 
    var lonlat2 = new OpenLayers.LonLat(78.64760799999999,11.9081357).transform(
     new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
     new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator 
    ); 

    var zoom = 8; 

    var markers = new OpenLayers.Layer.Markers("Markers"); 
    map.addLayer(markers); 
    markers.addMarker(new OpenLayers.Marker(lonlat1)); 
    markers.addMarker(new OpenLayers.Marker(lonlat2)); 
    map.setCenter(lonlat2, zoom); 
    map.setCenter(lonlat1, zoom); 

    } 
</script> 
<body onload="init();"> 
<p><h3 id="h3">Tracking Page With An Embeded Map</h3></p> 
<div id="mapdiv"></div> 

helfen Sie mir einfach, mehrere Daten dynamisch aus der Datenbank abzurufen und diese auf der Karte anzuzeigen. Oben ist nur der Code für statische Längenangaben. Vielen Dank. Das könnte Ihr

Antwort

0

helfen: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example

Wie auch immer das Beispiel nimmt die Daten aus einer .gpx-Datei. Hier könnten Sie halten Ihre Koordinaten im lokalen Speicher zu speichern:

var geolocation = new ol.Geolocation({ 
     projection: ol.proj.get('EPSG:4326'), 
     tracking: true 
     }); 
geolocation.once('change:position', function() { 
     console.log(geolocation.getPosition()); 
     $rootScope.map.getView().setCenter(geolocation.getPosition()) 
     }); 

Damit Sie die Koordinaten, und Sie sie in localstorage durch sparen:

localStorage.setItem(someIndex,theLocationYouGot); 

(Denken Sie daran, dass Sie keine Objekte speichern können in local, so müssen Sie es JSON.stringify)
um die Elemente von localstorage erhalten Sie die folgende verwenden:

var objeto = JSON.parse(window.localStorage.getItem(someIndex)); 

Und dann fügst du das Feature zu deiner Ebene hinzu!

Grüße!

+0

danke für die Hilfe ... Ich habe einen Code verwendet, um meine Werte von lon-lat aus einer Textdatei zu extrahieren, aber die Sache ist, ich muss es direkt aus der Datenbank extrahieren und in einer Datei von wo ich haben speichern um sie zu übergeben .... wenn es Ihnen nichts ausmacht, können Sie den Code in meiner Mail weitergeben .... [email protected] ... danke Kumpel .... –

+0

Gern geschehen. Ich schlage vor, Sie verwenden lokalen Speicher in der Echtzeit-App und speichern sie (wenn Sie benötigen) in der Datenbank bei einem bestimmten Ereignis (zum Beispiel alle 10 Minuten), nur um die Daten gespeichert zu haben.Leider habe ich den Code nicht, aber was ich früher geschrieben habe, könnte dir helfen. By the way, ich kann sehen, dass Sie openlayers2, nicht openlayers3 verwenden, bitte beachten Sie dies und bearbeiten Sie Ihre Post-Tags, um bessere Hilfe zu bekommen! –

0

Dies ist der Code, den ich tue ...

map = new OpenLayers.Map("mapdiv"); 
map.addLayer(new OpenLayers.Layer.OSM()); 
var position = new OpenLayers.Layer.Text("My Points", 
       { location:"./textfile.txt", 
        projection: map.displayProjection 
       }); 
map.addLayer(position); 
var layer_switcher= new OpenLayers.Control.LayerSwitcher({}); 
map.addControl(layer_switcher); 
//Set start centrepoint and zoom  
var lonLat = new OpenLayers.LonLat(9.5788, 48.9773) 
     .transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()); 
var zoom=12; 
map.setCenter(lonLat, zoom); 

die Textdatei-Format ist:

lat lon icon iconSize iconOffset 

48,9459301 9,6075669 icon_purple.png 35,35 0, -24 48,9899851 9,5382032 icon.png 35,35 -8, -8

Problem ist, wenn ich mehr Daten in die Datei einfüge es liest es nicht ... und muss für das Lesen direkt aus der Datenbank codieren.