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