[英]How to use Leaflet.js plugin with Stamen maps?
我正在尝试将以下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>
两种情况都会导致相同的错误。 我使用以下内容加载雄蕊层:
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);
您是否尝试过将底图定义为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> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
map.addLayer(Stamen_Toner);
签出Leaflet Providers Demo以获得其他示例和底图
您尝试使用Stamen函数L.StamenTileLayer
,而没有先加载Stamen库 。 通过在您的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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.