通过view实现实时监测数据的实时更新展示
生活随笔
收集整理的這篇文章主要介紹了
通过view实现实时监测数据的实时更新展示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
概述
在做項目的時候，經常會有實時監測數據的地圖展示，本文通過view實現實時監測數據的實時更新展示。
分析
對于實時監測數據，有以下兩個特點：1、監測設備的空間信息不發生變化；2、監測數據會實時發生變化。基于以上兩特點，在實際的服務發布中我們可以：1、將監測設備存儲為一張表；2、實時監測數據存儲為另外一張表；3、創建view，將設備和實時監測數據關聯起來；4、通過geoserver將view以圖層的方式發布出來。
實現
china_province（監測設備）
province_people（監測值）
通過上面兩張表模擬監測設備和實時監測數據，創建viewsql如下：
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实现实时监测数据的实时更新展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 亲子编程玩Micro:bit-动力小车“
- 下一篇： 基于JavaWeb的网上书店的设计与实现