将csv加载到传单中，并使用proj4转换坐标 [英] load csv into leaflet and convert coordinates with proj4

问题描述

此问题涉及以下内容的使用:

This question involves the use of:

• leaflet.js(用于创建我的地图)
• 传单omnivore插件(用于加载我的csv数据文件)
• 和proj4(用于将东/北转换为纬/经)

我下面的代码加载带有传单的雄蕊图，然后使用omnivore加载我的csv文件.

My code below loads a stamen map with leaflet, and then uses omnivore to load my csv file.

为了在我的地图上显示csv地理数据，我需要先将东/北坐标转换为纬度/经度.下一部分代码包含执行此操作的逻辑，并且该代码对于底部console.log中的单个坐标示例成功运行.

In order to display the csv geo data on my map i need to first convert the easting/northing coordinates to lat/lon. The next sections of code contain the logic to do this, and it works successfully for the single coordinate sample within the console.log at the bottom.

但是我不知道如何在完整的csv文件中使用此逻辑.文件中有一列用于东移，一列用于北移-最终，我希望我的代码将所有这些都转换为纬度，并将其绘制为我的地图上的点.

But I have no idea how to use this logic on my full csv file. There is one column for easting, one for northing in the file - ultimately i want to my code to convert all these to lat lon, and plot them as points on my map.

var map = L.map('map').setView([51.44, -1.01], 8);

L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.{ext}', 
{
    subdomains: 'abcd',
    minZoom: 8,
    maxZoom: 20,
    ext: 'png'
}).addTo(map);

var dataset = omnivore.csv('assets_cwy_new simple.csv');

var osgb = '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs ';
var wgs84 = '+proj=longlat +datum=WGS84 +no_defs ';

console.log(proj4(osgb,wgs84,[514545.49,215008.4]));

推荐答案

您发现，可以使用 Proj4Leaflet 插件，其中带有 Proj4js ，可将您的东/北坐标转换为WGS84 lng/lat.不要忘记将Leaflet的坐标恢复为lat/lng.

As you figured out, you can use Proj4Leaflet plugin with Proj4js to convert your easting/northing coordinates into WGS84 lng/lat. Do not forget to revert the coordinates into lat/lng for Leaflet.

现在让传单-杂食使用CSV文件中的正确列，您已经使用 parser_options (呼叫omnivore.csv的第二个参数)，实际传递给基础库 csv2geojson .这些选项可让您指定CSV文件的纬度和经度字段.目前，您只有东/北，但稍后我们可以将其转换:

Now to have leaflet-omnivore use the correct columns from your CSV file, you have to use the parser_options (2nd parameter of your call to omnivore.csv), which are actually passed to the underlying library csv2geojson. These options let you specify the latitude and longitude fields of your CSV file. For now you have only easting/northing, but we can convert them later on:

var csv2geojsonOptions = {
  latfield: 'northing',
  lonfield: 'easting',
  delimiter: ','
}

omnivore.csv('./assets_cwy_new_simple.csv', csv2geojsonOptions);

接下来，您需要使用proj4leaflet将东/北坐标转换为WGS84 lng/lat坐标.要让omnivore在您的每一行上执行此转换，您必须使用 customLayer (呼叫omnivore.csv的第三个参数).实际上，它只是一个预先配置的 Leaflet GeoJSON图层组.与该组一起，您可以使用其 coordsToLatLng 选项来通过proj4leaflet实现转换:

Next, you need to convert your easting/northing coordinates into WGS84 lng/lat coordinates, using proj4leaflet. To have omnivore perform this conversion on each of your lines, you have to use the customLayer (3rd parameter of your call to omnivore.csv). It is actually just a preconfigured Leaflet GeoJSON Layer Group. With this group, you can use its coordsToLatLng option to implement your conversion with proj4leaflet:

var customLayer = L.geoJSON(null, {
  coordsToLatLng: projCoordsToLatLng
});

function projCoordsToLatLng(coords) {
  return lngLatToLatLng(proj4(osgb, wgs84, coords));
}

function lngLatToLatLng(lngLat) {
  return [lngLat[1], lngLat[0]];
}

omnivore.csv('./assets_cwy_new_simple.csv', csv2geojsonOptions, customLayer);

实时示例: https://plnkr.co/edit/Dj9Mukig8PAHUYinsapJ?p=preview

这篇关于将csv加载到传单中，并使用proj4转换坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！