ESRI javascript API 用于实时跟踪
ESRI javascript API for live tracking
我正在尝试使用 ESRI ArcGIS javascript API 实现实时跟踪功能。我无法根据从数据库中检索到的纬度、经度移动标记。为了清楚起见,这是我们为此目的使用 Google 地图的现有代码。如何使用 ESRI arcGIS javascript API?
<script type="text/javascript">
var marker, map, ct=0, geocoder ;
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>);
var mapOptions = {
zoom: 14,
maxZoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('main-map'), mapOptions);
geocoder = new google.maps.Geocoder();
var image = new google.maps.MarkerImage(
'assets/images/marker-images/image.png',
new google.maps.Size(20,21),
new google.maps.Point(0,0),
new google.maps.Point(10,21)
);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: 'I might be here'
});
}
///////////////////////////////////////////////////
$(function() {
initialize();
live();
setInterval( live , 10000);
});
function live() {
var duration = 10000;
$.ajax({
type: "GET",
url: "otravels_ajax/getlivedata.php?vid=<?php echo $imei; ?>",
dataType: 'xml',
async:false,
success: function(xml) {
$(xml).find("marker").each(function(){
var id = $(this).find('id').text(); lid=id; //alert(lid);
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));//console.log(point);
var ts = $(this).find('ts').text();//alert(ts);
var speed = $(this).find('speed').text();
var status = $(this).find('status').text();
if(status=='A') status="<span class='label label-success '>Active</span>"; else status="<span class='label label-important '>InActive</span>";
var loc_addr = $(this).find('loc').text();
var img=$(this).find('img').text();
var image = new google.maps.MarkerImage(
img,
new google.maps.Size(46,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
marker.setIcon(image);
marker.animateTo(point, {easing: 'linear', duration: duration});
if(!map.getBounds().contains(point))
map.panTo(point);
// $('#live_data').html("<tr><td>"+ts+"</td><td>"+speed+"KM/HR</td><td>"+status+"</td><td id=\"loc\">"+loc_addr+"</td></tr>");
$("#d_time").html(ts);
$("#d_speed").html(speed+"KM/HR");
$("#d_status").html(status);
geocoder.geocode({
"latLng":point
}, function (results, status) { // alert("fgb");
if (status == google.maps.GeocoderStatus.OK) {
var placeName = results[1].formatted_address; //alert(placeName);
$("#loc").html(placeName);
}
});
});
}
});
}
</script>
好吧,有一种直接的方法可以实现这一目标。
正如您在问题中提到的那样,您的数据库中某处已经拥有所有这些实时 lat/long
值。
注意:- 在 ArGIS 和 Google 地图中处理 GIS 数据的方法完全不同。为了在地图上显示位置,我们通常使用 ArcGIS JS 中的图形图层(推荐)API.
下面是实现这个的步骤-
- 创建一个
ESRI Map
- 为实时跟踪功能创建并加载
graphics layer
- 从数据库中获取
current/live location
。
- 从数据库中获取实时位置后,清除以前的实时跟踪功能并在新发现的位置添加新功能。
- 在每次刷新间隔后,您必须从地图上清除以前的数据/点并添加新的。
您可以使用 move Edit operation
的功能,使用 ArcGIS/ESRI 工具,但这太复杂了,因此建议删除和添加功能。
希望以上提示对您有所帮助:)
API 文档包含两个跟踪示例。
要跟踪当前位置:
https://developers.arcgis.com/javascript/latest/sample-code/widgets-track-basic/index.html
从一组位置模拟跟踪:https://developers.arcgis.com/javascript/latest/sample-code/widgets-track/index.html
我正在尝试使用 ESRI ArcGIS javascript API 实现实时跟踪功能。我无法根据从数据库中检索到的纬度、经度移动标记。为了清楚起见,这是我们为此目的使用 Google 地图的现有代码。如何使用 ESRI arcGIS javascript API?
<script type="text/javascript">
var marker, map, ct=0, geocoder ;
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>);
var mapOptions = {
zoom: 14,
maxZoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('main-map'), mapOptions);
geocoder = new google.maps.Geocoder();
var image = new google.maps.MarkerImage(
'assets/images/marker-images/image.png',
new google.maps.Size(20,21),
new google.maps.Point(0,0),
new google.maps.Point(10,21)
);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: 'I might be here'
});
}
///////////////////////////////////////////////////
$(function() {
initialize();
live();
setInterval( live , 10000);
});
function live() {
var duration = 10000;
$.ajax({
type: "GET",
url: "otravels_ajax/getlivedata.php?vid=<?php echo $imei; ?>",
dataType: 'xml',
async:false,
success: function(xml) {
$(xml).find("marker").each(function(){
var id = $(this).find('id').text(); lid=id; //alert(lid);
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));//console.log(point);
var ts = $(this).find('ts').text();//alert(ts);
var speed = $(this).find('speed').text();
var status = $(this).find('status').text();
if(status=='A') status="<span class='label label-success '>Active</span>"; else status="<span class='label label-important '>InActive</span>";
var loc_addr = $(this).find('loc').text();
var img=$(this).find('img').text();
var image = new google.maps.MarkerImage(
img,
new google.maps.Size(46,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
marker.setIcon(image);
marker.animateTo(point, {easing: 'linear', duration: duration});
if(!map.getBounds().contains(point))
map.panTo(point);
// $('#live_data').html("<tr><td>"+ts+"</td><td>"+speed+"KM/HR</td><td>"+status+"</td><td id=\"loc\">"+loc_addr+"</td></tr>");
$("#d_time").html(ts);
$("#d_speed").html(speed+"KM/HR");
$("#d_status").html(status);
geocoder.geocode({
"latLng":point
}, function (results, status) { // alert("fgb");
if (status == google.maps.GeocoderStatus.OK) {
var placeName = results[1].formatted_address; //alert(placeName);
$("#loc").html(placeName);
}
});
});
}
});
}
</script>
好吧,有一种直接的方法可以实现这一目标。
正如您在问题中提到的那样,您的数据库中某处已经拥有所有这些实时 lat/long
值。
注意:- 在 ArGIS 和 Google 地图中处理 GIS 数据的方法完全不同。为了在地图上显示位置,我们通常使用 ArcGIS JS 中的图形图层(推荐)API.
下面是实现这个的步骤-
- 创建一个
ESRI Map
- 为实时跟踪功能创建并加载
graphics layer
- 从数据库中获取
current/live location
。 - 从数据库中获取实时位置后,清除以前的实时跟踪功能并在新发现的位置添加新功能。
- 在每次刷新间隔后,您必须从地图上清除以前的数据/点并添加新的。
您可以使用 move Edit operation
的功能,使用 ArcGIS/ESRI 工具,但这太复杂了,因此建议删除和添加功能。
希望以上提示对您有所帮助:)
API 文档包含两个跟踪示例。
要跟踪当前位置: https://developers.arcgis.com/javascript/latest/sample-code/widgets-track-basic/index.html
从一组位置模拟跟踪:https://developers.arcgis.com/javascript/latest/sample-code/widgets-track/index.html