javascript - 何时使用 L.TileLayer 与 L.tileLayer-6ren

javascript - 何时使用 L.TileLayer 与 L.tileLayer

转载作者：行者123 更新时间：2023-12-01 16:04:48

26

4

我刚刚一直在使用 Leaflet 为网站构建 map ，并注意到要添加 Tile Layer 至少可以使用两种方法，L.TileLayer() 和 L。 tileLayer()，它们的名称仅在单个字符的大小写上有所不同。

但是，虽然这两种方法返回的对象都可以添加到 L.map() 返回的 map 对象中，但 L.TileLayer() 返回的对象> 似乎没有 addTo() 方法，而 L.tileLayer() 返回的对象。例如。两者

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

和

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);

同时

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/leaflet@1.3.3/dist/leaflet.css"
            integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
            crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.3.3/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>

最佳答案

长话短说:

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

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

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

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

to add a tilelayer at least two methods can be used, L.TileLayer() and L.tileLayer()

嗯，它们并不是真正的两种方法。技术上L.TileLayer是 Object 的实例, 和 L.tileLayer是 Function 的实例, 它继承了 Object 的原型(prototype).和 L充当命名空间而不是类实例。

你看，Javascript 中的面向对象编程很奇怪。您可以使用 new keyword几乎任何具有原型(prototype)的对象。和 prototype-based inheritance对于大多数精通“适当的”OOP 的人来说，理解起来很困惑。

如今，有了 ES2015 标准和花哨的 class关键字这不是真正的问题(我会说这是一个问题，但隐藏在语法糖层之下)。但在过去，开发人员不得不求助于，比方说，creative solutions for class inheritance有时涉及 messing with the prototype chain .

Leaflet 使用了这些方法的组合 - 作为不良副作用，L.TileLayer变成 Function可以调用L.TileLayer()直接，这很令人困惑。

Leaflet 还使用了 factory functions 的概念:返回类实例的函数。引自 one of the Leaflet tutorials :

Most Leaflet classes have a corresponding factory function. A factory function has the same name as the class, but in lowerCamelCase instead of UpperCamelCase:
function myBoxClass(name, options) {
    return new MyBoxClass(name, options);
}

这只是为了方便:它使用户无需输入 new关键词回到new的时代关键字是害怕。

但这会产生另一个不希望的副作用，因为在 Javascript 中所有 Function我们有一个原型(prototype)，这意味着您可以做类似的事情

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

因此，new L.tileLayer()也是有效的语法(但在运行时失败)。

then what is the use of L.TileLayer()?

再一次，L.TileLayer()作为函数调用是一个不受欢迎的副作用。但是L.TileLayer代表一个类，引用它很重要，因为:

 if (layer instanceof L.TileLayer)

关于javascript - 何时使用 L.TileLayer 与 L.tileLayer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51861013/

26

4

0

文章推荐： javascript - GraphQL.js - 时间戳标量类型？

文章推荐： java - SQLJ VS JAVA 文件

文章推荐： scala - 丰富一个内部类

文章推荐： php - 锂钠 "Call to undefined function sodium_randombytes_buf"

javascript - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

首页

博学

6Ren·AI

商城

javascript - 何时使用 L.TileLayer 与 L.tileLayer