Leaflet：部署期间的显示问题
Posted
技术标签:
【中文标题】Leaflet：部署期间的显示问题【英文标题】：Leaflet : display problems during deployment 【发布时间】：2021-08-18 14:17:23 【问题描述】：我通过 SSH 在 Infomaniak 上部署了我的博客，与 Symfony 合作，我最近在上面添加了一张 Leaflet 地图。在开发环境中，没问题，标记出现并且使用的过滤器运行良好。
部署后，会显示地图，不显示任何标记，过滤器也不显示任何内容。
控制台显示以下错误： 加载资源失败：服务器响应状态为 500 ()。 通过单击过滤器复选框：错误来自提取。
你有什么想法吗？
开发环境：
部署
map.js：
//Icon of the jerseys on the map
let iconPicture = L.icon (
iconUrl: '/assets/images/cycling.png',
iconSize: [25, 25],
popupAnchor: [0, -10]
);
//Card initialization function
function initMap()
var map = L.map('mapId').setView([48.833, 2.333], 10);
L.tileLayer('https://api.mapbox.com/styles/v1/id/tiles/z/x/y?access_token=accessToken',
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
minZoom: 2,
maxZoom: 13,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoieWFubnJhdWxldCIsImEiOiJja3BjYzV0bTQwMTBqMzBvOGR1ZTBweDcxIn0.5jvTEj-WaEiKxIpSFpEu1Q'
).addTo(map);
//Checkbox for filters by years
var command = L.control();
command.onAdd = function (map)
var div = L.DomUtil.create('div', 'command');
div.innerhtml += '<h5>Filtres <br> par collection</h5>';
div.innerHTML += '<form><input id="checkboxAll" + type="checkbox"/> Tous les maillots</form>';
div.innerHTML += '<form><input id="checkbox50_60" + type="checkbox"/> Années 50 - 60</form>';
div.innerHTML += '<form><input id="checkbox70" + type="checkbox"/> Années 70</form>';
div.innerHTML += '<form><input id="checkbox80" + type="checkbox"/> Années 80</form>';
div.innerHTML += '<form><input id="checkbox90" + type="checkbox"/> Années 90</form>';
return div;
;
//Add leaflet legend control
command.addTo(map);
//Constant for checkbox filters
const cyclingShirts = document.getElementById('checkboxAll');
const cyclingShirts50_60 = document.getElementById('checkbox50_60');
const cyclingShirts70 = document.getElementById('checkbox70');
const cyclingShirts80 = document.getElementById('checkbox80');
const cyclingShirts90 = document.getElementById('checkbox90');
//Creating layers and clusters with leaflet class
var layerGroup = L.layerGroup().addTo(map);
var markersGroup = L.markerClusterGroup(
//Added options from the github documentation
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
showCoverageOnHover: false,
iconCreateFunction: function(cluster)
var count = cluster.getChildCount();
return L.divIcon(
html: count,
className: 'cluster',
iconSize: null
)
);
var markersGroup50_60 = L.markerClusterGroup(
//Added options from the github documentation
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
showCoverageOnHover: false,
iconCreateFunction: function(cluster)
var count = cluster.getChildCount();
return L.divIcon(
html: count,
className: 'cluster',
iconSize: null
)
);
var markersGroup70 = L.markerClusterGroup(
//Added options from the github documentation
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
showCoverageOnHover: false,
iconCreateFunction: function(cluster)
var count = cluster.getChildCount();
return L.divIcon(
html: count,
className: 'cluster',
iconSize: null
)
);
var markersGroup80 = L.markerClusterGroup(
//Added options from the github documentation
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
showCoverageOnHover: false,
iconCreateFunction: function(cluster)
var count = cluster.getChildCount();
return L.divIcon(
html: count,
className: 'cluster',
iconSize: null
)
);
var markersGroup90 = L.markerClusterGroup(
//Added options from the github documentation
disableClusteringAtZoom: 13,
spiderfyOnMaxZoom: false,
removeOutsideVisibleBounds: true,
showCoverageOnHover: false,
iconCreateFunction: function(cluster)
var count = cluster.getChildCount();
return L.divIcon(
html: count,
className: 'cluster',
iconSize: null
)
);
// 'checkboxAll' checked at the begining
document.getElementById('checkboxAll').checked = true;
if (cyclingShirts.checked === true)
// get the method map form the apiController
fetch("/api/map")
.then(response =>
return response.json()
)
.then(result =>
result.forEach( element =>
//Get the coordinates from the Promise to add them to the LayerGroup
layerGroup = new L.marker([element.latitude, element.longitude], icon: iconPicture)
.bindPopup(function (layer)
if (element.years == 'Années 50-60')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection50_60/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection50_60" + ">" + element.years + "</a>"
else if (element.years == 'Années 70')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection70/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection70" + ">" + element.years + "</a>"
else if (element.years == 'Années 80')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection80/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection80" + ">" + element.years + "</a>"
else if (element.years == 'Années 90')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection90/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection90" + ">" + element.years + "</a>"
, className: 'pop-up-leaflet', direction: 'top',
)
markersGroup.addLayer(layerGroup);
);
//Adds all markers to the clusterGroup
map.addLayer(markersGroup);
)
.catch(() => console.error('error'));
//------------------------------------------------------------------
//Function for add or remove the markers on the map
function filterAll()
//If the checkbox is checked then we add the markers on the map
if (cyclingShirts.checked === true)
document.getElementById('checkbox50_60').checked = false;
document.getElementById('checkbox70').checked = false;
document.getElementById('checkbox80').checked = false;
document.getElementById('checkbox90').checked = false;
//Asynchronously retrieves data with the server and returns an object of type Promise
fetch("/api/map")
.then(response =>
return response.json()
)
.then(result =>
result.forEach( element =>
//Get the coordinates from the Promise to add them to the LayerGroup
layerGroup = new L.marker([element.latitude, element.longitude], icon: iconPicture)
.bindPopup(function (layer)
if (element.years == 'Années 50-60')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection50_60/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection50_60" + ">" + element.years + "</a>"
else if (element.years == 'Années 70')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection70/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection70" + ">" + element.years + "</a>"
else if (element.years == 'Années 80')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection80/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection80" + ">" + element.years + "</a>"
else if (element.years == 'Années 90')
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection90/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection90" + ">" + element.years + "</a>"
, className: 'pop-up-leaflet', direction: 'top',
)
markersGroup.addLayer(layerGroup);
);
//Adds all markers to the clusterGroup
map.addLayer(markersGroup);
//Delete the others clusterGroup
markersGroup50_60.clearLayers();
markersGroup70.clearLayers();
markersGroup80.clearLayers();
markersGroup90.clearLayers();
)
.catch(() => console.error('error'));
//If the box is not checked, we delete the markers on the map
else if (cyclingShirts.checked === false)
fetch("/api/map")
.then(response =>
return response.json()
)
.then(result =>
markersGroup.clearLayers();
)
.catch(() => console.error('error'));
document.getElementById('checkboxAll').addEventListener('click', filterAll, false);
//------------------------------------------------------------------
function filter50_60()
if (cyclingShirts50_60.checked === true)
document.getElementById('checkboxAll').checked = false;
fetch("/api/map")
.then(response =>
return response.json()
)
.then(result =>
markersGroup.clearLayers();
)
.catch(() => console.error('error'));
fetch("/api/filter50_60")
.then(response =>
return response.json()
)
.then(result =>
result.forEach( element =>
layerGroup = new L.marker([element.latitude, element.longitude], icon: iconPicture)
.bindPopup(function (layer)
return "<span>" + element.name + "</span>" + "<br>" + "<div class='img-hover-zoom'>" + "<a href=" + "/collection50_60/" + element.id + ">" + "<img class='picturePopup' src=/assets/images/uploads/" + element.pictureFront + ">" + "</a>" + "</div>" +
"<br>" + element.city +"<br>" + "<a href=" + "/collection50_60" + ">" + element.years + "</a>"
, className: 'pop-up-leaflet', direction: 'top',
)
markersGroup50_60.addLayer(layerGroup);
);
map.addLayer(markersGroup50_60);
)
.catch(() => console.error('error'));
else if (cyclingShirts.checked === false)
fetch("/api/filter50_60")
.then(response =>
return response.json()
)
.then(result =>
markersGroup50_60.clearLayers();
)
.catch(() => console.error('error'));
document.getElementById('checkbox50_60').addEventListener('click', filter50_60, false);
//-----------------------------------------------------------------
(and three others filters (70,80,90)
window.onload = function()
// Initialization function that runs when the DOM is loaded
initMap();
;
ApiController
<?php
namespace App\Controller;
use App\Repository\CyclingShirtRepository;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
/**
* This controller will return Json responses for the Leaflet map ajax requests
* @Route( "/api", name="api_")
*/
class ApiController extends AbstractController
/**
* @Route("/map", name="map")
* Collect all years cycling shirts
* @return Response
*/
public function map(CyclingShirtRepository $shirtsRepository): Response
$cyclingShirt = $shirtsRepository->findAll();
return $this->json($cyclingShirt, 200);
/**
* @Route("/filter50_60", name="filter50_60")
* Collect cycling shirts 50s and 60s
* @return Response
*/
public function filter5060(CyclingShirtRepository $shirtsRepository): Response
$filter5060 = $shirtsRepository->findByYears('Années 50-60');
return $this->json($filter5060, 200);
/**
* @Route("/filter70", name="filter70")
* Collect cycling shirts 70s
* @return Response
*/
public function filter70(CyclingShirtRepository $shirtsRepository): Response
$filter70 = $shirtsRepository->findByYears('Années 70');
return $this->json($filter70, 200);
【问题讨论】：
您请求数据的 api 可能有请求限制。你检查过吗？此外，在您的代码中，您似乎在 7 次不同时间请求数据 好问题，我查看了文档但找不到此类信息，您知道在哪里可以找到吗？ 我不知道您使用的是哪个 API。我可以看到网址，但谷歌搜索它没有给出任何结果。能否提供 API url 文档？ 传单：leafletjs.com/reference-1.7.1.html，但我看不到在哪里可以找到 url 信息 我指的是加载骑行数据的 API，例如cycling/api/.... 不是地图渲染库
【参考方案1】：
在您的 url 路径前添加一个 .。 /api/map/ 应该是 ./api/map/
以/ 开头，您的路径不是从当前文件夹开始，而是从主域 url 开始。例如：www.domain.com/api/map/ 而不是 www.domain.com/infomaniak/myproject/api/map/
【讨论】：
我改变了我的 url 路径，但不幸的是这并没有改变任何东西。另一方面，卡在第一次加载时仍然很长。以上是关于Leaflet：部署期间的显示问题的主要内容，如果未能解决你的问题，请参考以下文章
Ionic 4 Leaflet Map不适用于部署，但适用于离子服务--devapp