Question

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

我必须显示人和我的地图所遵循的路径，数据库中存在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>

只是帮我动态地从数据库中获取多个数据以及如何在地图上显示它。以上是静态长拉特值的代码..谢谢。

Answer 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中：

localStorage.setItem(someIndex,theLocationYouGot);

（请记住，您无法在localstorage中存储对象，因此您需要JSON.stringify它！）
要从localstorage获取项目，您可以使用以下内容：

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

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

问候！

Answer 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 icon.png 35,35 -8，-8

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

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

2 个答案: