python - 创建开放的街道 map View

标签 python python-3.x pyqt5 qtwebengine qwebengineview

我正在尝试移植此代码:https://gist.github.com/ataffanel/13aac4b79bc0080b881f到最新版本的 pyqt5，因此使用 qtwebengine。我们的目标只是最终拥有一个 map 小部件。

这是我已经拥有的代码，使用随机 html 和 javascript 运行它可以工作，但我无法获取原始代码的 map View 。

主.py:


class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setupUi()
        self.show()
        self.raise_()

    def setupUi(self):
        #self.setFixedSize(800, 500)        
        vbox = QtWidgets.QVBoxLayout()
        self.setLayout(vbox)

        label = self.label = QtWidgets.QLabel()
        sp = QtWidgets.QSizePolicy()
        sp.setVerticalStretch(0)
        label.setSizePolicy(sp)
        vbox.addWidget(label)
        view = self.view = QtWebEngineWidgets.QWebEngineView()  
        channel = self.channel = QWebChannel()

        channel.registerObject('MainWindow', self)
        view.page().setWebChannel(channel)      
      # view.page().mainFrame().addToJavaScriptWindowObject("MainWindow", self)

      # view.page().setLinkDelegationPolicy(QQWebPage.DelegateAllLinks)
        html = open('src/main/assets/map.html','r').read()
        self.view.setHtml(html)
        view.loadFinished.connect(self.onLoadFinished)
        #view.linkClicked.connect(QtWidgets.QDesktopServices.openUrl)

        vbox.addWidget(view)

        button = QtWidgets.QPushButton('Go to Paris')
        panToParis = functools.partial(self.panMap, 2.3272, 48.8620)
        button.clicked.connect(panToParis)
        vbox.addWidget(button)

    def onLoadFinished(self, ok):            
       if ok:   
            page=self.view.page()
            with open('src/main/assets/map.js', 'r') as f:
                src=f.read()
                page.runJavaScript(src)


    @QtCore.pyqtSlot(float, float)
    def onMapMove(self, lat, lng):
        self.label.setText('Lng: {:.5f}, Lat: {:.5f}'.format(lng, lat))

    def panMap(self, lng, lat):
        page=self.view.page()
        page.runJavaScript('map.panTo(L.latLng({}, {}));'.format(lat, lng))

if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    w = MainWindow()

app.exec_()

map .html:

<!DOCTYPE html>
<html>
<head>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <style>
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%; }
    </style> 
</head>
<body>
    <div id="map"></div>

</body>
</html>

map.js:

var map = L.map('map').setView([55.61121, 12.99351], 16);
L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        'tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>',
    subdomains: '1234',
}).addTo(map);

var marker = L.marker(map.getCenter()).addTo(map);
marker.bindPopup("Hello World!").openPopup();

new QWebChannel(qt.webChannelTransport, function (channel) {
    window.MainWindow = channel.objects.MainWindow;

    if(typeof MainWindow != 'undefined') {
        var onMapMove = function() { MainWindow.onMapMove(map.getCenter().lat, map.getCenter().lng) };
        map.on('move', onMapMove);
        onMapMove();
    }
});

没有错误消息，只是一个空白屏幕，它应该是一张 map ......我不明白为什么会发生这种情况，因为如果我将它们更改为其他内容，必要的 javascript 和 html 都会呈现......

如果有更好的方法来创建这个小部件也足够了!

提前致谢!

最佳答案

您的代码存在的主要问题是您使用的是已弃用的 URL 模板和旧版本的传单。

另一方面，不需要将html和js作为文本加载，QtWebEngine可以直接显示文件。

考虑到上述情况，解决方案是:

结构:

├── main.py
└── src
    └── main
        └── assets
            ├── map.html
            └── map.js

ma​​p.js 

var map;

function initialize(){
    map = L.map('map').setView([55.61121, 12.99351], 16);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(map);

    var marker = L.marker(map.getCenter()).addTo(map);
    marker.bindPopup("Hello World!").openPopup();
    new QWebChannel(qt.webChannelTransport, function (channel) {
        window.MainWindow = channel.objects.MainWindow;
        if(typeof MainWindow != 'undefined') {
            var onMapMove = function() { MainWindow.onMapMove(map.getCenter().lat, map.getCenter().lng) };
            map.on('move', onMapMove);
            onMapMove();
        }
    });
}

ma​​p.html 

<!DOCTYPE html>
<html>
<head>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e222b2f28222b3a0e7f607e607c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701c1511161c150430415e405e42" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" />
    <script type="text/javascript" src="map.js"></script>
    <style>
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%; }
    </style> 
</head>
<body onload="initialize()">
    <div id="map"></div>
</body>
</html>

ma​​in.py

import os
import functools
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets, QtWebChannel


class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setupUi()

    def setupUi(self):
        # self.setFixedSize(800, 500)
        vbox = QtWidgets.QVBoxLayout()
        self.setLayout(vbox)

        label = self.label = QtWidgets.QLabel()
        sp = QtWidgets.QSizePolicy()
        sp.setVerticalStretch(0)
        label.setSizePolicy(sp)
        vbox.addWidget(label)
        view = self.view = QtWebEngineWidgets.QWebEngineView()
        channel = self.channel = QtWebChannel.QWebChannel()

        channel.registerObject("MainWindow", self)
        view.page().setWebChannel(channel)

        file = os.path.join(
            os.path.dirname(os.path.realpath(__file__)),
            "src/main/assets/map.html",
        )
        self.view.setUrl(QtCore.QUrl.fromLocalFile(file))

        vbox.addWidget(view)

        button = QtWidgets.QPushButton("Go to Paris")
        panToParis = functools.partial(self.panMap, 2.3272, 48.8620)
        button.clicked.connect(panToParis)
        vbox.addWidget(button)

    @QtCore.pyqtSlot(float, float)
    def onMapMove(self, lat, lng):
        self.label.setText("Lng: {:.5f}, Lat: {:.5f}".format(lng, lat))

    def panMap(self, lng, lat):
        page = self.view.page()
        page.runJavaScript("map.panTo(L.latLng({}, {}));".format(lat, lng))


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

输出:

enter image description here

关于python - 创建开放的街道 map View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56351399/

上一篇：python - 如何仅分析图像的一部分？

下一篇：python - 按列名称的数据框子集列表

相关文章：

python - Pandas:跨数据帧的列使用 DataFrame.apply() 和 Series.sum() 函数比调用 DataFrame.sum() 更快。为什么？

python - 安装超集 : error: command 'gcc' failed with exit status 1

python - 将程序的 latin-1 编码输出管道传输到 Python 3 脚本

python - 如何让悬停工具从 Bokeh 中绘制的数据框中显示另一个值？

python - 无法在 PyQt5 中导入 QtWebKitWidgets

python - 使用 Scapy 将 DNS 数据包转换为字符串

python - 如何合并具有冲突坐标的 xArray 数据集

python - 使用日期作为输出文件中的索引

python - PyQt5:ModuleNotFoundError:没有名为 'PyQt5' 的模块

python - 如何从 qcombobox 获取 itemdata？

©2024 IT工具网  联系我们