嘿，
今天，我决定做一个更高级的Leaflet turorial：
我们将使用csv格式的数据通过R生成geojson文件，最后使用Leaflet创建网络地图。
如果您不想使用R，只需跳过第一部分，然后直接跳到Leaflet部分。您可以在下面下载生成的geoJson文件。
首先让我们获取数据：
下载：
我们将使用ACLED数据，它代表：
ACLED（武装冲突定位和事件数据项目）旨在进行分类的冲突分析和危机映射。该数据集对50多个发展中国家中所有报告的政治暴力事件的日期和位置进行了编码。 (http://www.acleddata.com)
要下载与本教程中使用的数据集相同的数据集，请转到网页并下载 实时数据（2015） 作为.csv。
当您在Excel中打开数据时，它的数据集比较混乱，因此，我们将在R中构建geojson文件：
使用R将CSV转换为geoJson：
这实际上很简单，只需几行代码即可完成。您需要的是rgdal软件包，一些小的数据转换和功能 SpatialPointsDataFrame（） 和 writeOGR（） .
#get 格达尔 package
install.packages(" 格达尔 ")
library(rgdal)
#read .csv file
conflicts <- read.csv("ACLED All Africa File_20150101 to 20150207.csv")
#first convert the LAT/LONG COL to character 和 then to numeric
conflicts$LATITUDE <- as.character(conflicts$LATITUDE)
conflicts$LONGITUDE <- as.character(conflicts$LONGITUDE)
conflicts$LATITUDE <- as.numeric(conflicts$LATITUDE)
conflicts$LONGITUDE <- as.numeric(conflicts$LONGITUDE)
#delete NA values
conflicts <- na.omit(conflicts)
#create a geoJson
conflicts <- SpatialPointsDataFrame(conflicts[,c(20,19)],conflicts[,-c(20,19)])
writeOGR(conflicts, 'conflicts.geojson','conflicts', driver='GeoJSON')
开始映射：
准备传单文件：
创建geoJson文件后，将其打开并在第一行中编写以下JavaScript代码：
var conflicts =
然后放置一个 分号 在geoJson文件的最后！
该文件现在应如下所示：
您可以下载最终的geoJson文件 这里。
在以下位置包含库/扩展名和geoJsonfile<head>:
现在，在网络编辑器中打开一个新的html文件，然后编辑<head> as following:
<head> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src="leaflet-providers.js"></script> <script src="conflicts.geojson"></script> </head>
第一行包括您的网页中的传单库，第二行包括您可以下载的Leaflet-Providers扩展 这里。 您还可以从以下网站获取有关Leaflet-Provides Extension的更多信息 上一教程.
第三行代码包含我们刚刚在您的网页中创建的geojson文件。
创建地图：
首先是一些HTML和CSS：<body>标签创建一个空的<div>地图的容器：
<div id="map"></div>
<style>
#map { height: 500px; }
</style>
最后的传单：
这是我使用的最终JavaScript代码：
<script>
//Set the view coordinates of the map 和 the zoom:
var map = L.map('map').setView([40.18, 18.37], 2);
//Use "CartoDB.DarkMatter" as TileLayer provider
L.tileLayer.provider('CartoDB.DarkMatter').addTo(map);
//add the geoJson File to the map 和 style it:
geojson = L.geoJson(conflicts, {
//this makes circles out of the standard leaflet marker pins
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 5,
fillColor: "red",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.4
});
},
//bind a Pop-Up Window on each Circle to display some information from the geoJson File
onEachFeature: function (feature, layer) {
layer.bindPopup("<b>Event Type: </b>" + feature.properties.EVENT_TYPE + "<br>" +
"<b>Country: </b>" + feature.properties.COUNTRY + "<br>" +
"<b>Location: </b>" + feature.properties.LOCATION + "<br>" +
"<b>Details: </b>" + feature.properties.NOTES);
}}
).addTo(map);
</script>
您可以在线查看最终结果 这里 .
我希望该示例向您展示了对数据进行分级，使用R将其转换为可读格式并使用它来创建精美的传单地图的过程是多么快速和简单。
如果您对代码有任何疑问，请在注释中给我一行。
干杯
马丁
1条评论
您可以在这篇文章中发表评论。
嗨，您能为我提供使用Leaflet映射非洲冲突的示例代码吗？谢谢
问候
罗伊
罗伊 5年前
发表回复