Leaflet LatLngBounds 与更简单的 CRS &投影 [英] Leaflet LatLngBounds with simpler CRS & projection

查看:9
本文介绍了Leaflet LatLngBounds 与更简单的 CRS &投影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是最新的稳定版本 Leaflet 0.7.7,并且我使用的是继承自 L.CRS.Simple 的自定义 CRS.

I'm using Leaflet 0.7.7, latest stable release, and I'm using a custom CRS inherited from L.CRS.Simple.

CRS:

它与 Simple CRS 非常相似,但 c 设置为 1(在 Simple 中,c 设置为 -1).

It is very similar to Simple CRS but with c set to 1 (in Simple, c is set to -1).

L.CRS.XY = L.Util.extend({}, L.CRS.Simple, {
    code: 'XY',
    projection: L.Projection.LonLat,
    transformation: new L.Transformation(1, 0, 1, 0)
});

这个 CRS 的目标是拥有一个真正的 {x, y} 地图系统,其中 y 在到达地图底部时变得更高(如位图).

The goal of this CRS is to have a real {x, y} map system where y becomes higher when reaching the bottom of the map (like a bitmap).

要测试的代码:

var southWest = L.latLng(133, 0);
var northEast = L.latLng(0, 170);
var bounds = L.latLngBounds(southWest, northEast);

document._map.setMaxBounds(bounds);
document._map.fitBounds(bounds);
document._markers[68].setLatLng(bounds.getNorthEast());

console.info('southWest', southWest);
// L.LatLng {lat: 133, lng: 0}

console.info('northEast', northEast);
// L.LatLng {lat: 0, lng: 170}

console.info('bounds', bounds);
// L.LatLngBounds (
    _northEast: L.LatLng {lat: 133, lng: 170 }
    _southWest: L.LatLng {lat: 0, lng: 0 }
)

实际上,由于我有一个自定义 CRS,我认为 这些行 是问题的根源,因为在平面 {x, y} 系统中最大值和最小值不正确(即使我更喜欢使用点",但我只能使用LatLng"对象:confused:).

Actually, as I have a custom CRS, I think these lines are the source of the problem because maximum and minimum values are not correct in a plane {x, y} system (even if I would prefer to use "Point" but I can only use "LatLng" objects :confused: ).

所以实际上,这个问题似乎很明显来自我的代码,但实际上我想为此找到一个不需要我切换到 L.CRS.Simple 的解决方案 其中 y 坐标在地图顶部变得更高.

So actually, it seems it is obvious that this issue comes from my code, but actually I'd like to find a solution for this that wouldn't need me to switch to L.CRS.Simple in which y coordinates get higher on top of the map.

那么在这个简单的自定义投影中使用边界的解决方案是什么?

So what's the solution to use bounds with this simple custom projection?

推荐答案

听起来 Leaflet 在内部假设 y 点在下降时增加(如图像中),而纬度应该相反(即下降时减少),如 min、max、<= 和 >=比较是硬编码的.

It sounds like Leaflet internally assumes that y points increase when going down (like in images), and it should be the opposite for latitude (i.e. decrease when going down), as the min, max, <= and >= comparisons are hard-coded.

因此,可能不可能组成一个 CRS,它会给你一个与 Y 点方向相同的纬度.除非您准备好修改 Leaflet 库中比较纬度的每个函数……

So there is probably no possibility to make up a CRS that will give you a latitude in the same direction as the Y points. Except if you are ready to modify every function that compares latitudes within Leaflet library…

如果您每次必须提供坐标时都使用中间转换函数,而当您必须读取坐标时则相反,您仍然可以随意操作"数字.

You may still be able to "manipulate" numbers like you wish, if you use an intermediate conversion function every time you have to provide coordinates, and the opposite when you have to read coordinates.

这也让您有机会将纬度 (y) 和经度 (x) 的顺序恢复为 [x, y].

That would also give you the opportunity to revert the latitude (y) and longitude (x) order to be [x, y].

例如:

function revertLat(x, y) {
  return [-y, x];
}

演示:http://jsfiddle.net/ve2huzxw/101/

原答案:

还有什么理由不直接自定义 L.LatLngBounds 以使其符合您的需要?

Any reason for not directly customizing L.LatLngBounds as well, so that it fits your need?

首先,如果您并不完全需要 southWest 和 northEast,而只需要 corners 作为边界,则可以按原样使用 L.LatLngBounds.例如,即使拐角不完全是西南和东北,所有 Leaflet 方法也会继续工作:map.fitBoundsL.imageOverlay 等应该可以正常工作.

First of all, if you do not exactly need southWest and northEast, but just corners for your bounds, you can use L.LatLngBounds as is. For instance, all Leaflet methods would keep working even if the corners are not exactly southWest and northEast: map.fitBounds, L.imageOverlay etc. should work fine.

否则,您将不得不在 L.LatLngBounds 中自定义许多方法(扩展、填充、包含、相交)以恢复最小/最大和 <=/>= 比较.

Otherwise, you would have to customize many methods in L.LatLngBounds (extend, pad, contains, intersects) to revert the min / max and <= / >= comparisons.

这篇关于Leaflet LatLngBounds 与更简单的 CRS &amp;投影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