在前端中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);

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

相关推荐
JQLvopkk32 分钟前
能用C#开发AI
开发语言·人工智能·c#
键盘鼓手苏苏34 分钟前
Flutter for OpenHarmony:markdown 纯 Dart 解析引擎(将文本转化为结构化 HTML/UI) 深度解析与鸿蒙适配指南
前端·网络·算法·flutter·ui·html·harmonyos
郝学胜-神的一滴2 小时前
当AI遇见架构:Vibe Coding时代的设计模式复兴
开发语言·数据结构·人工智能·算法·设计模式·架构
阿里嘎多学长6 小时前
2026-02-16 GitHub 热点项目精选
开发语言·程序员·github·代码托管
芭拉拉小魔仙7 小时前
企业级Vue项目的状态管理:从原理到实战架构
前端·vue.js·架构
恋猫de小郭7 小时前
丰田正在使用 Flutter 开发游戏引擎 Fluorite
android·前端·flutter
扶苏10027 小时前
Vue 3 响应式原理深度解析
前端·javascript·vue.js
啊吧怪不啊吧7 小时前
C++之基于正倒排索引的Boost搜索引擎项目usuallytool部分代码及详解
开发语言·c++·搜索引擎·项目
NEXT067 小时前
React 性能优化:图片懒加载
前端·react.js·面试
PineappleCoder8 小时前
别让字体拖了后腿:FOIT/FOUT 深度解析与字体加载优化全攻略
前端·性能优化