javascript - 传单 - 功能仅适用于缩放

Question

我创建了一个将带有文本（Alpha 加数字）的网格添加到地图的函数，但遇到了一个问题，即该函数最初仅在第一个用户缩放时加载。我已经尝试了几种解决方案，但没有什么可以让它在不强制缩放的情况下进行图层的初始加载。我尝试了几种 layer.on('add, function(eq)) 类型的解决方案，但到目前为止都没有奏效

添加图层时有没有办法调用该函数？

//Create variables and featuregroups, add feature group to overlay
var textgroup = L.featureGroup();
SGFull.addOverlay(textgroup);
SGBeta.addOverlay(textgroup);
SGBeta2.addOverlay(textgroup);
var ZT,ZY,ZTT,ZYY,ZYA = 0;

//Set Text and Grides to Group
function setgridtext(zoom1) {
console.log('zoom1:' + zoom1);

//Find Current Zoom Level and offset text
if (zoom1 == 0) {
    ZT = 256;
    ZTT = -32;
    ZY = 256;
    console.log('ZT' +ZT);
} 
if(zoom1 == 1) {
    ZT = 256;
    ZTT = -32;
    ZY = 256;
    console.log('ZT' + ZT);
}
if(zoom1 == 2) {
    ZT = 160;
    ZY = 96;
    ZYA = 16;
    ZTT = -16;
    console.log('ZT' +ZT);
}  
if(zoom1 == 3) {
    ZT = 100;
    ZY = 55;
    ZTT = -16;
    console.log('ZT' +ZT);
} 
if(zoom1 == 4) {
    ZT = 70;
    ZY = 35;
    ZTT = -8;
    console.log('ZT' +ZT);
} 
if(zoom1 == 5) {
    ZT = 35;
    ZY = 20;
    ZTT = -8;
    console.log('ZT' +ZT);
}
console.log('ZTcheck' +ZT);
console.log('zoom1b:' +zoom1);
console.log('getzoom:' +map.getZoom());

//Set Text to group
for (let i = 0; i <16; i++) {

letter = String.fromCharCode(65 + i)
modi = 512 * i;
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+ZYA], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+1, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+512], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+2, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+1024], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+3, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+1536], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+4, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+2048], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+5, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+2560], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+6, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+3072], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+7, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+3584], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+8, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+ZTT+modi, ZY+4096], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+9, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+4608], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+10, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+5120], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+11, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+5632], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+12, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+6144], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+13, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+6656], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+14, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+7168], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+15, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);
L.circleMarker(map.unproject([ZT+modi, ZY+7680], map.getMaxZoom()), {radius: 1,opacity: 0,}).bindTooltip(letter+16, {permanent: true, direction: "center", className: 'my-labels'}).openTooltip().addTo(textgroup);

};

//Set Grid lines to group
var hold = 0
for (let i = 0; i <17; i++) {

var pointA = map.unproject([hold, 0], map.getMaxZoom());
var pointB = map.unproject([hold, 8192], map.getMaxZoom());
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
    color: 'grey',
    weight: 4,
    opacity: 0.8,
    smoothFactor: 1

});
firstpolyline.addTo(textgroup);

var pointA = map.unproject([0, hold], map.getMaxZoom());
var pointB = map.unproject([8192, hold], map.getMaxZoom());
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
    color: 'grey',
    weight: 4,
    opacity: 0.8,
    smoothFactor: 1

});
firstpolyline.addTo(textgroup);

hold = hold + 512
}

}

//On Zoom update text size, remove current text and redrawn text including gridlines
map.on('zoomend', function(eq) {
  textgroup.clearLayers();
  setMarkerTextSize(map.getZoom());
  setgridtext(map.getZoom());
  
});

// Text resize
// Function to get style of select CSS class
function getStyle(ruleClass) {
  for (var s = 0; s < document.styleSheets.length; s++) {
    var sheet = document.styleSheets[s];
    if (sheet.href == null) {
      var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
      if (rules == null) return null;
      for (var i = 0; i < rules.length; i++) {
        if (rules[i].selectorText == ruleClass) {
            return rules[i].style;
        }
      }
    }
  }
  return null;
}


// Set font size for givem zoom
function setMarkerTextSize(zoom) {
console.log('textzoom:' + zoom)
  getStyle('.leaflet-tooltip.my-labels').fontSize = 12 + ((zoom - 1) * 4) + 'px';
}

// Set inital font size
setMarkerTextSize(map.getZoom());

//on load populate the 
 window.onload = function() {
  setgridtext(map.getZoom());
};

标签： javascriptleaflet