概述

在做项目的时候，经常会有实时监测数据的地图展示，本文通过view实现实时监测数据的实时更新展示。

分析

对于实时监测数据，有以下两个特点：1、监测设备的空间信息不发生变化；2、监测数据会实时发生变化。基于以上两特点，在实际的服务发布中我们可以：1、将监测设备存储为一张表；2、实时监测数据存储为另外一张表；3、创建view，将设备和实时监测数据关联起来；4、通过geoserver将view以图层的方式发布出来。

实现

china_province（监测设备）

province_people（监测值）

通过上面两张表模拟监测设备和实时监测数据，创建viewsql如下：

CREATE VIEW china_prov_people AS
SELECTA .dzm,A . NAME,CAST (B.popu AS INTEGER),A .geom
FROMchina_province A,province_people B
WHEREA .dzm = B.dzm;

china_prov_people

在geoserver添加数据源，并将china_prov_people发布成图层。

此处，为了能够在mapboxGL中调用，同时勾选发布了矢量切片服务。

注意：在发布切片服务的时候需要设置一下缓存级别都为0，不然会有缓存，导致切片调用的时候无法实时更新。

最后，页面调用，代码如下：

<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title>geoserver tile</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><link href="lib/mapbox-gl.css" rel="stylesheet" /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }.tools {position: absolute;top: 20px;right: 20px;z-index: 9;background: white;padding: 10px;}</style>
</head>
<body>
<div id='map'></div>
<script src="lib/mapbox-gl.js"></script>
<script src="../js/lib/jquery/1.11.2/jquery.min.js"></script>
<script>var rootPath = 'http://localhost:63342/learn-demo/mapbox/lib/';var mapStyle = {"version": 8,"name": "Dark","sources": {"XYZTile": {"type": "raster","tiles": ['http://mt0.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}','http://mt1.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}','http://mt2.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',],"tileSize": 256},'china_prov_people': {'type':'vector','scheme':'tms','tiles':['http://localhost:8081/geoserver/gwc/service/tms/1.0.0/lzugis%3Achina_prov_people@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']}},"sprite": rootPath + "sprite","glyphs": rootPath + "fonts/{fontstack}/{range}.pbf","layers": [{"id": "XYZTile","type": "raster","source": "XYZTile","minzoom": 0,"maxzoom": 22},{'id': 'china_prov_people-fill','source': 'china_prov_people','source-layer': 'china_prov_people','type': 'fill','paint': {'fill-color': ['interpolate',['linear'],['get', 'popu'],100, '#9BFF69',1000, '#68E0E8',3000, '#A880FF',6000, '#FFD273',10000, '#E86D68'],'fill-opacity': 0.8}},{'id': 'china_prov_people-boundry','source': 'china_prov_people','source-layer': 'china_prov_people','type': 'line','paint': {'line-color': '#f6f6f6','line-width': 1.5}}]};map = new mapboxgl.Map({container: 'map',maxZoom: 18,minZoom: 0,zoom: 3.6,center: [104.578, 36.903],style: mapStyle,attributionControl: false});map.on('click', function (e) {const coords = e.lngLat;const r = [[e.point.x - 5, e.point.y - 5],[e.point.x + 5, e.point.y + 5],];const features = map.queryRenderedFeatures(r, {});console.log(features);})
</script></body>
</html>

实现后如下：

我们将内蒙古（150000）的数据改一下（改之前2376，改之后10000），再看效果：

通过view实现实时监测数据的实时更新展示相关推荐

最新ai创作系统CHATGPT镜像系统源码+支持GPT4.0+支持ai绘画(MJ)+实时语音识别输入+免费更新版本
AI系统CHATGPT镜像程序源码+支持GPT4+支持ai绘画+实时语音识别输入+免费更新版本一.AI创作系统二.系统介绍三.系统程序下载四.安装教程五.主要功能展示六.更新日志一.AI ...
实时对讲是怎么发起的_QQ可实时显示手机电量并展示给好友近半投票者支持该功能...
近日,手机QQ上线新功能,可将在线状态设置为"显示电量",并且,QQ好友可看到电量状态. 就此,隐私护卫队发起投票活动,近半的投票者支持上述功能. ·· 1 ·· 4%的投票者经常 ...
实时录制视频,实时去除人_录制实时演示，第2部分：软件设置
实时录制视频,实时去除人如果您是进行现场会议的团队的一员,则有可能要录制发言人的演讲并在网上发布. 幸运的是,这要归功于开源软件和现成的硬件,这在今天是容易且相对便宜的. 有关录制实时演示文稿的本系 ...
实时数据架构实时数据仓库，你到底了解多少？
随着互联网的发展进入下半场,数据的时效性对企业的精细化运营越来越重要, 商场如战场,在每天产生的海量数据中,如何能实时有效的挖掘出有价值的信息, 对企业的决策运营策略调整有很大帮助.此外,随着 5G ...
java制作h5视频聊天_JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路。...
JAVA实现大华摄像头WEB方式实时显示视频,H5界面展示方式思路. 2018-09-17 问题:大华IPC枪型摄像头需要在WEB中显示实时监控视频,官方提供的SDK只有C#的桌面程序访问方式. 解决 ...
css3获取当前时间并显示,实时获取当前时间并展示在页面上
简介实时获取当前时间并展示在页面上,是很多地方常用的:在页面中做此展示以便查看时间.本文使用js通过一个小的demo实现效果. 完整Code 实时展示当前时间 #time { width: 60%; ...
QNX系统的实时性分析-实时性能测试标准
锋影 e-mail:174176320@qq.com QNX的优势在于过了车规级ASIL-D, 符合ISO-26262的标准,分布式操作系统. 其在汽车领域和轨道交通领域大有应用,其系统兼容POSIX ...
广州实时公交深圳实时公交东莞实时公交上海实时公交北京实时公交杭州实时公交接口API实现
全国实时公交查询API接口,查询车来了实时公交接口,公交车到哪,包含了(广州实时公交深圳实时公交东莞实时公交上海实时公交北京实时公交杭州实时公交成都实时公交) 接口功能: 1.公交线路 2.实时公交 ...
python同花顺股票实时数据_web实时股票数据展示
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 所有这些都是实时发生的,并推送到仪表板供用户评估事物和行为. 最终,为了能够从任 ...

通过view实现实时监测数据的实时更新展示

概述

分析

实现

china_province（监测设备）

province_people（监测值）

china_prov_people

通过view实现实时监测数据的实时更新展示相关推荐

最新文章

热门文章