通过osm跟踪网页（打开街道地图）答案

【问题标题】：Tracking web page via osm(open street map)通过osm跟踪网页（打开街道地图）
【发布时间】：2016-07-11 11:37:38
【问题描述】：

我需要创建一个网页，该网页将通过打开的街道地图跟踪一个人，其中将通过安装在他手机上的应用程序发送经纬度数据。该应用程序会将 JSON 文件中的 lat 和 long 发送到数据库中的服务器，我的网页将从该服务器获取数据并在整个旅程中以虚线显示骑车人所遵循的路径。我还搜索了开放层简单示例......但无法获得更多信息......如果有人这样做，请告诉我如何处理以及如何做到这一点。谢谢各位

我必须在我的地图中显示这个人和我的地图所遵循的路径，数据库中存在所有 lat 和 long 的值......我必须显示一个人跟随的虚线......我已经通过以静态数据格式传递当前的经纬度来集成地图......但是面临动态获取的问题......我如何显示虚线，即他所遵循的路径......

这是我的代码--js 代码-

<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>

只是帮助我从数据库中动态获取多个数据以及如何在地图上显示这些数据。以上只是静态长纬度值的代码。谢谢。

【问题讨论】：

标签： javascript html openstreetmap tracking openlayers-3

【解决方案1】：

这可能会对您有所帮助：http://wiki.openstreetmap.org/wiki/Openlayers_Track_example

无论如何，该示例从 .gpx 文件中获取数据。在这里，您可以继续将坐标保存在本地存储中：

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())
      });

有了这个你得到坐标，然后你通过以下方式将它们保存在本地存储中：

localStorage.setItem(someIndex,theLocationYouGot);

（请记住，您不能将对象存储在本地存储中，因此您需要对其进行 JSON.stringify 处理！）
要从本地存储中获取项目，您可以使用以下命令：

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

然后您将功能添加到您的图层！

您好！

【讨论】：

感谢您的帮助...我已使用代码从文本文件中提取我的 lon-lat 值，但问题是我必须直接从数据库中提取它并将其存储在文件中我必须从那里传递它们....如果您不介意可以通过我的邮件中的代码.... rohitrkbe@gmail.com ...谢谢老兄....
不客气。我建议您在实时应用程序中使用本地存储，并在某些特定事件（例如每 10 分钟）将它们（如果需要）保存在数据库中，仅用于存储数据。遗憾的是我没有代码，但我之前写的可能会对你有所帮助。顺便说一句，我可以看到您使用的是 openlayers2，而不是 openlayers3，请记住这一点并编辑您的帖子标签以获得更好的帮助！

【解决方案2】：

这是我正在做的代码...

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);

文本文件格式为：

lat lon icon    iconSize    iconOffset

48.9459301 9.6075669 icon_purple.png 35,35 0,-24 48.9899851 9.5382032 图标.png 35,35 -8,-8

问题是当我向文件中插入更多数据时，它没有读取它......并且必须编写代码才能直接从数据库中读取它。

【讨论】：