geoserver图层中的维度

原创
02/17 17:37
阅读数 112

概述

在geoserver图层发布的时候有一个tab面板叫维度,里面包含了时间和高度两个维度,本文就讲一下geoserver有关维度的内容。

效果

2015

2018.png

数据来源

本文测试数据来源于中国地震台网——历史查询 (ceic.ac.cn),查询并下载了2012年以后震级大与四级的数据。下载下来后转成csv导入到qgis中,并添加字段date,类型日期,并通过字段计算器输入公式to_date(time)给字段赋值。

geoserver发布数据

先添加shp数据源,再发布服务,发布服务的时候维度的配置如下图。
image.png

服务调用

服务发布完成后,通过openlayers进行调用测试,测试代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        .tools {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
            background: white;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="map">
    <div class="tools">
        <span id="year">2012</span>
        <input type="range" min="2012" max="2022" step="1" value="2012" oninput="changeFn(this)">
    </div>

</div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script>
    var center = [0, 0], zoom = 3;
    var osm = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var wmsSource = new ol.source.TileWMS({
        url: 'http://localhost:8086/geoserver/lzugis/wms',
        params: {
            'LAYERS': 'lzugis:eq-data',
            'TIME': '2012'
        }
    })
    var wms = new ol.layer.Tile({
        source: wmsSource
    })

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }),
        target: 'map',
        layers: [osm, wms],
        view: new ol.View({
            minZoom: 0,
            maxZoom: 18,
            center: ol.proj.fromLonLat(center),
            zoom: zoom
        })
    });

    function changeFn(obj) {
        wmsSource.updateParams({'TIME': obj.value})
        document.getElementById('year').innerText = obj.value
    }
</script>
</body>
</html>
说明:
  1. 时间维度(TIME)根据数据的精度,可精确到年、月、日、时、分、秒,例如,如果TIME的值是年的话,则展示该年的数据,如果如果TIME的值是月的话,则展示该月的数据;
  2. 高程维度(ELEVATION)跟时间维度类似;

本文同步分享在 博客“牛老师讲GIS”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部