XingYun blog
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具

XingYun

冲!
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具
  • leaflet改变坐标原点
  • 补间动画gsap与tween
  • 文字转语音mp3文件
  • JavaScript引入
  • JavaScript高级程序设计阅读笔记
  • Javascript函数参数按值传递传递
  • JS防抖和节流
  • 手写JS常用方法
  • 手写Promise
  • JS Event Loop
  • 重排和重绘
  • em、px、rem、vh、vw 区别
  • css也需要性能优化
  • 图解 js 原型链
  • js函数参数按值传递
  • BOM浏览器对象模型
  • DOM
  • 事件
  • js对象数组sort按需排序
  • 文件上传功能技术选型和前后端实现
  • 前端图片处理
  • 让你的JavaScript代码简单又高效
  • BEM:class命名规范
  • 前端规范-CSS属性那么多(杂),怎么排序
  • TypeScript Tips
  • jsx
  • canvas基础
  • 前端日志
  • 浏览器存储
  • CSS世界阅读笔记
  • CSS揭秘阅读笔记
  • js变量命名常用规范词
  • 你不知道的JavaScript阅读笔记
  • js对象的底层数据结构
  • js判断数据类型
  • JS浮点数精度问题和解决办法
  • js作用域
  • js堆栈溢出和内存泄漏
  • 浏览器是如何渲染页面的
  • 疑难杂症和踩坑问题合集
  • 免费在线API收集
  • 原生JS实现Ajax请求
  • cookie、session、localStorage、sessionStorage的区别
  • Sass与Less
  • arrayBuffer、blob、file对象
  • TypeScript基础
  • 前端
XingYun
2021-11-12

leaflet改变坐标原点

先观察一下leaflet的默认原点位置,地图初始化后 添加地图点击事件, 观察坐标原点位置

this.map.on('click', workingLayer => {
	let cordinate = workingLayer.latlng
	this.testCor = cordinate
	console.log('cordinate', cordinate)
})
1
2
3
4
5

在地图L.CRS.Simple简单模式下 坐标的原点(0 , 0) 在左下角
在这里插入图片描述

由于业务需求, 需要将坐标原点更改为左上角, 查阅资料和源码 (opens new window)找到方法

L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0)
1

添加本行代码后 改坐标原点变成了左上角
在这里插入图片描述
完整初始化代码

L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0)

const map = L.map('map', { // map可以是string类型的dom id  也可以是HTMLElement
    crs: L.CRS.Simple, // 设置地图坐标模式为简单模式
    center: [0, 0], // 地图中心
    zoom: 0, // 缩放比例
    maxZoom: 0, // 最大缩放比例
    minZoom: 0, // 最小缩放比例
    zoomSnap: 0.5, // 设置每次触发缩放的最小单位 eq: 0.5表示每次缩放为-0.5 0 0.5 1 ...
    zoomDelta: 0.4, // 设置每次出发缩放的缩放值 eg:当它设置为0.4,zoomSnap为0.5 触发缩放时会以0.5来缩放
    zoomControl: false, // 禁用 + - 缩放按钮
    doubleClickZoom: false, // 禁用双击放大
    attributionControl: false, // 移除右下角leaflet标识
    dragging: false, // 禁用拖动
    maxBounds: [[0, 0], [600, 480]] // 设置最大边界 第一个子数组为原点 第二个为原点的对角线坐标
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# PS 希望了解原理的小伙伴可以看看

在 L.CRS.Simple模式下, leaflet与笛卡尔坐标系中的坐标向上向右保持一致,所以原点定在了左下。

同时原点(0,0)并不代表这个是地图的某个角,因为在leaflet中垂直和水平方向都是无限延续的,可以理解为你根据业务需求,在无限的地图上,选了一个点为原点,这个点可以是某个图片的角落(如上动图),一个圆柱的底面圆心等

# Transformation

官网描述 (opens new window):
Represents an affine transformation: a set of coefficients a, b, c, d for transforming a point of a form (x, y) into (ax + b, cy + d) and doing the reverse. Used by Leaflet in its projections code.

译:一个仿射变换:一组系数a, b, c, d,用于将一个形式为(x, y)的点变换为**(ax + b, cy + d)并做相反的变换**。由leaflet在其投影代码中使用。

var transformation = L.transformation(2, 5, -1, 10),
p = L.point(1, 2),
p2 = transformation.transform(p), //  L.point(7, 8)
p3 = transformation.untransform(p2); //  L.point(1, 2)
1
2
3
4

这里可以得出a值控制x轴方向, b控制x轴补偿值,同理c控制y轴方向,d控制y轴补偿值

L.Transformation(a, b, c, d)对应的映射为

a  0  b
0  c  d
0  0  1
1
2
3

根据L.CRS.Simple源码 (opens new window) 找到默认值,

transformation: toTransformation(1, 0, -1, 0)
1

对应的映射

1  0  0
0 -1  0
0  0  1
1
2
3

PS:仿射变换转换x轴与y轴方法
在这里插入图片描述
所以根据业务需求,修改对应的ac值即可

L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0) // y轴倒置
L.CRS.Simple.transformation = new L.Transformation(-1, 0, -1, 0) // x轴倒置
L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0) // xy倒置
1
2
3
#leaflet
上次更新: 2023/04/05, 09:41:10
补间动画gsap与tween

补间动画gsap与tween→

最近更新
01
JavaScript-test
07-20
02
二维码的原理
07-20
03
利用ChatGPT优化代码
07-20
更多文章>
Theme by Vdoing | Copyright © 2021-2023 XingYun | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式