如何在Stamen地图中使用Leaflet.js插件？

Question

我正在尝试将以下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：

<!-- 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" />

并直接从插件主目录安装文件

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

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

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

Answer 1

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

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以获得其他示例和底图