如何将 Leaflet.js 插件与 Stamen 地图一起使用？答案

【问题标题】：How to use Leaflet.js plugin with Stamen maps?如何将 Leaflet.js 插件与 Stamen 地图一起使用？
【发布时间】：2018-07-30 04:05:27
【问题描述】：

我正在尝试将以下 Leaflet.js 滑块添加到我的地图中：https://github.com/Eclipse1979/leaflet-slider

我原来在安装Carto时只是安装了传单

<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

但是，当我尝试安装更新版本的 Leaflet 以使用 Slider 时，会引发以下类型错误：

TypeError: L.StamenTileLayer is not a constructor

我已尝试使用快速入门指南安装 Leaflet：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

并通过直接从插件主安装文件

<link rel="stylesheet" href="leaflet.css">
<link rel="stylesheet" href="example.css">
<link rel="stylesheet" href="leaflet-slider.css">

<script src="leaflet.js"></script>
<script src="leaflet-slider.js"></script>

这两种情况都会导致相同的错误。我使用以下内容加载我的 Stamen 层：

var map = L.map('map').setView([51.47, 0.25], 10);
    map.on('click', onMapClick);
    //create a tile layer for our toner basemap
    var tonerLayer = new L.StamenTileLayer("toner");
    map.addLayer(tonerLayer);

我使用以下代码添加微调器：

slider = L.control.slider(function(value) {
            console.log(value);
        }, {
        min: 1000,
        max: 5000,
        value: 1000,
        step:100,
        size: '250px',
        orientation:'horizontal',
        id: 'slider'
    }).addTo(map);

【问题讨论】：

标签： javascript d3.js leaflet cartodb stamen-maps

【解决方案1】：

您是否尝试过将底图定义为TileLayer？将图层添加到原生传单地图时，语法不同，因为它们的各种底图没有内置到传单中。

var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: 'abcd',
   minZoom: 0,
   maxZoom: 20,
   ext: 'png'
});
map.addLayer(Stamen_Toner);

查看Leaflet Providers Demo 以获取其他示例和底图

【讨论】：

这成功添加了雄蕊层。但是它现在覆盖了我的 cartodb 层。你知道为什么会出现这种情况以及如何将我的 cartodb 层放在前面吗？
两个图层都是平铺资源，如果base layer在carto layer之后添加到地图中，会叠加在上面。要解决此问题，您可以切换添加图层的顺序，也可以直接调用 Stamen_Toner.bringToBack();
Stamen_Toner.on('add', function() { this.bringToBack(); }); map.addLayer(Stamen_Toner); 将底图在添加后立即移到后面
您还可以在切片图层的图层定义中添加zIndex 属性（zIndex 较低的图层绘制在 zIndex 较高的图层下方）。 gis.stackexchange.com/a/167871/81951

【解决方案2】：

您尝试使用 Stamen 函数 L.StamenTileLayer，而没有先加载 Stamen library。通过将其添加到您的 head 标记（以及 Leaflet.js 库）中来安装它：

<script src="http://maps.stamen.com/js/tile.stamen.js"></script>

或安全版本：

<script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>

这段代码现在应该可以工作了：

var tonerLayer = new L.StamenTileLayer("toner");
map.addLayer(tonerLayer);

【讨论】：