qml项目四----可视化面板----地图部分

锦亦之2233

已于 2023-07-11 16:19:40 修改

阅读量316

点赞数

分类专栏： qml 文章标签： qt 前端 echarts javascript 信息可视化

于 2023-06-30 12:21:02 首次发布

本文链接：https://blog.csdn.net/jinyizhi2233/article/details/131473862

版权

qml 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

所有部分的均已经撰写完成。

分为四个部分：

衔接：

第一部分：

(20条消息) qml项目（一）--------数据可视化面板（qml+echarts）_锦亦之2233的博客-CSDN博客

第二部分：

(20条消息) qml项目----------数据可视化面板（第二部分）_面板数据可视化_锦亦之2233的博客-CSDN博客

第三部分：(20条消息) qml项目---可视化面板（第三部分）--使用echarts以及qchart_echarts qml_锦亦之2233的博客-CSDN博客

第四部分：(20条消息) qml项目四----可视化面板----地图部分_锦亦之2233的博客-CSDN博客

1、第四部分的地图显示

效果：

地图部分是怎么制作的，其实跟图表部分类似。

首先你要保证你html中能够正常展示。

地图的显示使用的是：jquery.js

我们可以看到DataV.GeoAtlas地理小工具系列 (aliyun.com)提供了地图的json文件，我们需要的就是把这个jion文件中地图信息读取出来。

我们来看一下html中的写法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $.get('https://geo.datav.aliyun.com/areas_v3/bound/341100_full.json', function (cZjson) {
        echarts.registerMap('滁州', cZjson);
        var chart = echarts.init(document.getElementById('main'));
        
        option = {
            title: {
                text: '四色预警',
                x:'center'
            },
            dataRange:{
            	min:0,
            	max:500,
            	text:['高','低'],
            	realtime:true,
            	calculable:true,
            	color:['orangered','yellow','green']
            },
            series:[
            	{
            		name:'犯罪数量',
            		type:'map',
            		map:'滁州',
            		mapLocation:{
            			y:60
            		},
            		itemSytle:{
            			emphasis:{label:{show:false}}
            		},
            		data:[
            			{name:'琅琊区',value:700},
            			{name:'南谯区',value:600},
            			{name:'定远县',value:500},
            			{name:'凤阳县',value:400},
            			{name:'明光市',value:300},
            			{name:'来安县',value:200},
            			{name:'天长市',value:100}
            		]
            	}
            ],
            
        };
        chart.setOption(option);
});
    </script>
</body>
</html>

同样的，在qml中，这是中间部分的代码：

import QtQuick 2.15
 import QtWebEngine 1.5

Rectangle {

    width:a.width*0.5
    height:c.height
    color: Qt.rgba(0, 0, 255, 0)

    WebEngineView {
                id: chartview02
                width:parent.width
                height:parent.height
                backgroundColor: "transparent"
                anchors.centerIn: parent
                settings.javascriptEnabled : true
                settings.pluginsEnabled:true
                url:"qrc:/html/map.html"
            }


}

这样地图就可以显示了。

锦亦之2233

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
qml项目四----可视化面板----地图部分

提供了地图的json文件，我们需要的就是把这个jion文件中地图信息读取出来。地图部分是怎么制作的，其实跟图表部分类似。首先你要保证你html中能够正常展示。地图的显示使用的是：jquery.js。这样地图就可以显示了。
复制链接

扫一扫