Question

大家好我想在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>

Answer 1

正弦波的例子比必要的更加花哨。

您只需致电

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

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

1 个答案: