如何在mapbox上動態繪製折線與自己生成的數據

嗨，大家好，我想用我自己生成的數據在地圖框上繪製折線/路徑。我在mapbox.com上找到了它在地圖上繪製正弦波的例子。我如何繪製自己的數據？以下是mapbox.com上的示例，我如何定製它？如何在mapbox上動態繪製折線與自己生成的數據

<!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/ –

好的！非常感謝你 –

如何在mapbox上動態繪製折線與自己生成的數據

回答

相關問題