何时使用 L.TileLayer 与 L.tileLayer

时间：2023-08-08

本文介绍了何时使用 L.TileLayer 与 L.tileLayer的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚使用 Leaflet 为网站构建地图，并注意到添加 Tile Layer 至少可以使用两种方法，L.TileLayer() 和 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);

和

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() 的用途是什么?p>

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

解决方案

TL;DR:

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

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

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

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

<块引用>要添加一个 tilelayer，至少可以使用两种方法，L.TileLayer() 和 L.tileLayer()
嗯，它们并不是真正的两个方法.技术上L.TileLayer是Object的实例，L.tileLayer是Function的实例，继承Object 的原型.并且 L 充当命名空间而不是类实例.
你看，Javascript 中的面向对象编程是奇怪.您可以使用 new关键字 几乎包含任何具有原型的对象.而 基于原型的继承 让大多数人难以理解精通适当"；哎呀.
如今，对于 ES2015 标准和花哨的 class 关键字，这并不是真正的问题(我会说这是一个问题，但隐藏在语法糖层之下).但在过去，开发人员不得不求助于，比如说，类继承的创造性解决方案 有时涉及弄乱原型链.
Leaflet 使用了这些方法的组合 - 作为一种不希望的副作用，L.TileLayer 变成了一个 Function 并且可以调用 L.TileLayer() 直接，这很混乱.
Leaflet 还使用了工厂函数的概念:返回类实例的函数.引用 传单教程之一:
<块引用>大多数 Leaflet 类都有相应的工厂函数.工厂函数与类同名，但使用 lowerCamelCase 而不是 UpperCamelCase:
function myBoxClass(name, options) {返回新的 MyBoxClass(名称，选项)；}
这只是为了方便:它使用户免于输入 new 关键字回到 害怕 关键字的时代>.
但这会产生另一个不受欢迎的副作用，因为在 Javascript 中，所有 Function 都有一个原型，这意味着您可以执行类似的操作
 函数 myFunction() { ... }var wtf = new myFunction();
因此，new L.tileLayer() 也是有效的语法(但在运行时失败).
<块引用>那么L.TileLayer()有什么用呢?
再一次，L.TileLayer() 作为函数调用是一个不受欢迎的副作用.但是 L.TileLayer 代表一个类，因此引用它很重要，因为:
 if (layer instanceof L.TileLayer)
I have just been using Leaflet to build a map for a website and noticed that to add a Tile Layer at least two methods can be used, L.TileLayer() and L.tileLayer(), differing in their name only by the case of a single character.
However, while the object returned by both of these methods can be added to a map object returned by L.map() the object returned by L.TileLayer() does not seem to have the addTo() method whilst the object returned byL.tileLayer(). E.g. both
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);
as well as
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);
fails. Browsing the documentation of Leaflet it seems the proper method to use is L.tileLayer() so the question then is what is the use of L.TileLayer()?
Here's a full example of my code so far, to try the different alternatives simply uncomment the one to test and make sure the others are commented
<!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>

 解决方案 
TL;DR:
These two are both valid and equivalent:
var foo = L.tileLayer(arguments);
var foo = new L.TileLayer(arguments);
These two are syntactically valid (because of Javascript's historical baggage) but will ultimately result in errors:
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()
Well, they're not really two methods. Technically L.TileLayer is an instance of Object, and L.tileLayer is an instance of Function, which inherits the prototype of Object. And L acts as a namespace rather than a class instance.
You see, Object-Oriented Programming in Javascript is weird. You can use the new keyword with pretty much any object which has a prototype. And prototype-based inheritance is confusing to grasp to most people versed in "proper" OOP.
Nowadays, with the ES2015 standards and the fancy class keywords this is not really a problem (I'd say it's a problem, but hidden under layers of syntactic sugar). But back in the day, developers had to resort to, let's say, creative solutions for class inheritance which sometimes involves messing with the prototype chain.
Leaflet uses a combination of such methods - and as an undesired side effect, L.TileLayer becomes a Function and one can call L.TileLayer() directly and that's quite confusing.
Leaflet also uses the concept of factory functions: A function that returns an instance of a class. Quoting from 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);
}

This is meant just as a convenience: it saves the user from typing the new keyword back in an era where the new keyword was feared.
But this creates another undesired side effect, because in Javascript all Functions have a prototype, which means that you can do stuff like
 function myFunction() { ... }
 var wtf = new myFunction();
Therefore, new L.tileLayer() is also valid syntax (but fails at runtime).


then what is the use of L.TileLayer()?
Once again, L.TileLayer() as a function call is an undesired side effect. But L.TileLayer represents a class and it's important to have a reference to that, because of things like:
 if (layer instanceof L.TileLayer)


                        
这篇关于何时使用 L.TileLayer 与 L.tileLayer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！



上一篇：传单R，如何使与儿童统计相关的聚集图标出现 
下一篇：ruby on rails:传单导轨未加载 

 
相关文章
检查一个多边形点是否在传单中的另一个内部Check if a polygon point is inside another in leaflet(检查一个多边形点是否在传单中的另一个内部)
更改传单标记群集图标颜色，继承其余默认 CSSChanging leaflet markercluster icon color, inheriting the rest of the default CSS properties(更改传单标记群集图标颜色，继承其余默认 
触发点击传单标记Trigger click on leaflet marker(触发点击传单标记)
如何更改 LeafletJS 中的默认加载磁贴颜色?How can I change the default loading tile color in LeafletJS?(如何更改 LeafletJS 中的默认加载磁贴颜色?)
将外部geojson添加到传单层Add external geojson to leaflet layer(将外部geojson添加到传单层)
将 Leaflet 图层控件添加到侧边栏Adding Leaflet layer control to sidebar(将 Leaflet 图层控件添加到侧边栏)



最新文章

使用 EPSG:25832 投影在 Leaflet 中垂直对齐 TMS 瓷砖
Leaflet + Polymer 2 使用扭曲的瓷砖加载地图，但适用
如何强制传单地图重新加载所有图块，包括可见
在 R 中自定义传单弹出窗口
为什么调用传单的 setZoom 两次导致第二次被忽略
传单:添加标记的链接
在传单弹出窗口中显示图像
如何从地图外的链接打开传单标记弹出窗口?
查询依赖于 mongodb 中其他文档值的文档
如何在 PouchDB 上模拟聚合函数 avg、sum、max、min