使用python 3使用PyQt4 QWebView查看 Map-Java 学习之路

我正在构建一个程序，可以根据数据库中的特定坐标显示带有标记的 Map ，因此该过程为：

使用（folium）从osm获取 Map
添加标记
将 Map 另存为HTML
在QWebView中显示map.html .

但是，如果坐标总是在变化，这种方式是不实际的（车辆跟踪系统） .

无论如何，这可以允许我在 Map 上添加或更新标记，避免以前的过程，而无需创建map.html文件，然后将其加载到QWebView，然后每次都显示它 .

谢谢

1 回答

前段时间我创建了一个小型库，使用PyQt和Google Maps或OpenStreetMap在 Map 中显示标记，因为您的问题我添加了此功能，因此您可以从此link下载代码并尝试示例：qOSMExample2.py

在这个答案中，我将向您展示我的代码中最重要的部分，以便您可以添加自定义功能 .

QWebView支持javascript所以我使用了传单库，这包含在html中，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>


    <style type="text/css">
			html { height: 100%; }
			body { height: 100%; margin: 0; padding: 0 }
			#mapid { height: 100% }
    </style>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
          integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
          crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
            integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
            crossorigin=""></script>

    <script type="text/javascript" src="qOSM.js"></script>
</head>
<body onload="initialize()">
<div id="mapid" style="width:100%; height:100%"></div>
</body>
</html>

此外，如果我们观察到我已经导入了 qOSM.js 文件，该文件实现了创建逻辑，移动 Map 以及标记相同 .

另一个重要的是用python与python交互pyqt为我们提供了2个功能：

void QWebFrame :: addToJavaScriptWindowObject（const QString＆name，QObject * object）在框架的JavaScript上下文中使对象在名称下可用 . 该对象将作为框架窗口对象的子项插入 . [...]

self.page().mainFrame().addToJavaScriptWindowObject("qtWidget", self)

QVariant QWebFrame :: evaluateJavaScript（const QString＆scriptSource）使用此框架作为上下文评估scriptSource定义的JavaScript，并返回上次执行的语句的结果 .

def runScript(self, script):
    return self.page().mainFrame().evaluateJavaScript(script)

第一个函数允许我们在js中嵌入一个python对象，因此我们可以从js输出信号并将它们连接到python槽 . 第二个是面向执行js的函数并接收返回的函数 . 总之，第一个用于异步获得答案而第二个用于同步获得答案 .

在下一部分中，我将展示实现上述功能的js：

// Where you want to render the map.

var map;

var markers = [];

var LeafIcon;

function initialize() {
    var element = document.getElementById('mapid');

    map = L.map(element);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    if (typeof qtWidget !== 'undefined') {

        map.on('dragend', function () {
            center = map.getCenter();
            qtWidget.mapMoved(center.lat, center.lng);
        });

        map.on('click', function (ev) {
            qtWidget.mapClicked(ev.latlng.lat, ev.latlng.lng);
        });

        map.on('dblclick', function (ev) {
            qtWidget.mapDoubleClicked(ev.latlng.lat, ev.latlng.lng);
        });

        map.on('contextmenu', function (ev) {
            qtWidget.mapRightClicked(ev.latlng.lat, ev.latlng.lng);
        });
    }

    LeafIcon = L.Icon.extend({
        options: {
            shadowUrl: 'leaf-shadow.png',
            iconSize: [38, 95],
            shadowSize: [50, 64],
            iconAnchor: [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor: [-3, -76]
        }
    });
}

function osm_setCenter(lat, lng) {
    //console.log(lat);
    map.panTo(new L.LatLng(lat, lng));
}

function osm_getCenter() {
    return map.getCenter();
}

function osm_setZoom(zoom) {
    map.setZoom(zoom);
}

function osm_addMarker(key, latitude, longitude, parameters) {

    if (key in markers) {
        osm_deleteMarker(key);
    }

    if ("icon" in parameters) {

        parameters["icon"] = new L.Icon({
            iconUrl: parameters["icon"],
            iconAnchor: new L.Point(16, 16)
        });
    }

    var marker = L.marker([latitude, longitude], parameters).addTo(map);

    if (typeof qtWidget !== 'undefined') {

        marker.on('dragend', function (event) {
            var marker = event.target;
            qtWidget.markerMoved(key, marker.getLatLng().lat, marker.getLatLng().lng);
        });

        marker.on('click', function (event) {
            var marker = event.target;
            //marker.bindPopup(parameters["title"]);
            qtWidget.markerClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);
        });

        marker.on('dbclick', function (event) {
            var marker = event.target;
            qtWidget.markerClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);
        });

        marker.on('contextmenu', function (event) {
            var marker = event.target;
            qtWidget.markerRightClicked(key, marker.getLatLng().lat, marker.getLatLng().lng);
        });
    }

    markers[key] = marker;
    return key;
}

function osm_deleteMarker(key) {
    map.removeLayer(markers[key]);
    delete markers[key];
}

function osm_moveMarker(key, latitude, longitude) {
    marker = markers[key];
    var newLatLng = new L.LatLng(latitude, longitude);
    marker.setLatLng(newLatLng);
}

function osm_posMarker(key) {
    marker = markers[key];
    return [marker.getLatLng().lat, marker.getLatLng().lng];
}


http://

输出：

回复于 2024-04-28T11:33:08+08:00

使用python 3使用PyQt4 QWebView查看 Map

1 回答

相关问题