使标记在传单中可调整大小的最佳方法 [英] Best way to make marker resizable in leaflet

问题描述

每当地图放大或缩小时，我都会尝试调整标记的大小。
目前我正在使用这种方法：

• 遍历zoomend方法中的所有标记。


• 获取当前图标大小


• 根据缩放大小执行一些计算以获取新的标记大小。



• 将新维度设置为图标对象。

    map.on（'zoomend'，function（）{
   zoomEndLevel = map.getZoom（） ; 
   var difference = zoomEndLevel  -  zoomStartLevel; 
   console.log（zoom in difference+ difference）; 
   markerArray.forEach（function（marker）{
   var icon = marker .options.icon; 
   var oldX = icon.options.iconSize [0]; 
   var oldY = icon.options.iconSize [1]; 
   var newX = getNewIconAxis（oldX，difference） ; 
   var newY = getNewIconAxis（oldY，difference）; 
   console.log（newX ++ newY）; 
   icon.options.iconSize = [newX，newY]; 
   marker.setIcon（icon）; 
  }）; 
    

  }）;

    map.on（'zoomstart ，函数（）{
   zoomStartLevel = map.getZoom（）; 
    

  }）;

   函数getNewIconAxis（value，zoomChange）{
   if（zoomChange> 0）{
   for（var i = zoomChange; i> 0; i--）{
  值=值* 2; 
  } 
  } else {
   for（var i = zoomChange; i <0; i ++）{
   value = value / 2; 
  } 
  } 
  返回值; 
    

  }

问题：
如果我一次放大和缩小1级，此代码可以正常工作。如果我太频繁地滚动鼠标，那么这段代码给出了奇怪的输出。有时标记大小变得太大或太小。

问题：
1）这是使标记在不同缩放级别上可调整大小的唯一方法吗？
2）如果是，那么我在这里丢失了什么，或者应该做些什么改变才能使它完美地工作。？
$ b 注意：标记谷歌地图也是因为它是更多与地图（谷歌或传单或mapbox），而不是api特定问题的逻辑问题。

解决方案

看起来像有您引导您的几个以前的帖子：

• 地图框，单张：在缩放时增加标记大小 是否有一种方法根据传单中的缩放级别调整标记图标？


• https：// gis.stackexchange.com/questions/171609/resize-divicons-svgs-at-zoom-levels-leaflet

至于你的bug，而不是读取当前图标大小值 at zoomstart事件，您最好记住以前的缩放值并仅在zoomend事件中阅读。我不确定zoomstart事件在连续滚动（放大/缩小）时仅触发一次，而zoomend事件只能在最后结束。

I am trying to resize my markers every time the map is zoomed in or out. Currently I am using this approach:

• Iterate all markers in zoomend method.
• get current icon size
• Perform some calculation to get the new marker size according the zoom size.

• set the new dimension to the icon object.

  map.on('zoomend', function() {
  zoomEndLevel = map.getZoom();
  var difference = zoomEndLevel - zoomStartLevel;
  console.log("difference in zoom " + difference);
  markerArray.forEach(function(marker) {
      var icon = marker.options.icon;
      var oldX = icon.options.iconSize[0];
      var oldY = icon.options.iconSize[1];
      var newX = getNewIconAxis(oldX, difference);
      var newY = getNewIconAxis(oldY, difference);
      console.log(newX + " " + newY);
      icon.options.iconSize = [ newX, newY ];
      marker.setIcon(icon);
  });
  

  });

  map.on('zoomstart', function() {
  zoomStartLevel = map.getZoom();
  

  });

  function getNewIconAxis(value, zoomChange) {
  if (zoomChange > 0) {
      for (var i = zoomChange; i > 0; i--) {
          value = value * 2;
      }
  } else {
      for (var i = zoomChange; i < 0; i++) {
          value = value / 2;
      }
  }
  return value;
  

  }

Problem : This code works fine if I zoom in and out 1 level at once. If I scroll in and out my mouse too frequently then this code given strange outputs. Sometimes the marker size becomes too large or too small.

Question : 1) Is this the only way to make the markers resizable on different zoom levels? 2) If yes then what am I missing here or what changes should be made to make it work perfectly.?

Note : Tagging google maps also because it's more of a logical issue with map (either google or leaflet or mapbox) rather than api specific issue.

解决方案

Looks like there are several previous posts that you guide you:

• Mapbox,leaflet: Increase marker size on Zoom
• is there a way to resize marker icons depending on zoom level in leaflet?
• https://gis.stackexchange.com/questions/171609/resize-divicons-svgs-at-zoom-levels-leaflet

As for your bug, instead of reading the current icon size value at "zoomstart" event, you might better remember the previous zoom value and read it only at "zoomend" event. I am not sure the "zoomstart" event is fired only once when you scroll (to zoom in/out) successively, while the "zoomend" event may be fired only at the very end.

这篇关于使标记在传单中可调整大小的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！