何時使用 L.TileLayer 與 L.tileLayer

Question

我剛剛使用 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);

失敗。 瀏覽單張的文件，似乎使用正確的方法是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>

Answer 1

特爾；博士：

這兩個既有效又等效：

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

這兩個在語法上是有效的（因為 Javascript 的歷史包袱），但最終會導致錯誤：

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

添加tilelayer至少可以使用兩種方法， L.TileLayer()和L.tileLayer()

好吧，它們並不是真正的兩種方法。 從技術上講， L.TileLayer是Object一個實例，而L.tileLayer是Function一個實例，它繼承了Object的原型。 L充當命名空間而不是類實例。

你看，Javascript 中的面向對象編程很奇怪。 您可以將new關鍵字用於幾乎任何具有原型的對象。 對於大多數精通“正確”OOP 的人來說，基於原型的繼承是難以掌握的。

如今，有了 ES2015 標准和花哨的class關鍵字，這並不是一個真正的問題（我會說這是一個問題，但隱藏在語法糖層之下）。 但在過去，開發人員不得不求助於，比如說，類繼承的創造性解決方案，有時涉及弄亂原型鏈。

Leaflet 使用了這些方法的組合 -作為一種不受歡迎的副作用， L.TileLayer變成了一個Function並且可以直接調用L.TileLayer() ，這很令人困惑。

Leaflet 還使用了工廠函數的概念：返回類實例的函數。 引自傳單教程之一：

大多數 Leaflet 類都有相應的工廠函數。 工廠函數與類具有相同的名稱，但使用lowerCamelCase而不是UpperCamelCase ：
 function myBoxClass(name, options) { return new MyBoxClass(name, options); }

這意味着僅僅作為一種方便：它節省打字的用戶new在的時代關鍵詞回new關鍵字是擔心。

但這會產生另一個不受歡迎的副作用，因為在 Javascript 中所有Function都有一個原型，這意味着你可以做類似的事情

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

因此， new L.tileLayer()也是有效的語法（但在運行時失敗）。

那么L.TileLayer()什么用呢？

再一次，作為函數調用的L.TileLayer()是一個不受歡迎的副作用。 但是L.TileLayer代表一個類，引用它很重要，因為如下：

 if (layer instanceof L.TileLayer)

何時使用 L.TileLayer 與 L.tileLayer

問題描述

1 個解決方案

解決方案1
4 已采納 2018-08-15 15:18:58

何時使用 L.TileLayer 與 L.tileLayer

問題描述

1 個解決方案

解決方案1 4 已采納 2018-08-15 15:18:58

解決方案1
4 已采納 2018-08-15 15:18:58