📅 最后修改于: 2023-12-03 15:16:11.987000 🧑 作者: Mango
有时我们需要在Web应用程序中将数据可视化，其中最常用的方法之一是在地图上显示这些数据。 Javascript提供了一种将数组转换为地理图的简便方法。 在这篇文章中，我们将学习如何通过使用Javascript的leaflet.js库来转换一个数组为地图。
Leaflet.js是一款开源的Javascript库，用于制作交互式地图。 它是基于移动设备友好的WEB的JavaScript库，并且开放于MIT许可证下。
您可以从官方的leafeltjs.com网站下载leaflet.js。您还可以使用下面的CDN将其添加到HTML文件中。
<head>
<script src="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.css" />
</head>
在我们开始之前，我们需要首先在HTML中添加一个< div >标签来存放地图。 通过使用以下代码，我们可以创建一个基本的地图。
<body>
<div id="mapid" style="height: 480px;"></div>
<script>
var mymap = L.map("mapid").setView([51.505, -0.09], 13);
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: "mapbox.streets",
accessToken: "{YOUR_MAPBOX_ACCESS_TOKEN}"
}
).addTo(mymap);
</script>
</body>
一般地图显示所需数据通常是来自于外源数据接口。 但在某些情况下，我们需要在地图上显示我们自己的数据。在这种情况下，我们可以使用以下代码将数组转换为LeafletJS地图。
// 数据数组
var data = [
{location: [31.22, 121.46], name: "Shanghai"},
{location: [40.71, -74.00], name: "New York"}
];
// 将数组转换为地图
data.forEach(function(d) {
L.marker(d.location).addTo(mymap).bindPopup(d.name);
});
我们定义了一个数据数组，并使用forEach方法，从中遍历每个数据项。 对于数组中的每个数据项，我们使用L.marker方法在地图上创建一个标记，并使用地标位置和标记名称。另外，我们还使用**.bindPopup**方法将名称添加到标记。
最后，我们将标记添加到地图上。
整个代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Array to Map</title>
<script src="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.css" />
<style>
#mapid {
height: 100%;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map("mapid").setView([39.91, 116.397], 3);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 18,
}).addTo(mymap);
var data = [
{ location: [31.22, 121.46], name: "Shanghai" },
{ location: [40.71, -74.0], name: "New York" },
];
data.forEach(function(d) {
L.marker(d.location)
.addTo(mymap)
.bindPopup(d.name);
});
</script>
</body>
</html>
通过使用简单的Javascript和LeafletJS库，可以将数组转换为动态和交互式的地图。 这为Web应用程序的数据可视化提供了简便的方法，使得数据可视化变得易于理解和使用。