Python PyQt 5.9中的OpenLayers地理定位_Python_Pyqt_Openlayers_Pyqt5_Qwebengineview

Python PyQt 5.9中的OpenLayers地理定位

python openlayers

Python PyQt 5.9中的OpenLayers地理定位,python,pyqt,openlayers,pyqt5,qwebengineview,Python,Pyqt,Openlayers,Pyqt5,Qwebengineview,我已经实现了一个带有地理定位功能和按钮的网站此网页在QwebEngineView（OSM地图）中显示良好。网页已加载 def __init__(self, parent=None): super(MainGUI, self).__init__(parent) self.ui = uic.loadUi("GPS.ui", self) self.ui.w3View.load(QtCore.QUrl('file:///Map.html')) 所有原

我已经实现了一个带有地理定位功能和按钮的网站

此网页在QwebEngineView（OSM地图）中显示良好。网页已加载

def __init__(self, parent=None):
        super(MainGUI, self).__init__(parent)
        self.ui = uic.loadUi("GPS.ui", self)
        self.ui.w3View.load(QtCore.QUrl('file:///Map.html'))

所有原生OpenLayers按钮（放大和缩小）都工作正常

我创建了一个新的自定义按钮，在OpenLayers地图上显示我的地理位置

这是我用来定位我的功能：

var handleGeolocation = function() {

      var coordinates;
      var geolocation = new ol.Geolocation({
        projection: view.getProjection(),
        tracking: true
      });
      // handle geolocation error.
      geolocation.on('error', function (error) {
        var info = document.getElementById('info');
        info.innerHTML = error.message;
        info.style.display = '';
      });

      var accuracyFeature = new ol.Feature();
      geolocation.on('change:accuracyGeometry', function () {
        accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
      });

      var positionFeature = new ol.Feature();
      positionFeature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          fill: new ol.style.Fill({
            color: '#3399CC'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
          })
        })
      }));

      geolocation.once('change:position', function () {
        coordinates = geolocation.getPosition();
        positionFeature.setGeometry(coordinates ?
          new ol.geom.Point(coordinates) : null);
        map.getView().setCenter(coordinates);
        map.getView().setZoom(17);
      });

      new ol.layer.Vector({
        map: map,
        source: new ol.source.Vector({
          features: [accuracyFeature, positionFeature]
        })
      });
    }

我在的帮助下创建了按钮

整个网页如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol-debug.js"></script>
   <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
      map{
          max-width: 760 px;
          max-height: 50 px;
      }

      .geoButton {
        top: 80px;
        left: .5em;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map" tabindex="0"></div>
    <script>
      window.app = {};
      var app = window.app;


      view = new ol.View({
        center: [0, 0],
        zoom: 2
      });

      app.getLocation = function(opt_options) {
        var options = opt_options || {};

        var geoButton = document.createElement('button');
        geoButton.innerHTML = 'L';

        var handleGeolocation = function() {
          /*    var isMobile =  {
              Android: function () {
                return navigator.userAgent.match(/Android/i);
              },
              BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
              },
              iOS: function () {
                return navigator.userAgent.match(/iPhone|iPod|iPad/i);
              },
              Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
              },
              Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
              },
              any: function () {
                return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
              }
            };

            if (isMobile.any()){
              geolocation.setTrackingOptions(enableHighAccuracy );
            } */

          var coordinates;
          var geolocation = new ol.Geolocation({
            projection: view.getProjection(),
            tracking: true
          });
          // handle geolocation error.
          geolocation.on('error', function (error) {
            var info = document.getElementById('info');
            info.innerHTML = error.message;
            info.style.display = '';
          });

          var accuracyFeature = new ol.Feature();
          geolocation.on('change:accuracyGeometry', function () {
            accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
          });

          var positionFeature = new ol.Feature();
          positionFeature.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
              radius: 6,
              fill: new ol.style.Fill({
                color: '#3399CC'
              }),
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              })
            })
          }));

          geolocation.once('change:position', function () {
            coordinates = geolocation.getPosition();
            positionFeature.setGeometry(coordinates ?
              new ol.geom.Point(coordinates) : null);
            map.getView().setCenter(coordinates);
            map.getView().setZoom(17);
          });

          new ol.layer.Vector({
            map: map,
            source: new ol.source.Vector({
              features: [accuracyFeature, positionFeature]
            })
          });
        }

        geoButton.addEventListener('click', handleGeolocation, false);
        geoButton.addEventListener('touchstart', handleGeolocation, false);

        var element = document.createElement('div');
        element.className = 'ol-unselectable ol-control geoButton';
        element.appendChild(geoButton);

        ol.control.Control.call(this, {
          element: element,
          target: options.target
        });

      };

      ol.inherits(app.getLocation, ol.control.Control);
      //Standard Initialisierung


      // Geolocation function



      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }).extend([new app.getLocation()]),
        view: view
      });

      //Display Input Datastream
    </script>
  </body>
</html>


