在前端开发中,使用地图相关的库或者数据时,经常会遇到需要进行地图投影转换的情况。而在 JavaScript 中,相对完整和好用的投影转换库就是 reproject。本文将介绍如何使用 reproject 进行地图投影转换。
reproject 的安装
reproject 是一个非常常用的 npm 包。在使用之前,需要安装它:
npm install reproject
安装完成之后,在需要的地方引入它:
const reproject = require('reproject');
reproject 的使用
reproject 提供了很多不同的投影方式,比如经纬度坐标、UTM 坐标、web 墨卡托坐标等。它可以将一个投影方式的坐标系下的坐标转换到另一种投影方式的坐标系下。
reproject.forward(source, dest, coordinates)
将一个坐标从 source 投影方式下的坐标系转换到 dest 投影方式下的坐标系下。
const coord1 = [120.003995, 31.315917]; //经纬度坐标:[经度,纬度] const EPSG4610 = '+proj=longlat +ellps=GRS80 +no_defs'; const EPSG3857 = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs'; const coord2 = reproject.forward(EPSG4610, EPSG3857, coord1); //coord2 数组:[x, y] console.log(coord2); // [13324425.437331754, 3684481.9978596766]
reproject.inverse(source, dest, coordinates)
将一个坐标从 dest 投影方式下的坐标系转换到 source 投影方式下的坐标系下。
const coord1 = [13324425.44, 3684481.99]; //web 墨卡托坐标 const EPSG3857 = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs'; const EPSG4610 = '+proj=longlat +ellps=GRS80 +no_defs'; const coord2 = reproject.inverse(EPSG3857, EPSG4610, coord1); //coord2 数组:[经度,纬度] console.log(coord2); // [120.00399500846572, 31.315917001607778]
reproject.register(source, dest, proj4_def)
使用 reproject 进行投影转换需要提供坐标系的定义,proj4_def 是一个字符串,用来包含坐标系定义的全部信息。如果你需要使用 reproject 不支持的坐标系,需要通过 reproject.register 自行添加坐标系的定义。这个方法会在全局上添加一个坐标系的定义,用于后续的投影转换。
const EPSG4662 = '+proj=tmerc +lat_0=0 +lon_0=117 +k_0=1 +x_0=500000 +y_0=0 +ellps=WGS84 +units=m +no_defs'; const EPSG4610 = '+proj=longlat +ellps=GRS80 +no_defs'; reproject.register(EPSG4662, EPSG4610, '+proj=pipeline +step +proj=utm +zone=51 +ellps=WGS84');
添加之后就可以使用这个坐标系进行投影转换了。
const coord1 = [473708.4718, 1483180.6312]; //UTM坐标:[x, y] const coord2 = reproject.forward(EPSG4662, EPSG4610, coord1); //coord2 数组:[经度,纬度] console.log(coord2); // [117.22722640019626, 31.38889479124083]
总结
上面介绍了 reproject 包的基本用法和常见的投影转换操作。通过 reproject 可以方便地将一个坐标从一个投影方式下的坐标系转换到另一种投影方式下的坐标系。了解 reproject 的使用,不仅有助于开发地图相关应用,也是提升前端开发技能的一种方式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb49fb5cbfe1ea061130e