Adding jquery ruler on leaflet map

2019-08-03 17:01发布

问题:

I need a ruler on leaflet map along X,Y axis but leaflet API does not support it and there is no plugin available. There is a jquery ruler that servers my needs. Is it possible to add jquery ruler on leaflet map ?

Here is the example : http://ruler.hilliuse.com/

The ruler must adjust to the zoom level of leaflet map also. Please suggest.

回答1:

If you can calculate the corners of the map after every zoom, then just reset the start point of the ruler ;). May be you have to write some logic for getting corners coordinates.



回答2:

Haven't taken a deep look into the code of either, but here's the trade off:

  • leaflet's scale-control will already be hooked up to leaflet zoom events. Should be possible to duplicate the x-axis and rotate it 90º as a y-axis. However, keep in mind that leaflet scale-control is meant to measure distance on a spherical surface (i.e. the earth), not a flat xy plane.

  • the jquery ruler plugin should be easier to hack, internally, b/c it is not supposed to measure spherical distance. You'll have to update it's values on zoom, though. Check out the leaflet zoomend event. Use it like this:

map.on('zoomend', function(event){ updateRuler(...); });

leaflet event docs