无障碍地图
a、 斯基普林克{
位置：绝对位置；
剪辑：rect（1px，1px，1px，1px）；
填充：0；
边界：0；
高度：1px；
宽度：1px；
溢出：隐藏；
}
a、 斯基普林克：聚焦{
剪辑：自动；
高度：自动；
宽度：自动；
背景色：#fff；
填充：0.3em；
}
#地图：焦点{
轮廓：#4A74A8实心0.15em；
}
地图{
最大宽度：760像素；
最大高度：50像素；
}
.地理按钮{
顶部：80px；
左：.5em；
}
window.app={}；
var-app=window.app；
视图=新的ol.view({
中间：[0,0]，
缩放：2
});
app.getLocation=函数（选项）{
var options=opt_options | |{}；
var geoButton=document.createElement（'button'）；
geoButton.innerHTML='L'；
var handlegeLocation=函数（）{
/*var isMobile={
Android:function（）{
返回navigator.userAgent.match（/Android/i）；
},
黑莓：功能（）{
返回navigator.userAgent.match（/BlackBerry/i）；
},
iOS:函数（）{
返回navigator.userAgent.match（/iPhone | iPod | iPad/i）；
},
歌剧：功能（）{
返回navigator.userAgent.match（/Opera-Mini/i）；
},
Windows:函数（）{
返回navigator.userAgent.match（/IEMobile/i）；
},
any:函数（）{
返回（（isMobile.Android（）| | isMobile.BlackBerry（）| | isMobile.iOS（）| | isMobile.Opera（）| | isMobile.Windows（））；
}
};
if（isMobile.any（））{
地理定位。设置跟踪选项（支持高精度）；
} */
var坐标；
var geolocation=新的ol.geolocation({
投影：view.getProjection（），
跟踪：对
});
//处理地理位置错误。
geolocation.on（'error'，函数（error）{
var info=document.getElementById（'info'）；
info.innerHTML=error.message；
info.style.display=''；
});
var accuracyFeature=新的ol.Feature（）；
地理定位.on（'change:accuracyGeometry'，函数（）{
accuracyFeature.setGeometry（geolocation.getAccuracyGeometry（））；
});
var positionFeature=新的ol.Feature（）；
positionFeature.setStyle（新ol.style.style({
图片：新ol.style.Circle({
半径：6，
填充：新的ol.style.fill({
颜色：“#3399CC”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：2
})
})
}));
geolocation.once（'change:position'，函数（）{
坐标=地理位置。getPosition（）；
设置几何图形（坐标？
新ol.geom.点（坐标）：空；
map.getView（）.setCenter（坐标）；
map.getView（）.setZoom（17）；
});
新ol.layer.Vector({
地图：地图，
来源：新ol.source.Vector({
特征：[精度特征，位置特征]
})
});
}
geoButton.addEventListener（'click'，handlegeLocation，false）；
geoButton.addEventListener（'touchstart'，HandleGeLocation，false）；
var-element=document.createElement（'div'）；
element.className='ol不可选择ol控制按钮'；
元素。追加子元素（geoButton）；
控制员，控制员，呼叫（这个{
元素：元素，
target:options.target
});
};
ol.inherits（app.getLocation，ol.control.control）；
//标准初始化
//地理定位函数
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
目标：“地图”，
控件：ol.control.defaults({
AttributeOptions:/**@type{olx.control.AttributeOptions}*/({
可折叠：错误
})
}).extend（[new app.getLocation（）]），
视图：视图
});
//显示输入数据流

在普通浏览器中，它工作正常，但在我的PyQt应用程序中却不行。单击“自定义”按钮后，不会发生任何事情

我做错了什么或什么是不可能的？

添加以下行解决了我的问题：

    self.ui.w3View.page().featurePermissionRequested.connect(self.permissionRequested)

def permissionRequested(self, frame, feature):
    self.ui.w3View.page().setFeaturePermission(frame, feature, QtWebEngineWidgets.QWebEnginePage.PermissionGrantedByUser)

在post中找到并将其编辑为PyQt 5.9。

主要问题是启用权限，如果您在Firefox、Chrome等浏览器中运行，将显示一个弹出窗口，询问您是否接受地理位置权限

在这种情况下，它必须通过代码启用，为此，

QWebEnginePage

在每次需要授权时都会发出一个信号，它通过信号来实现这一点，我们将其连接到某个插槽，并使用该功能启用权限

注意：在linux中，我仍然无法使用GeoClude提供程序，错误消息如下：

未能设置地理线索定位要求。地理线索错误： org.qtproject.QtDBus.Error.InvalidObjectPath

你可以解释你所犯的错误或不想要的行为

    self.ui.w3View..page().featurePermissionRequested.connect(self.onFeaturePermissionRequested)

def onFeaturePermissionRequested(self, securityOrigin, feature):
    self.sender().setFeaturePermission(securityOrigin,
                                     QWebEnginePage.Geolocation,
                                     QWebEnginePage.PermissionGrantedByUser)