Question

我只是在学习javascript，传单和HTML。我正在尝试根据CSV文件中的坐标在Leaflet地图上添加一行。我认为这将是非常容易的，但几个小时后我没有运气，并没有在网上找到任何有用的例子。这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Loading a line from CSV</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
<script src='D:/java/map_sample/js/papaparse.js'></script>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZWRhaWxleSIsImEiOiJjajJxZG56bXcwMnl6Mndxd2p6bnR6ajJ2In0.es2KsQs3aX_f9hUuQlPmyg';
var map = L.mapbox.map('map', 'mapbox.streets').setView([34.01, -120.27], 12);

var geoj = csv2geojson.toLine('https://raw.githubusercontent.com/evantdailey/map_testing/master/site1.csv', {
    latfield: 'Latitude',
    lonfield: 'Longitude'
});

L.geoJSON(geoj).addTo(map);

</script>

当我运行时，我收到以下错误：

csv2geojson.js:192 Uncaught TypeError: Cannot read property 'length' of undefined
at Object.toLine (csv2geojson.js:192)
at leaflet_geoJSONLayer2.html:24

谁能告诉我我做错了什么，还是指出了我正确的方向？ CSV文件应该可以在github上访问

Answer 1

库没有为您发出AJAX请求，因此您尝试解析文字字符串https://raw.githubusercontent.com/evantdailey/map_testing/master/site1.csv。

您还试图在请求GeoJSON对象时使用CSV字符串作为参数调用toLine。

以下是一个非常基本的示例用法：

var geoj = csv2geojson.csv2geojson(`lat,lon,name
41.8781,-87.6298,3`, {
    latfield: 'lat',
    lonfield: 'lon'
}, function(err, data) {
  console.log(data);
});

从CSV的线图层的传单地图

1 个答案: