作者: 狐狸家的鱼

Github: 八至

本文链接:QML与 HTML通信—实现QML中点击功能按钮在地图上画图

一、HTML-map

        var drarGraphic;
var drawType;function addDrawInteraction(){
var geometryFunction;
console.log(drawType);
if(drawType !== ''){
if (drawType === 'RecTangle') {
drawType = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
drarGraphic = new ol.interaction.Draw({
type:drawType,
source:vectorSource,//数据源
geometryFunction: geometryFunction
});
map.addInteraction(drarGraphic);//添加画图功能在地图中
}
};

二、QML

1.创建WebChannel

WebControl.qml,此qml页面为创建webchannel

import QtQuick 2.7
import QtWebChannel 1.0
QtObject {
//一个具有属性、信号和方法的对象——就像任何普通的Qt对象一样
    id: mapController
    WebChannel.id: "content"//ID将作为在WebEngineView端的已知对象
  //信号
    signal drawGraphic(string type)         //画图
}
 

2.将ID分配给WebEngineView,并在该通道注册QtObject的ID。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtWebEngine 1.3
import QtWebChannel 1.0
WebControl {//WebControl.qml作为组件
id: map;
}
WebEngineView {
id: mapView_1;
anchors.fill: parent;
url: "./Map.html";//html的url地址
webChannel: WebChannel {
registeredObjects: [map];//注册ID
}
}

3.QML与HTML交互

(1)在HTML端引入WebChannel的JavaScript库

<script type="text/javascript" src="qwebchannel.js"></script>

(2)在windows.onload()事件上创建QWebChannel,并获取后端对象

window.onload =() =>{
new QWebChannel(qt.webChannelTransport, (channel)=> {
var content = channel.objects.content;//自定义
}

(3)html调用QWebChannel的方法,连接到它的信号并访问它的属性

window.onload =() =>{
new QWebChannel(qt.webChannelTransport, (channel)=> {
var content = channel.objects.content;//自定义
//画图
content.drawGraphic.connect((type)=>{//连接WebControl.qml中的drawGraphic(string type)信号
drawType = type;
map.removeInteraction(drarGraphic);
addDrawInteraction();
}); }

(4)qml中画图按钮调用信号

//画线段 这里只贴了画直线的代码 其他画图按钮调用信号方法一样的
BorderButton{
width: right.width/9;
height: btnHeight;
borderbtnText:"Line";
onClicked: {
var type = 'LineString';
console.log('clicked drawLine');
map.drawGraphic(type);
}
}

OpenLayers学习笔记(二)— QML与HTML通信之画图的更多相关文章

  1. OpenLayers学习笔记(三)— QML与HTML通信之 地图上点击添加自由文本

    实现在地图随意点击,弹出文本输入框,输入任意文字,完成自由文本添加的功能 作者: 狐狸家的鱼 GitHub:八至 本文链接:地图上点击添加自由文本 关于如何QML与HTML通信已经在上一篇文章 QML ...

  2. qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

    原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...

  3. OpenLayers学习笔记(四)— QML显示html中openlayers地图的坐标

    GitHub:八至 作者:狐狸家的鱼 本文链接:实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML var coord; ...

  4. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  5. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  6. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  7. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  8. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  9. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  10. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

随机推荐

  1. Angular 双向数据绑定

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  2. C# Note32: 查漏补缺

    (1)Using的三种使用方式 (2)C#详解值类型和引用类型区别 (3)c#中字段(field)和属性(property)的区别 (4)C#中的 int? int?:表示可空类型,就是一种特殊的值类 ...

  3. springmvc中model可以封装的数据类型

    查看源码可以知道,model中可以存放的数据类型 Model addAttribute(String var1, @Nullable Object var2); Model addAttribute( ...

  4. CDH 6.0.1 集群搭建 「Before install」

    从这一篇文章开始会有三篇文章依次介绍集群搭建 「Before install」 「Process」 「After install」 继上一篇使用 docker 部署单机 CDH 的文章,当我们使用 d ...

  5. python学习笔记(2)--基本语法元素

    来看一个非常简单的温度转换程序 #Tempconvert.py tempstr = input("输入:") if tempstr[-1] in ['F', 'f']: C = ( ...

  6. 利用Python制作简单的小程序:IP查看器

    前言 说实话,查看电脑的IP,也挺无聊的,但是够简单,所以就从这里开始吧.IP地址在操作系统里就可以直接查看.但是除了IP地址,我们也想通过IP获取地理地址和网络运营商情况.IP地址和地理地址并没有固 ...

  7. 如何在mac下安装php

    步骤如下: 1.下载php源码并解压 2.进入php源码并configure 3.安装openssl 4.sudo make及make test 5.sudo make install 具体命令如下: ...

  8. Yii的数值比较验证器

    该验证器比对两个特定输入值之间的关系 是否与 operator 属性所指定的相同. compareAttribute:用于与原属性相比对的属性名称. 当该验证器被用于验证某目标属性时, 该属性会默认为 ...

  9. maven项目 报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    ssm的项目如果在mapper.xml  mapper接口 配置没问题的情况下  项目依然报org.apache.ibatis.binding.BindingException: Invalid bo ...

  10. JS 单线程和事件循环

    Js 是单线程,js代码从上到下依次执行,比如我们写了两个函数,肯定是上面的函数先执行,下面的函数后执行.但是这种单线程有一个非常大的问题,那就是遇到耗时的任务,后面的任务只能等待它执行完,才能进行. ...