javascript - 自定义平铺图像名称的倒置 Y 轴

标签 javascript leaflet

Leaflet 存在一个已知问题,当您使用自定义图 block 提供程序而不是真实地球图像时,设置 crs: L.CRS.Simple,Leaflet 会查询 Y 坐标反转的图像与数学轴相比。因此,右上角第一个图像的位置是 1x-1,而不是 1x1

在互联网上,关于反转 Y 轴的主题相当古老,所以我的问题是:现在是否有一种正常的简短内置方法来反转查询的 Y 轴?

我发现的唯一旧解决方案是重写 Leaflet 内部对象,例如扩展 L.CRS.Simple

最佳答案

Leaflet tutorial for WMS/TMS 中所述,反转图 block 坐标的 Y 坐标的规范方法是在图 block URL 模板中使用 {-y} 而不是 {y}。例如:

var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');

但请注意(从传单 1.3.1 开始)only works for maps with a non-infinite coordinate system .

就您而言,您可能希望通过创建自己的 L.TileLayer 子类来解决此问题。 Leaflet tutorial about extending layers 有完整的指南,但是移动其图 block 坐标的图 block 图层的 TL;DR 版本是:

L.TileLayer.CustomCoords = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.x = tilecoords.x + 4;
        tilecoords.y = tilecoords.y - 8;
        tilecoords.z = tilecoords.z + 1;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.CustomCoords(....);

仅反转 Y 坐标的具体情况是:

L.TileLayer.InvertedY = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.y = -tilecoords.y;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.InvertedY(....);

关于javascript - 自定义平铺图像名称的倒置 Y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50319366/

相关文章:

javascript - meteor 上的传单空白屏幕,但单个非 meteor test.html 上没有

javascript - 使用 JavaScript 获取 URL 的源代码

javascript - 在表中显示本地存储数据

javascript - 如何使用 JavaScript 捕获和格式化表格数据?

javascript - Firebug 调试问题

Leaflet.js : Use ctrl + scroll to zoom the map & Move map with two fingers on mobile

r - 导出带有固定缩放和边界框的传单 map ,无需填充

javascript - 如何隐藏集群中的标记(Mapbox.js/Leaflet Markercluster)?

javascript - 使用 jQuery 即时创建复选框元素 - 奇怪的 IE 行为

javascript - 如何更改传单指令上的默认图标图钉?