как динамически рисовать ломаную линию с собственными сгенерированными данными на карте

Привет, ребята, я хочу нарисовать полилинию/путь на карте с моими собственными сгенерированными данными. И я нашел пример на mapbox.com, он рисует синусоиду на карте. Как я могу рисовать своими данными? Вот пример на mapbox.com, как его настроить?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw &amp; animate a line on a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYmFhZ2lpIiwiYSI6ImNpZ295aTltdTAwZjl1c20xaTk0NjMxMHoifQ.qWMU19n430KrdzVcyky5bA';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([0, 0], 3);

// Add a new line to the map with no points.
var polyline = L.polyline([]).addTo(map);

// Keep a tally of how many points we've added to the map.
var pointsAdded = 0;

// Start drawing the polyline.
add();

function add() {

    // `addLatLng` takes a new latLng coordinate and puts it at the end of the
    // line. You optionally pull points from your data or generate them. Here
    // we make a sine wave with some math.
    polyline.addLatLng(
        L.latLng(
            Math.cos(pointsAdded / 20) * 30,
            pointsAdded));

    // Pan the map along with where the line is being added.
    map.setView([0, pointsAdded], 3);

    // Continue to draw and pan the map by calling `add()`
    // until `pointsAdded` reaches 360.
    if (++pointsAdded < 360) window.setTimeout(add, 100);
}
</script>


</body>
</html>

javascript leaflet mapbox polyline
person Neo Teo    schedule 02.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пример с синусоидой более причудлив, чем необходимо.

Вам просто нужно позвонить

polyline.addLatLng(L.latLng(lat,lng));

много раз. Переменные lat и lng будут определять вашу полилинию.

Пример:

// a rough square around Versailles
polyline.addLatLng(L.latLng(48.831081,2.0770324));
polyline.addLatLng(L.latLng(48.8255436,2.125355));
polyline.addLatLng(L.latLng(48.7967555,2.1177344));
polyline.addLatLng(L.latLng(48.7948532,2.0553037));
person Jeff Meatball Yang    schedule 02.12.2015
comment
Как насчет анимации с рисованием? Моя главная цель — анимация для рисования? - person Neo Teo; 02.12.2015
comment
То же самое, но оберните все это в функцию цикла анимации. Анимация вообще огромная тема. Вы найдете много информации, например. creativejs.com/resources/requestanimationframe - person Jeff Meatball Yang; 02.12.2015
comment
Ok! Большое спасибо - person Neo Teo; 02.12.2015