在前端中Proj4.js使用简单介绍

Proj4 是一个用于处理 JavaScript 里的几何图形和坐标计算的库。虽然这个库的知名度不如其他几何处理库如 Turf.js,但它提供了用于多边形、点、线等几何对象的计算功能,类似于 GIS(地理信息系统)的某些功能。

一、基础知识

在使用Proj4之前,可以了解一下投影的相关定义,可以参考下面网站:
https://epsg.io/
http://spatialreference.org

二、Proj4js引用

前端添加Proj4js有三种方式:

1、从http://trac.osgeo.org/proj4js/wiki/Download下载,获取产品包中dist/proj4.js文件。

2、引入CDN上的Proj4js:https://cdnjs.com/libraries/proj4js

3、本地有Node.js,可以直接使用npm install proj4进行安装。

三、Proj4的简单使用

proj4.js中预定义了三个坐标系,其他的坐标系则需要自己定义了,下面以从WGS84(4326)到Web墨卡托(3857)的转换为例

复制代码
    const wgs84 = 'EPSG:4326';
    const webMercator = 'EPSG:3857';
    const pointWGS84 = [12.4924, 41.8902];  
    const pointWebMercator = proj4(wgs84, webMercator, pointWGS84);
    console.log(pointWebMercator);

更多的使用情况,带挖掘!!!

相关推荐
猩猩程序员8 小时前
Vercel 推出 Agent 框架 Eve:让 AI Agent 像写 Web 应用一样简单
前端
小林ixn8 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
爱读源码的大都督8 小时前
Claude Code源码分析(三):为什么系统提示词中需要有tools呢?
前端·人工智能·后端
爱勇宝8 小时前
Claude Code 被曝暗藏“隐形检测”代码:封代理不是最可怕的,可怕的是你根本不知道它在干什么
前端·后端·程序员
小牛不牛的程序员8 小时前
我用 Claude Code 半天撸完了一个完整网站,AI 编程到底提升了多少效率?
前端
东风破_8 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦9 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript
ITOM运维行者9 小时前
从零搭建企业级服务器监控体系:踩坑实录与架构设计
前端·后端
monologues9 小时前
深入 Vue 3 源码:响应式系统的精妙设计与编译优化
前端
hunterandroid9 小时前
Paging 3 分页:从手动分页到声明式加载
前端