Question

我有两张地图：来自OpenMapTiles的平铺卫星地图，它存储在本地并显示在后台。我想在上面显示另一张地图。目前它由一个简单的世界地图组成，我用mpl_toolkits.basemap在Python中创建，然后用gdal2tiles.py拆分成瓷砖（后来我想将叠加地图限制在像美国这样的某些地区）。但是，如果我将两张地图显示在彼此之上，则它们不会覆盖相同的区域（见下文）。

Shifted map after displaying it with 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);
}

传单 - 平铺地图转移

0 个答案: