创建适当的导航路径

时间:2016-09-15 08:24:08

标签: javascript php mysql google-maps-api-3

我必须为船只创建导航路径。所有的船都到达中心点并停在那里一段时间。 船舶坐标和中心点(MotherShip)来自数据库。

选择数据的代码。中心点是静态的。

<?php
    $sqlqry = "SELECT * FROM ship WHERE id=" . $id . " AND start_date BETWEEN '" . $s_date . "' AND '" . $e_date . "'";
    $result = mysqli_query($bd, $sqlqry);
    $locations = array();
    $counter=0;
    while($row = mysqli_fetch_array($result)) {
        array_push($locations, $row);
    }
    $nrows = mysqli_num_rows($result);
?>

问题是有些船只从水中心点开始。他们应该在陆地上开始和结束。

Like here you can see one ship at the start of red line(land) and one at the start of green line (in water where center point is).

这是我用于初始化部分的谷歌地图JavaScript部分。

var nrows = <?php echo json_encode($nrows,JSON_NUMERIC_CHECK);?>;
    var locMatrix = <?php echo json_encode($locations,JSON_NUMERIC_CHECK);?>;
    var m_ship_rows = <?php echo json_encode($m_ship_rows,JSON_NUMERIC_CHECK);?>;
    var m_ship = <?php echo json_encode($m_ship,JSON_NUMERIC_CHECK);?>;

      var line;
      var line1;
      var lineArray = [];
      var lineArray1 = [];
      var DrivePath = [];
      // This example adds an animated symbol to a polyline.

      function initMap() {

        var intervalForAnimation;
        var count = 0;
        var n = 2;
        for(var i=0;i<=nrows-1;i++)
        {
        console.log(DrivePath[i]);
        DrivePath.push(new google.maps.LatLng(locMatrix[i][1], locMatrix[i][2]),
                  new google.maps.LatLng(17.8674, 66.543),
                  new google.maps.LatLng(locMatrix[i][3], locMatrix[i][4]));
      }
        var Colors = [
        "#FF0000", 
        "#00FF00", 
        "#0000FF", 
        "#FFFFFF", 
        "#000000", 
        "#FFFF00", 
        "#00FFFF", 
        "#FF00FF"
        ];

整个代码位于JSFiddle

您也可以访问我的github repo获取整个代码。

http://github.com/Tejas-Nanaware/ship-scheduling-and-animation-tool

2 个答案:

答案 0 :(得分:3)

我找到了一个不同的解决方案,这部分帮助了我。

// Create the polyline and add the symbol to it via the 'icons' property.
        for(var i=0; i <=nrows; i++)
        {
          var line = new google.maps.Polyline({
            path: [{lat: locMatrix[i][1], lng: locMatrix[i][2]},
            {lat: 17.8674, lng: 66.543},
            {lat: locMatrix[i][3], lng: locMatrix[i][4]}],
            icons: [{
              icon: lineSymbol,
              offset: '100%'
          }],
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          map: map
      });
          animateCircle(line);
      }

animateCircle()函数:

function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
            count = (count+0.5) % 200;
            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
        }, 20);
      }

答案 1 :(得分:0)

我认为问题来自于你有一个左开闭日期的开始日期。肯定有船只在开始日期之后从母船开始他们的旅程,但事实上,他们从陆地开始的真正开始日早于您参数化的开始日期。因此,您需要决定如何处理已经在开始日期旅行的船只,但是在该日期和此时刻之间它们也在母船上。如果您不想显示其路径,则需要将其排除。如果要为这些船只收集早期事件,则需要为这些特定船舶运行另一个选择以收集早期数据。在任何情况下,您都需要一个能够获得船舶起点的功能,并确定它是母舰还是旱地。