Создайте правильный путь для навигации

Question

Мне нужно создать навигационный путь для кораблей. Все корабли приходят в центр и останавливаются там некоторое время. Координаты кораблей и центра (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).

Вот мой Google Maps 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

Answer 1

Ну, я нашел другое решение, которое отчасти помогло мне.

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

Answer 2

Я полагаю, что проблема исходит из того, что у вас есть левый замкнутый интервал для даты начала. Есть, конечно, корабли, которые начали свое путешествие с материнского корабля после даты начала, но на самом деле их реальный день начала с земли раньше, чем ваша параметризованная дата начала. Итак, вам нужно решить, что делать с кораблями, которые уже были в пути в дату начала, но между этой датой и этим моментом они тоже были на материнском корабле. Если вы не хотите показывать свой путь, то вам нужно их исключить. Если вы хотите собрать более ранние события для этих кораблей, вам нужно будет запустить другой выбор для этих конкретных кораблей для сбора более ранних данных. В любом случае вам понадобится функция, которая получит начальную точку судна и определит, является ли это материнским судном или сушей.