Javascript 如何在mapbox上使用自己生成的数据动态绘制多段线_Javascript_Leaflet_Mapbox_Polyline

Javascript 如何在mapbox上使用自己生成的数据动态绘制多段线

javascript leaflet mapbox

Javascript 如何在mapbox上使用自己生成的数据动态绘制多段线,javascript,leaflet,mapbox,polyline,Javascript,Leaflet,Mapbox,Polyline,大家好，我想用我自己生成的数据在mapbox上绘制多段线/路径。我在mapbox.com上找到了一个例子，就是在地图上画正弦波。如何使用自己的数据进行绘图？下面是mapbox.com上的示例，我如何自定义它 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Draw & animate a line on a map</title> <

大家好，我想用我自己生成的数据在mapbox上绘制多段线/路径。我在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>


抽签及；为地图上的线设置动画
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
L.mapbox.accessToken='pk.eyj1ijoiymfhz2lpiwiysi6imnpz295atltdawzjlc20xatk0njmxmhoifq.qwmu19n430krdzvcy5ba'；
var map=L.mapbox.map（'map'，'mapbox.streets'）
.setView（[0,0]，3）；
//向地图添加一条没有点的新线。
var polyline=L.polyline（[]）.addTo（map）；
//记下我们在地图上添加了多少点。
var pointsAdded=0；
//开始绘制多段线。
添加（）；
函数add（）{
//'addLatLng'获取一个新的latLng坐标并将其置于
//您可以选择从数据中提取点或生成点
//我们用一些数学知识做一个正弦波。
polyline.addLatLng(
拉丁(
数学cos（pointsAdded/20）*30，
尖刻的）；
//沿添加线的位置平移地图。
map.setView（[0，pointsAdded]，3）；
//通过调用'add（）继续绘制和平移地图`
//直到'pointsAdded'达到360。
如果（++pointsAdded<360）window.setTimeout（add，100）；
}

正弦波示例比必要的更为奇特

你只需要打个电话

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

画画动画怎么样？我的主要目标是画画动画？同样的事情，但把这整个东西包装在一个动画循环函数中。一般来说，动画是一个巨大的话题。你会发现很多信息，例如Ok！非常感谢你