概述
在做项目的时候，经常会有实时监测数据的地图展示，本文通过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 .geomFROMchina_province A,province_people BWHEREA .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": ['/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}','/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}','/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），再看效果：
