问题
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
来源：https://stackoverflow.com/questions/30023788/adding-jquery-ruler-on-leaflet-map