在做项目的时候,经常会有实时监测数据的地图展示,本文通过view实现实时监测数据的实时更新展示。
对于实时监测数据,有以下两个特点:1、监测设备的空间信息不发生变化;2、监测数据会实时发生变化。基于以上两特点,在实际的服务发布中我们可以:1、将监测设备存储为一张表;2、实时监测数据存储为另外一张表;3、创建view,将设备和实时监测数据关联起来;4、通过geoserver将view以图层的方式发布出来。
通过上面两张表模拟监测设备和实时监测数据,创建view
sql如下:
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;
在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),再看效果: