何时使用 L.TileLayer 与 L.tileLayer

2023-11-30

我刚刚使用 Leaflet 为网站构建地图,并注意到要添加平铺层至少可以使用两种方法,L.TileLayer() and L.tileLayer(),其名称仅因单个字符的大小写而异。

然而,虽然这两种方法返回的对象都可以添加到由L.map()返回的对象L.TileLayer()似乎没有addTo()方法,而返回的对象L.tileLayer()。例如。两个都

var map = L.map('map');
var tiles = new L.TileLayer(<tileUrl>, {attribution: <tileAttrib>});
map.addLayer(tiles);

and

var map = L.map('map');
var tiles = new L.tileLayer(<tileUrl>, {attribution: <tileAttrib>});
map.addLayer(tiles);

var map = L.map('map');
L.tileLayer(<tileUrl>, {attribution: <tileAttrib>}).addTo(map);

whilst

var map = L.map('map');
L.TileLayer(<tileUrl>, {attribution: <tileAttrib>}).addTo(map);

失败了。浏览Leaflet的文档似乎正确的使用方法是L.tileLayer()那么问题是有什么用L.TileLayer()?

这是到目前为止我的代码的完整示例,要尝试不同的替代方案,只需取消注释要测试的代码并确保其他替代方案得到注释

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
        
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
            integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
            crossorigin=""/>
      <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
            crossorigin=""> </script>
   </head>
   <body onload="makeMap()">
      <script type="text/javascript">
         function makeMap() {
            var tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var tileAttrib = 'Map data &copy <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'; 
            var map = L.map('map').setView([63,15],9);
            
            // using tileLayer and addLayer - this works
            var tiles = new L.tileLayer(tileUrl, {attribution: tileAttrib});
            map.addLayer(tiles);
            
            // using tileLayer and addTo - this works
//             L.tileLayer(tileUrl, {attribution: tileAttrib}).addTo(map);
            
            // using TileLayer and addLayer - this works
//             var tiles = new L.TileLayer(tileUrl, {attribution: tileAttrib});
//             map.addLayer(tiles);
            
            // using TileLayer and addTo - this fails
//             L.TileLayer(tileUrl, {attribution: tileAttrib}).addTo(map);
         }
         
      </script>
      <table border=1 style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;">
         <tr style="height: 100%;">
            <td>
               <div id="map" style="width: 100%; height: 100%;"></div>
            </td>
         </tr>
      </table>
   </body>
</html>

TL;DR:

这两个都是有效且等效的:

var foo = L.tileLayer(arguments);
var foo = new L.TileLayer(arguments);

这两个在语法上是有效的(因为 Javascript 的历史包袱),但最终会导致错误:

var foo = new L.tileLayer(arguments);
var foo = L.TileLayer(arguments);

要添加瓦片层至少可以使用两种方法,L.TileLayer() and L.tileLayer()

好吧,他们并不是真正的两个methods。从技术上来说L.TileLayer是一个实例Object, and L.tileLayer是一个实例Function,它继承了原型Object. And L充当命名空间而不是类实例。

你看,Javascript 中的面向对象编程是weird。您可以使用new keyword几乎任何有原型的对象。和基于原型的继承对于大多数精通“正确”OOP 的人来说,理解起来很混乱。

如今,随着 ES2015 标准和花哨的class关键字这并不是真正的问题(我想说这是一个问题,但隐藏在语法糖层之下)。但在过去,开发人员不得不求助于,比方说,类继承的创造性解决方案有时涉及打乱原型链.

Leaflet 使用了这些方法的组合 - 和作为不良副作用, L.TileLayer成为一个Function并且可以打电话L.TileLayer()直接,这很令人困惑。

传单还使用了以下概念:工厂功能:返回类实例的函数。引用自传单教程之一:

大多数Leaflet类都有相应的工厂功能。工厂函数与类具有相同的名称,但在lowerCamelCase代替UpperCamelCase:

function myBoxClass(name, options) {
    return new MyBoxClass(name, options);
}

这只是为了方便:它使用户无需键入new关键词回到了一个时代new关键字是feared.

但这创造了另一个不良副作用,因为在 Javascript 中所有Function有一个原型,这意味着你可以做类似的事情

 function myFunction() { ... }
 var wtf = new myFunction();

所以,new L.tileLayer()也是有效的语法(但在运行时失败)。


那么有什么用L.TileLayer()?

再次,L.TileLayer()作为函数调用是一个不希望的副作用。但L.TileLayer代表一个类,对其进行引用很重要,因为:

 if (layer instanceof L.TileLayer)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

何时使用 L.TileLayer 与 L.tileLayer 的相关文章

  • dojo dijit.form.DateTextBox 约束不起作用,datetextbox

    嗨 我是 javascript 和 dojo 的新手 我正在尝试使用两个带有下拉日历的 dijit DateTextBox 来建立数据库查询的日期范围 一旦选择了开始日期或结束日期 我想限制可用的日期 以便不可能选择按时间顺序排列在开始日期
  • 使用 vscode 调试器调试 next.js

    我已经使用安装了一个项目创建下一个应用程序 https github com segmentio create next app 我需要使用我的编辑器 vscode 调试服务器端渲染 所以我访问过vscode recipes 如何调试 ne
  • 关闭选项卡时要求确认[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 当我在某些浏览器上关闭页面时 我希望出现一个消息框 并询问我是否真的要关闭页面 有两个按钮 如果我单击No那么这个标签就不会被关闭 我怎样
  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐

  • MacPorts 如何安装软件包?如何激活通过 MacPorts 完成的 Ruby 安装?

    尝试使用以下命令行在我的计算机 PPC Mac OSX 10 5 7 上安装 ruby 19 后 sudo port install ruby19 ruby的版本没有改变 ruby v gt ruby 1 8 6 2008 08 11 pa
  • 如何为 Swift 设置单元测试?

    我认为尝试掌握单元测试 Swift 是谨慎的做法 我查看了 WWDC 的 Objective C 版本 对 Objective C 范式非常了解 导入单元测试所依赖的头文件等 fetchFlickrPhotoWithSearch 对于单元测
  • uWSGI用于上传和处理文件

    我有一个用 Bottlepy 编写的 Python Web 应用程序 它的唯一目的是允许人们上传将要处理的大文件 大约需要 10 15 分钟来处理 上传代码相当简单 route upload method POST def upload f
  • 函数的 Javascript 类继承

    我已经设置了一个基类作为标准 MyBase function this m Stuff 0 etc MyBase prototype MySuperFunction function arg1 alert Hello arg1 接下来我设置
  • 如何在 JPanel 上绘制图像并在其中添加组件

    我的应用程序是一个简单的打砖块游戏 为了绘制应用程序的视觉效果 我使用 PaintComponent 方法 该应用程序还有几个使用以下代码添加的按钮 levelMenu new JPanel Override public void pai
  • 如何使用 Selenium 和 Python 查找与用户输入相关的元素?

    以下是 HTML 结构 div class list div p class code 12345 p p class name abc p div div p class code 23456 p p class name bcd p d
  • openmp 在我的 mac 上以单线程运行

    我正在尝试在 Mac 上使用 openmp 并行化程序 但我无法使其成为多线程 我尝试从源代码 在 svn co 之后 构建 llvm clang openmp 3 7 1 作为有记录的 我也尝试过使用llvm 项目提供的 clang 和
  • 将 WSDL 转换为其各自的 HTTP 绑定

    我只是尝试根据 WSDL 提供的数据将 WSDl 转换为许多不同的 HTTP 请求 我读过很多类似的问题 但没有一个真正提供答案 有人说用SOAPUI 我熟悉这个应用程序并使用它 但我需要自己从 WSDL 创建这些 HTTP 请求 有人说要
  • JSON 字符串中的反斜杠

    我不熟悉这种格式 d Table pCol 12345 fCol jeff lCol Smith dId 1111111 tDate Date 1153033200000 0700 我在用着牛顿软件序列化我从 ASP Net Web 服务返
  • 原子操作、std::atomic<> 和写入顺序

    GCC 编译如下 include
  • 返回指向对象的指针的函数调用是纯右值吗?

    让我们想象一下这个函数 C get C c int offset return c offset 我想知道对此函数的调用是否被评估为纯右值 C array c 3 C c2 get array c 2 Is get array c 2 右值
  • 我如何使用 com.itunes.plist 找到 itunes 媒体文件夹位置

    我需要通过 com itunes plist 访问在 iTunes Preferences Advanced 中设置的 itunes 媒体文件夹位置 请帮我 Thanks 媒体文件夹的位置存储在 alis 11345 音乐文件夹位置 键下
  • C++ 类成员初始化顺序

    我知道在一个class成员按照列出的顺序进行初始化 这是否适用于将变量分组为public and privateETC 我的困惑是我无法弄清楚是否存在诸如private成员按照之前列出的顺序进行初始化public成员 无论私有变量在类声明中
  • Deadline_timers 的非阻塞 boost io_service

    阅读 boost asio deadline timer 的文档后 似乎 io service run 和处理程序方法是在同一线程上调用的 在后台线程上运行 io service 对象时 是否有任何方法可以在一个线程上创建计时器 为了好玩和
  • 拉链常见问题

    给定任何容器类型 我们都可以形成 以元素为中心的 Zipper 并且知道该结构是 Comonad 最近对此进行了精彩的详细探讨另一个堆栈溢出问题对于以下类型 data Bin a Branch Bin a a Bin a Leaf a de
  • 通过 FetchContent 安装 protobuf 时如何使用 cmake 命令 protobuf_generate?

    我正在使用 gRPC 编写客户端 服务器 要生成客户端 服务器 protobuf 代码 我需要运行 cmake 命令protobuf generate 如果我事先安装了 protobuf 我就可以访问该命令protobuf generate
  • Silverlight 4 和 Windows Phone 7 的 Bing 地图控件中的交互式图层

    使用 Bing 地图控件时 我的应用程序会添加一个叠加层 在其上将位置标记绘制为椭圆形 每个椭圆都连接到一个 Tap 处理程序 该处理程序在 WP7 模拟器中按预期工作 遗憾的是 HTC 硬件上的情况似乎并非如此 地图本身似乎获取了所有输入
  • 如何将 PHP 字符串传递到 Javascript 函数调用中? [复制]

    这个问题在这里已经有答案了 可能的重复 将 PHP 字符串传递给 Javascript 变量 并转义换行符 所以 本质上我试图从 PHP 页面传递一个字符串作为 javascript 函数的参数 PHP 包含在脚本所在的页面中 但它们位于两
  • 带有行号的 pandas 堆栈

    我有一个 Pandas DataFrame 示例 A B C D 0 0 441040 0 235533 0 899417 1 960367 1 0 701764 2 343389 1 293865 0 556737 2 0 511988
  • 何时使用 L.TileLayer 与 L.tileLayer

    我刚刚使用 Leaflet 为网站构建地图 并注意到要添加平铺层至少可以使用两种方法 L TileLayer and L tileLayer 其名称仅因单个字符的大小写而异 然而 虽然这两种方法返回的对象都可以添加到由L map 返回的对象