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

Привет, ребята, я хочу рисовать полилинию/путь на карточке с моими собственными сгенерированными данными. И я нашел пример на 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>

источник

2015-12-02 Neo Teo

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

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

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

источник

2015-12-02 07:55:54

Как насчет одушевленного с нанесением моей главной целью является живой для рисования? –

То же самое, но оберните все это в функцию цикла анимации. Анимация вообще - огромная тема. Вы найдете много информации, например. http://creativejs.com/resources/requestanimationframe/ –

Хорошо! большое спасибо –

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

ответ

Смежные вопросы