![TileLayer]( "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 ="zh-cn"lang ="en">< head>< meta http-equiv =内容类型"content =" text/html;charset = iso-8859-1"/><元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1.0，最大比例＝ 1.0，用户可缩放＝ 0".< link rel ="stylesheet"href =" https://unpkg.com/[email protected]/dist/leaflet.css"完整性="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3 + OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ =="crossorigin ="/".< script src ="https://unpkg.com/[email protected]/dist/leaflet.js"完整性="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q =="crossorigin ="</script></head>< body onload =" makeMap()">< script type =文本/javascript">函数makeMap(){var tileUrl ='https://{s} .tile.openstreetmap.org/{z}/{x}/{y} .png';var tileAttrib ='地图数据& copy< a href =" https://openstreetmap.org"> OpenStreetMap</a>贡献者的；var map = L.map('map').setView([63,15]，9);//使用tileLayer和addLayer-这有效var tile = new L.tileLayer(tileUrl，{attribution:tileAttrib});map.addLayer(tiles);//使用tileLayer和addTo-这有效//L.tileLayer(tileUrl，{attribution:tileAttrib}).addTo(map);//使用TileLayer和addLayer-可以工作//var tile = new L.TileLayer(tileUrl，{attribution:tileAttrib});//map.addLayer(tiles);//使用TileLayer和addTo-失败//L.TileLayer(tileUrl，{attribution:tileAttrib}).addTo(map);}</script>< table border = 1 style ="位置:绝对；最高:0;底部:0;左:0；正确:0；宽度:100％;高度:100％；< tr style =高度:100％;"< td>< div id ="map"style =" width:100％;高度:100％；"/div"；"/div"；"/div"；"/div"</td></tr></table></body></html> 解决方案 TL; DR: 这两个都是有效的和等效的: var foo = L.tileLayer(arguments);var foo = new L.TileLayer(arguments); 这两个在语法上是有效的(由于Javascript的历史包g)，但最终会导致错误: var foo = new L.tileLayer(arguments);var foo = L.TileLayer(arguments); 要添加图块层，至少可以使用两种方法: L.TileLayer()和 L.tileLayer() 嗯，它们实际上不是两种方法.从技术上讲， L.TileLayer 是 Object 的实例，而 L.tileLayer 是 Function 的实例，该实例继承 Object 的原型.并且 L 充当名称空间而不是类实例.您会发现，用Java进行的面向对象编程很奇怪.您可以使用 new 关键字以及几乎所有具有原型的对象.而且，基于原型的继承困扰着大多数人精通适当"的意思面向对象.如今，使用ES2015标准和奇特的 class 关键字，这实际上不是问题(我想说这是一个问题，但隐藏在语法糖层之下).但是在过去，开发人员不得不诉诸于用于类继承的创造性解决方案，有时涉及与原型链打交道.>传单将这些方法结合使用-和作为不良副作用 ， L.TileLayer 成为 Function ，并且可以调用 L.TileLayer()直接，这很令人困惑. Leaflet还使用 工厂功能的概念:返回类实例的函数.引用单张教程之一:大多数Leaflet类具有相应的工厂功能.工厂函数与该类具有相同的名称，但在 lowerCamelCase 中而不是在 UpperCamelCase 中: function myBoxClass(name，options){返回新的MyBoxClass(name，options);} 这只是为了方便:它使用户避免在害怕 new 关键字的时代输入 new 关键字.>.但这会产生另一个不希望的副作用，因为在Javascript中，所有 Function 都具有原型，这意味着您可以执行类似的操作 函数myFunction(){...}var wtf = new myFunction(); 因此， new L.tileLayer()也是有效的语法(但在运行时失败).那么 L.TileLayer()的用途是什么?再次， L.TileLayer()作为函数调用是不希望的副作用.但是 L.TileLayer 代表一个类，由于诸如此类的东西，因此引用它很重要: if(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. bothvar map = L.map('map');var tiles = new L.TileLayer(<tileUrl>, {attribution: <tileAttrib>});map.addLayer(tiles);andvar map = L.map('map');var tiles = new L.tileLayer(<tileUrl>, {attribution: <tileAttrib>});map.addLayer(tiles);as well asvar map = L.map('map');L.tileLayer(<tileUrl>, {attribution: <tileAttrib>}).addTo(map);whilstvar 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/[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 © <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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-23 10:48