Shift MapBox 500px

Question

I am currently working on a project which requires MapBox to be used. We have a persistent sidebar which is laid over the top of the map in HTML. The sidebar is 500px wide.

Everything works fine, except that when we center the map at a given co-ordinate pair, there is 500 pixels' worth of the map hidden. Essentially, I am looking for a function / formula that can be used to convert the latitude position used for centering to accommodate an extra 500 pixels, at a given zoom level.

Could anyone tell me of such an algorithm (ideally in JavaScript, but could easily be converted)? We have looked into the use node-sphericalmercator , but this doesn't quite achieve what we need.

Answer 1

使用L.fitBounds()和padding选项对Leaflet进行此操作，或者，如果不能使用范围，请使用latLngToPoint进行转换，移动点，然后再转换回去。