无法在 QWebEngineView 中离线显示传单地图

发布于 2025-01-11 20:03:01 字数 2327 浏览 0 评论 0原文

在我的 PyQt 应用程序中，我想显示传单地图。该代码适用于在线图块，但我想做的是离线显示地图，为此，我使用 Mobile Atlas Creator 下载了某个区域的一些图块，这里是如何做到这一点的。如果我在浏览器中打开 html 文件，地图可以正常工作，但在 PyQt 应用程序中不起作用。

main.py

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt5.QtWebEngineWidgets import QWebEngineView

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        browser = QWebEngineView()
        html = open('index.html', 'r').read()
        browser.setHtml(html)
        vbox = QVBoxLayout()
        hBox = QVBoxLayout()
        hBox.addWidget(browser)
        vbox.addLayout(hBox)
        widget = QWidget()
        layout = QVBoxLayout(widget)
        layout.addLayout(vbox)
        self.setCentralWidget(widget)

def main():
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    return app.exec_()


if __name__ == '__main__':
    sys.exit(main())

索引.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />     
</head>
<body>
    <div id="map" style="height: 100vh; width: 100%;"></div>
</body>
</html>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>

    var loc = [48.85628846134472, 2.2929097921857955]
    var map = L.map('map').setView(loc, 16);

    // this work
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    // this dose'nt work
    L.tileLayer('img/{z}/{x}/{y}.png', { maxZoom: 18  }).addTo(map);
   
</script>

原文

In my PyQt app I want to show a leaflet map. The code works fine with online tiles but what I want to do is to show the map offline and for this I have downloaded some tiles for an area using Mobile Atlas Creator, here is how to do that. If I open html file in browser the map works fine however it's not working in PyQt app.

main.py

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt5.QtWebEngineWidgets import QWebEngineView

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        browser = QWebEngineView()
        html = open('index.html', 'r').read()
        browser.setHtml(html)
        vbox = QVBoxLayout()
        hBox = QVBoxLayout()
        hBox.addWidget(browser)
        vbox.addLayout(hBox)
        widget = QWidget()
        layout = QVBoxLayout(widget)
        layout.addLayout(vbox)
        self.setCentralWidget(widget)

def main():
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    return app.exec_()


if __name__ == '__main__':
    sys.exit(main())

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />     
</head>
<body>
    <div id="map" style="height: 100vh; width: 100%;"></div>
</body>
</html>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>

    var loc = [48.85628846134472, 2.2929097921857955]
    var map = L.map('map').setView(loc, 16);

    // this work
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    // this dose'nt work
    L.tileLayer('img/{z}/{x}/{y}.png', { maxZoom: 18  }).addTo(map);
   
</script>

分享到QQ

分享到微博