个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
为了维护我为游戏社区选择的社区项目，我试图了解传单的工作原理。特别是，我正在尝试使用自定义图 block 服务显示非地理 map 。
根据传单文档以及一系列教程和 stackoverflow 答案，我能想到的最好的代码是以下代码。标记被添加到 [0,0] 和 [maxLat, maxLong] 以验证它们是否与 map 对齐(我试图在我的项目中解决的问题是它们不是):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
#map { height: 1080px; width: 1920px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) {
return yx(x[1], x[0]);
}
return yx(y, x);
};
var minZoom = 0;
var maxZoom = 7;
var img = [
18475,
12791
];
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(1 / 128, 0, 1 / 128, 0)
});
var bounds = [xy(0, 0), xy(img)];
var map = L.map("map", {
attributionControl: false,
crs: L.CRS.MySimple,
maxBounds: bounds,
minZoom: minZoom,
maxZoom: maxZoom
});
L.tileLayer('https://d1w6xpzk1h0aj5.cloudfront.net/kuban/{z}/{x}/{y}.png', {
bounds: bounds,
noWrap: true,
minZoom: minZoom,
maxZoom: maxZoom,
tms: true,
continuousWorld: false,
maxNativeZoom: 7
}).addTo(map);
map.fitBounds(bounds);
L.marker(L.latLng([ 0, 0 ])).addTo(map);
L.marker(L.latLng(xy(img))).addTo(map);
</script>
</body>
</html>
如果我在我的浏览器上打开它， map 会在所有缩放级别正确显示(即以正确的顺序提供图 block ，并且传单按预期拼接它们)。问题是 map 在垂直方向上偏离了中心，而标记虽然在水平方向上完全对齐，但在垂直方向上存在偏移。
这正是我在主项目中遇到的问题。
我做错了什么，为什么？
最佳答案
这里的问题是您的光栅图像以奇怪的方式平铺。
我坚信坐标原点是左下角，因为 0,0,0 瓦片是如何与左下角对齐的，在顶部和右侧留下空白:
缩放级别 1 的图 block 也与左下角对齐:
在缩放级别 2，事情变得有趣:
现在，如果坐标的原点在左下角，则图 block 坐标的原点应该在左下角
事实并非如此。如果它是，那么这将是一个 TMS 样式的 tilelayer，其中 tile Y 坐标“向上”，并且 Leaflet 需要具有定义边界的非无限 CRS，如 this question ，东西会起作用，每个人都会很高兴。
因此，换句话说:第 0 个(垂直)像素位于左下角，但第 0 个(垂直)图 block 位于左上角。
这种切片方式的一个值得注意的后果是最左上角的图 block 的左上角坐标随缩放级别而变化。
因此对于缩放级别 0 的图 block ，最上面图 block 的笛卡尔 Y 坐标是 2^15 = 32768，但 z1 是 2^14 = 16384。对于 z2 和 z3，它又是 16384，但对于 z4，它是 7*(2^11) = 14336，对于 z5，它是 13*(2^10) = 13312。在一般情况下，它是图像的高度 (12791) 填充到最接近的缩放级别的更高二次幂加 7(类似于... Math.pow(2,7+z) * Math.ceil( 12791/Math.pow(2,7+z) )，我相信。
处理这个(我能想到的)的最干净的 hack 是类似于 this other answer 的东西，比如
var map = L.map("map", {
crs: L.CRS.Simple,
minZoom: -7,
maxZoom: 2
});
var tiles = L.tileLayer('https://d1w6xpzk1h0aj5.cloudfront.net/kuban/{z}/{x}/{y}.png', {
minZoom: -7,
maxNativeZoom: 0,
zoomOffset: 7
}).addTo(map);
tiles.getTileUrl = function(coords) {
if (coords.z === -7) {coords.y += 1}
if (coords.z === -6) {coords.y += 1}
if (coords.z === -5) {coords.y += 2}
if (coords.z === -4) {coords.y += 4}
if (coords.z === -3) {coords.y += 7}
if (coords.z === -2) {coords.y += 13}
if (coords.z === -1) {coords.y += 25}
if (coords.z === 0) {coords.y += 50}
return L.TileLayer.prototype.getTileUrl.bind(tiles)(coords);
}
我把它放在 working example, over here 中。
我强烈建议您以更明智的方式将图像切成小块。
如果您的坐标系是笛卡尔坐标系，则切片图 block 的 gravity 应该在左下角(即空白区域应该在顶部和右侧)，0-0 图 block 为任何给定的缩放级别都应该包含最底部和最左侧的像素。
同样，如果您的坐标系类似于屏幕(倒 Y 的笛卡尔坐标系，参见 this answer for an explainer )，则切片图 block 的重力应该在左上角(即空白空间应该在底部，右)，并且任何给定缩放级别的 0-0 图 block 应该包含最左上角的像素。
如果瓷砖不以这种方式切片，事情会变得困惑(就像你的情况一样)。
关于javascript - 带有 tilelayer : the map appears to have a vertical offset? 的传单非地理 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69098129/
24
4
0
我有一个带有 LeafletJS 的项目。 例如，我在 map 中有 2 个点 (A, B)。我将其显示为 2 个标记 我必须画一条从 A 到 B 的折线。 我移动了标记 A，我想将标记 A 的折线的
是否可以向自定义图标标记添加文本？我想避免在图像编辑器中编辑图标只是为了添加文本。 我已经像这样创建了我的自定义图标标记: var airfieldIcon = L.icon({ ic
我想要一个 Leaflet 图层控件，选中/取消选中时必须显示/隐藏主图层内的所有子图层。我还想独立检查/取消选中子层。我浏览了 Leaflet 文档和论坛，但找不到任何引用资料。我应该为此编写一个自
如何处理 Leaflet map 库中的重叠线？ 我从服务器 sid 下载 geoJSON 并将其绘制到 map 上。如果有两个相同的条目，Leaflet 会绘制它们两次。这可以通过在服务器端查找完全
我在项目中使用 leafletjs。在 map 上我有几个多边形和标记。当其中一个被点击时，所有这些都有一个点击事件来显示一些信息。如果用户单击 map 的“空白”部分(而不是任何多边形或标记)，我想
我正在尝试对下一个边界的外观做出预测。这是一个plunkr: https://plnkr.co/edit/sk6NRh51WZA2vpWP 这就是我让它工作的方式，但它不是很有效: const ori
我是 Leaflet 的新手，目前我正在努力学习教程。到目前为止，我设法创建了一个交互式 clorophet map ，就像示例中的 http://leafletjs.com/examples/cho
我很难弄清楚为什么我无法在 map 上绘制正确的国家/地区。我已经完成了所有代码，但我仍然不明白为什么不能正常工作。 如果您看到任何问题，请告诉我。我很欣赏。 这是数据集 Country
是否可以在使用 Stamen Toner-lite tiles 的 Leaflet map 上设置中间(2.5、3.5、4.5 等)缩放级别？ ?这是我到目前为止计算缩放级别的代码: leafletm
早上、下午或晚上。 我有以下位置数据(从'Count of sampling points within a grid cell'调整) # Demo data set.seed(123) # lat
大家好，我正在开发一个具有 map 功能的网站。我的目标是，如果您单击标记，则使其拖动。 这是我的代码 else if (select1.value === "Arson"){ var note =
我正在开发一个应用程序，用户可以在其中上传KML文件，并使用Leaflet，toGeoJSON和Angular-Leaflet-Directive在屏幕上呈现路径。 我使用toGeoJSON.kml(
我需要在多边形要素中实现多色填充。填充将根据要素属性进行有条件的格式化。 假设我需要一个具有 3 色图案的多边形，如下所示: let fillPalette = ['orange', 'green',
我从 javascript 开始，并试图解决这个问题。 我希望当用户单击 map 时出现一个表单。当他们填写表单时，我想在该位置创建一个标记，并将该标记的弹出内容设置为表单中的值。添加表单完成后，我还
我已经在地理服务器中发布了一个功能，我可以通过传单及其 basemap 成功访问该功能。现在我需要在弹出窗口中获取feature onclick的属性信息。 我按原样使用了示例( https://gi
我正在使用带有一些标记的传单 map 。我还有一个侧边栏，可以在其中看到标记的名称，如果单击标记的名称， map 将缩放到标记的 lnglat。它已经可以工作，但我的问题是，当我刷新页面并在侧边栏中选
我正在使用 Leaflet 和 Mapbox，我想设置 map 的 View : 所有标记均可见 中心设置为特定点 使用 setView 和 fitbounds 单独完成每个点很容易，但我不知道如何同
是否有所有潜在 map 源的列表？在示例页面上，可以浏览四种类型的 map 。外面还有什么？ http://tombatossals.github.io/angular-leaflet-directi
我正在使用 Leaflet 制作交互式 map 。我在 map 上有标记(基于其经度和纬度坐标)，并且我希望某些标记具有与其他标记不同的颜色。例如，某些坐标我给它的分数是“10”，我希望它是粉红色的，
我可能忽略了如何在 map 上更改 LeftletJS 的光标。 http://leafletjs.com/reference.htm 我尝试设置map_div.style.cursor = 'cro
我是一名优秀的程序员,十分优秀！