У меня есть две карты: мозаичная спутниковая карта из OpenMapTiles , которая хранится локально и отображается в фоновом режиме. Я хотел бы показать еще одну карту выше этого. На данный момент она состоит из простой карты мира, которую я создал в Python с помощью mpl_toolkits.basemap, а затем разделил на плитки с gdal2tiles.py (позже я хотел бы ограничить карту наложения определенными регионами, такими как США ). Но если я отображаю обе карты друг на друге, они не покрывают одну и ту же область (см. Ниже).
Смещенная карта после ее отображения с помощью Leaflet
К сожалению, я ничего не знаю о Leaflet, кроме учебников. Я искал решение более недели и даже понятия не имею, что это может быть. Я действительно буду признателен за вашу помощь.
Скрипт Python:
# -*- coding: utf-8 -*-
import os
import math
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.basemap import Basemap
import subprocess # to execute shell commands
# Import settings
from settings import *
# 1. CREATE A BASEMAP
width = 4800
height = 4800
dpi = 120
plt.figure( figsize=(width/dpi, height/dpi) )
map = Basemap( projection='merc', resolution='c',
lat_0=51., lon_0=10.,
llcrnrlat=-85.051, urcrnrlat=85.051,
llcrnrlon=-180.000, urcrnrlon=180.000
)
map.fillcontinents(color='coral')
# Save the image
plt.axis('off')
filename = os.path.join(fileSettings.oPath, fileSettings.oFile)
plt.savefig( filename, dpi=float(dpi),
transparent=True,
bbox_inches='tight', pad_inches=0
)
# Call map tile generator
dirname = os.path.join(fileSettings.oPath, "tiles")
subprocess.check_output( "rm -rf " + dirname,
stderr=subprocess.STDOUT,
shell=True,
)
tilesize = 256
minZoom = 0
#maxZoom = 4
maxZoom = int(math.ceil( np.log2(max(width, height)/tilesize) )) # math.ceil: round up
try:
subprocess.check_output( "helpers/mapTileGenerator/gdal2tiles.py --leaflet --profile=raster --zoom=" + str(minZoom) + "-" + str(maxZoom) + " " + filename + " " + dirname,
stderr=subprocess.STDOUT,
shell=True,
)
print("Ready.")
except subprocess.CalledProcessError as e:
print("Error {}: {}".format(e.returncode, e.output))
Файл .js:
var map;
function initMap() {
// Define zoom settings
var minZoom = 0, // The smallest zoom level.
maxZoom = 4, // The biggest zoom level.
zoomDelta = 1, // How many zoom levels to zoom in/out when using the zoom buttons or the +/- keys on the keyboard.
zoomSnap = 0; // Fractional zoom, e.g. if you set a value of 0.25, the valid zoom levels of the map will be 0, 0.25, 0.5, 0.75, 1., and so on.
// Example for locally stored map tiles:
var openMapTilesLocation = 'openMapTiles/tiles/{z}/{x}/{y}.png'; // Location of the map tiles.
var openMapTilesAttribution = 'Map data © <a href="https://openmaptiles.com/satellite">OpenMapTiles Satellite</a> contributors'; // Appropriate reference to the source of the map tiles.
// Example for including our self-created map tiles:
var myMapLocation = 'tiles/map/{z}/{x}/{y}.png'; // Location of the map tiles.
var myMapAttribution = 'Map data © <a href="...">...</a> contributors'; // Appropriate reference to the source of the tiles.
// Ceate two base layers
var satellite = L.tileLayer(openMapTilesLocation, { attribution: openMapTilesAttribution }),
myMap = L.tileLayer(myMapLocation, { attribution: myMapAttribution });
// Add the default layers to the map
map = L.map('map', { minZoom: minZoom,
maxZoom: maxZoom,
zoomDelta: zoomDelta, zoomSnap: zoomSnap,
crs: L.CRS.EPSG3857,
layers: [satellite, myMap], // Layers that are displayed at startup.
}
);
// Set the start position and zoom level
var startPosition = new L.LatLng(51., 10.); // The geographical centre of the map (latitude and longitude of the point).
map.setView(startPosition, maxZoom);
// Next, we’ll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key sets the text for the layer in the control (e.g. “Satellite”), while the corresponding value is a reference to the layer (e.g. satellite).
var baseMaps = {
"Satellite": satellite,
};
var overlayMaps = {
"MyMap": myMap,
};
// Now, all that’s left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object.
L.control.layers(baseMaps, overlayMaps).addTo(map);
}