load csv into leaflet and convert coordinates with proj4

问题

This question involves the use of:

leaflet.js (used to create my map)
leaflet omnivore plugin (used to load my csv data file)
and proj4 (used to convert easting/northing to lat/lon)

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

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.

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]));

回答1:

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.

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);

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);

Live example: https://plnkr.co/edit/Dj9Mukig8PAHUYinsapJ?p=preview

来源：https://stackoverflow.com/questions/48890144/load-csv-into-leaflet-and-convert-coordinates-with-proj4

标签

javascript

csv

leaflet

proj