如果我使用以下代码从指定的Lat / Lng获取LayerPoint:
var latLng = new L.latLng(-37.81303878836989,144.97421264648438);
var point = map.latLngToLayerPoint(latLng);

输出如下:

o.Point
  x: 86042
  y: 77065

然后当我尝试使用以下URL访问图层图层:

http://a.tile.osm.org/10/86042/77065.png

我得到一个404,因为它是一个无效的X,Y

现在,如果我使用以下代码:

map.on("click",function (e) {
    console.log(e);
});

我可以在控制台中沿纬度和经度检索LayerPoint.

latlng: o.LatLng
  lat: -37.81303878836989
  lng: 144.97421264648438
layerPoint: o.Point
  x: 950
  y: 303

然后访问以下URL将返回此图层:

http://a.tile.osm.org/10/950/303.png

问题在于,它似乎并不是纬度经度的正确拼图,也不是我的原始代码将lat lng转换为LayerPoint实际上返回一个有效的X,Y.

我很困惑,为什么我得到这些结果.任何帮助将不胜感激.也许我在做错事.

我不知道是否有另一种方法根据纬度和经度列表来检索图层图层?

之后我的原因是因为我想要使用缓存的瓦片数据进行脱机应用程序,唯一的数据是通过为客户端应用程序生成的geoJSON有效载荷的几何/坐标.

更新:

结束了这个功能(感谢@scai).

根据this link.

var getSlippyTileLayerPoints = function (lat_deg,lng_deg,zoom) {
    var x = (Math.floor((lng_deg + 180) / 360 * Math.pow(2,zoom)));
    var y = (Math.floor((1 - Math.log(Math.tan(lat_deg * Math.PI / 180) + 1 / Math.cos(lat_deg * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2,zoom)));

    var layerPoint = {
        x: x,y: y
    };

    return layerPoint;
};

OUTPUT:

Object {x: 924,y: 628}

http://a.tile.osm.org/10/924/628.png

更新2:

经过进一步的研究,事实证明,我以后是以下功能:

var layerPoint = map.project(latlng).divideBy(256).floor();
console.log(layerPoint.x,layerPoint.y);

解决方法

经过进一步的研究,我以后是以下功能:
var layerPoint = map.project(latlng).divideBy(256).floor();
console.log(layerPoint.x,layerPoint.y);

javascript – 如何使用Leaflet API从纬度和经度坐标检索LayerPoint(X,Y)的更多相关文章

  1. android – 如何使用反应原生的leaflet.js

    我很难用反应本机设置Leaflet.js.文档告诉我在我的html中添加以下脚本…但我不确定我是如何使用反应做的.现在我的主页面呈现如下……而我的家就像……在哪里/如何添加此脚本标记以包含Leaflet.js?我没有看到react-native和Leaflet.js的任何例子,如果有一个,在github或者什么不是,我很乐意看到它.解决方法有一个项目react-leaflet,你可以使用leaflet.js做出反应.但目前还没有支持在react-native中使用leaflet.js.有关详细信息,请参阅

  2. Webpack的画布渲染性能差异

    我正在运行一个用React&;传单(最新)。后者用于在画布上渲染几千行。渲染的性能通常可以接受。然而,一旦我使用Webpack构建应用程序,渲染时间将增加大约5倍。我目前正在研究Chrome中的探查器,试图了解这是在哪里发生的,结果并不像我希望的那样简单。你会如何处理这个问题,至少排除某些可能性?

  3. 角度 – 使用Ionic2打字稿的传单

    我是带有打字稿的Ionic2和Angular2的新手,我想为iOS和Android构建一个移动应用程序.下一步我想要包含一张地图并找到Leaflet,以便在GoogleMaps和OSM之间轻松改变,……

  4. angularjs – 使用量角器拖放(地图平移)

    id=3604

  5. jquery – 使用自己的按钮隐藏/显示Leaflet中的layerGroups

    我有一张带有几个标记的传单地图.我已将这些标记放在“图层组”中,以便能够显示和隐藏标记类别.这些是我的标记:当我使用图层控件和overlayMaps时,这非常有效:但现在我希望能够使用我自己的“按钮”(图标)来完成这项工作.我的HTML:我想这可能与removeLayer或类似的东西,但我只是不知道如何让它工作.因此,当我点击标题中的图标并且第二次单击时它们消失时,我想要表明我的图层是可见的.非常感谢!

  6. javascript – leaflet js:将POI绘制为画布

    我想用Leaflet绘制许多地理点.因此,我想使用HTML5画布来提高性能.我的数据是geoJSON.正如我在Leaflet的文档中看到的那样,不可能将地理位置绘制为画布.我想我应该联系到这里:pointToLayer:function(latlng){}有人知道如何将我的latlng对象绘制为画布吗?解决方法我是Leaflet的作者.您可以使用L.CircleMarker而不是常规Marker,

  7. javascript – 宣传单:添加指向标记的链接

    非常简单的问题:如何使Leaflet中的地图标记可单击并将用户路由到另一个页面?每个标记都有自己的页面.我试过以下没有成功;不知何故,所有标记都指向同一页面,这是最后分配的URI.这个问题真让我疯了.解决方法好的,我终于找到了解决方案;当标记添加到地图时,会为其分配一个名为“_leaflet_id”的ID.这可以通过目标对象获取,也可以在添加到地图后设置为自定义值.所以最终的解决方案很简单:

  8. 多个赋值var a = b = b || javascript中的{}

    阅读leaflet.js的代码,我遇到了一个我不太了解的方法:可以简化为根据我的理解,这个指令是一个多重的左手赋值,它是右关联的,这意味着首先,JavaScript将运行,然后这对我没有意义.为什么不写:完整背景:我怀疑是一个参考技巧,因为我没有看到这个方法如何修改this._leaflet_events.考虑一下,编写vara=b=b||无论是否定义了b,{}实际上都是为var分配对b的引用的技

  9. javascript – 创建Leaflet自定义复选框控件

    我想创建一个自定义复选框控件,它只需在jquery/javascript中设置一个标志:如果选中flag=’clustered’或者uncheckedflag=’unclustered’.到目前为止,我在地图上有一个控件,但它不是一个复选框,如何获得复选框的状态–如果选中/取消选中.码:解决方法您必须在controlDiv中创建一个输入类型=“复选框”的表单元素.在这个jsfiddlehttp:/

  10. javascript – 如何使用Leaflet API从纬度和经度坐标检索LayerPoint(X,Y)

    如果我使用以下代码从指定的Lat/Lng获取LayerPoint:输出如下:然后当我尝试使用以下URL访问图层图层:http://a.tile.osm.org/10/86042/77065.png我得到一个404,因为它是一个无效的X,Y现在,如果我使用以下代码:我可以在控制台中沿纬度和经度检索LayerPoint.然后访问以下URL将返回此图层:http://a.tile.osm.org/10/

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部