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

lzugis

发布于 2020-12-01 10:53:46

2.7K0

发布于 2020-12-01 10:53:46

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

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

分析

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

实现

china_province（监测设备）

province_people（监测值）

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

CREATE VIEW china_prov_people AS 
SELECT
	A .dzm,
	A . NAME,
	CAST (B.popu AS INTEGER),
	A .geom
FROM
	china_province A,
	province_people B
WHERE
	A .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），再看效果：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

缓存

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

缓存

登录后参与评论

0 条评论

热度