leaflet - 为什么传单演示不在 jsfiddle 上工作?
问题描述
https://terrafrost.com/leaflet/demo01.html在运行它自己时按预期工作,但是当在https://jsfiddle.net/x2f05eov/的 jsfiddle 上运行时,我得到的只是一个空白页。我在控制台中没有看到任何错误。
有任何想法吗?
JS代码如下:
function layerParams(id)
{
return {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: id,
tileSize: 512,
zoomOffset: -1
};
}
var mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var light = L.tileLayer(mapboxUrl, layerParams('mapbox/light-v10'));
var streets = L.tileLayer(mapboxUrl, layerParams('mapbox/streets-v11'));
var satellite = L.tileLayer(mapboxUrl, layerParams('mapbox/satellite-streets-v11'));
var mymap = L.map('mapid', {
center: [30.267222, -97.743056],
zoom: 13,
layers: [light]
});
var baseMaps = {
"Light": light,
"Streets" :streets,
"Satellite": satellite
};
lightLines = L.layerGroup();
streetsLines = L.layerGroup();
satelliteLines = L.layerGroup();
var params = {
color: 'blue',
opacity: 0.75,
smoothFactor: 1
};
var latlngs = [[30.267222, -97.743056],[31.267222, -96.743056]];
tempParams = Object.assign(params, {weight: 10});
satelliteLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 3});
lightLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 5});
streetsLines.addLayer(L.polyline(latlngs, tempParams));
var hasOverlay = false;
mymap.on('baselayerchange', function(e) {
switch (e.name) {
case 'Light':
if (hasOverlay) {
lightLines.addTo(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.removeFrom(mymap);
}
break;
case 'Streets':
if (hasOverlay) {
lightLines.removeFrom(mymap);
streetsLines.addTo(mymap);
satelliteLines.removeFrom(mymap);
}
break;
case 'Satellite':
if (hasOverlay) {
lightLines.removeFrom(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.addTo(mymap);
}
}
});
mymap.on('overlayadd', function(e) {
console.log('overlayadd called');
hasOverlay = true;
});
mymap.on('overlayremove', function(e) {
console.log('overlayremove called');
lightLines.removeFrom(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.removeFrom(mymap);
});
var overlays = {
'Demo': lightLines
};
L.control.layers(baseMaps, overlays).addTo(mymap);
HTML 代码如下:
<body style="margin: 0; padding: 0; height: 100%">
<div id="mapid" style="width: 100%; height: 100%"></div>
传单 CSS 和 JS 也包括在内。
解决方案
你只是错过了一个结束body
和html
标签
<!DOCTYPE html>
<html style="height: 100%">
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>
<body style="margin: 0; padding: 0; height: 100%">
<div id="mapid" style="width: 100%; height: 100%"></div>
<script>
function layerParams(id) {
return {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: id,
tileSize: 512,
zoomOffset: -1
};
}
var mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var light = L.tileLayer(mapboxUrl, layerParams('mapbox/light-v10'));
var streets = L.tileLayer(mapboxUrl, layerParams('mapbox/streets-v11'));
var satellite = L.tileLayer(mapboxUrl, layerParams('mapbox/satellite-streets-v11'));
var mymap = L.map('mapid', {
center: [30.267222, -97.743056],
zoom: 13,
layers: [light]
});
var baseMaps = {
"Light": light,
"Streets": streets,
"Satellite": satellite
};
lightLines = L.layerGroup();
streetsLines = L.layerGroup();
satelliteLines = L.layerGroup();
var params = {
color: 'blue',
opacity: 0.75,
smoothFactor: 1
};
var latlngs = [
[30.267222, -97.743056],
[31.267222, -96.743056]
];
tempParams = Object.assign(params, {
weight: 10
});
satelliteLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {
weight: 3
});
lightLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {
weight: 5
});
streetsLines.addLayer(L.polyline(latlngs, tempParams));
var hasOverlay = false;
mymap.on('baselayerchange', function(e) {
switch (e.name) {
case 'Light':
if (hasOverlay) {
lightLines.addTo(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.removeFrom(mymap);
}
break;
case 'Streets':
if (hasOverlay) {
lightLines.removeFrom(mymap);
streetsLines.addTo(mymap);
satelliteLines.removeFrom(mymap);
}
break;
case 'Satellite':
if (hasOverlay) {
lightLines.removeFrom(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.addTo(mymap);
}
}
});
mymap.on('overlayadd', function(e) {
console.log('overlayadd called');
hasOverlay = true;
});
mymap.on('overlayremove', function(e) {
console.log('overlayremove called');
lightLines.removeFrom(mymap);
streetsLines.removeFrom(mymap);
satelliteLines.removeFrom(mymap);
});
var overlays = {
'Demo': lightLines
};
L.control.layers(baseMaps, overlays).addTo(mymap);
</script>
</body>
</html>
编辑:您需要定义显式高度(fi 100vh
),因为设置 100% 高度意味着在这种情况下不存在的父 div 的高度
小提琴
推荐阅读
- regex - 正则表达式 Excel 删除字符串的中间部分
- android - 我应该在 Android FCM 的防火墙中将哪个域或 IP 列入白名单?
- c# - 实体框架:在包含许多记录的表中插入记录时提高性能
- java - 在批处理作业中的 Spring Batch Processor 中生成新项目/CSV-Rows
- jquery - 当我使用 jquery 选择另一个选择框的第一个选项时,如何清除/重置选择框选项?
- android - 蓝牙扫描设备,但频繁扫描后无法写入设备
- php - 如何使用 foreach 循环在 Json 中查找特定数据?
- python - 为什么我在类 python 中使用 super 时会出现此错误
- reactjs - 如何在反应中创建可扩展表?
- r - 用以下列中的数据填充空白值