LeafletJS How to set custom map scale for a flat image map (CRS.Simple)

[المشرف العام]

I've been trying to get a flat image fantasy map working within LeafletJS. I have pretty much everything working well except for the map scale legend where two things are not working:

1. I can't seem to change the scale of the control to reflect the scale of the map. The scale is trying to set itself for earth LatLng scales yet the map is of a very localised place.
   
   
2. As the map is repositioned in the window the scale changes to reflect the curvature of the earth (so the scale increases the closer you get to the poles).
   
   

All I want is a flat scale across all areas of the map and wanting to have the scale accurately reflect the scale in the image. For example, if in the image 1km = 100 pixels how would I go about making that work within the map?

My basic code is as follows:

// ---- VARIABLES ---- // // Map bounds (pixels) var mapSW = [0, 8192]; // Deepest Z/X/Y.png +1 x 256. var mapNE = [8192, 0]; // Deepest Z/X +1 x 256. // ---- MAP SETUP ---- // // Setup the map view // Initial coordinates as well as starting zoom factor var map = L.map('map').setView([0, 0], 2); // Reference the map tiles output from Photoshop with properties // for zoom factors and attribution. // // Use CRS.Simple so that the map can be referenced in terms of // pixels rather than latitude and longitude L.tileLayer('map/{z}/{x}/{y}.png', { minZoom: 2, maxZoom: 5, nowrap: true, crs: L.CRS.Simple, }).addTo(map); // Set the map bounds map.setMaxBounds(new L.LatLngBounds( map.unproject(mapSW, map.getMaxZoom()), map.unproject(mapNE, map.getMaxZoom()) )); // Scale legend // TODO. Not working properly yet L.control.scale().addTo(map);

أكثر...