WebGIS学习笔记（二）OpenLayer+geoserver+jquery实现时间滑块控制各个朝代图层的显示

通过openlayer引用geoserver发布的矢量图，用jquery控制各个图层显示的函数，我是通过数字来控制的，1~24分别代表24个朝代，以此来写的JS函数。

定义的一些变量

var oSpanNum =1;//总的时期数
//var chaodai = ["static/jsonData/春秋.json","static/jsonData/战国.json", "static/jsonData/秦.json", "static/jsonData/西汉.json", "static/jsonData/东汉.json", "static/jsonData/曹魏.json","static/jsonData/西晋.json","static/jsonData/东晋.json","static/jsonData/刘宋.json","static/jsonData/北魏.json","static/jsonData/东魏.json","static/jsonData/北齐.json","static/jsonData/隋代.json","static/jsonData/唐.json","static/jsonData/后梁.json","static/jsonData/后唐.json","static/jsonData/后晋.json","static/jsonData/后汉.json","static/jsonData/后周.json","static/jsonData/北宋.json","static/jsonData/金.json","static/jsonData/元代.json","static/jsonData/明.json","static/jsonData/清代.json"]
var chaodainm = ["春秋","战国", "秦", "西汉", "东汉", "曹魏","西晋","东晋","刘宋","北魏","东魏","北齐","隋代","唐","后梁","后唐","后晋","后汉","后周","北宋","金","元代","明","清代"];
var chaidainme=['History:chunqiu','History:zhanguo','History:qin','History:xihan','History:donghan','History:caowei','History:xijin','History:dongjin','History:liusong','History:beiwei','History:dongwei','History:beiqi','History:sui','History:tang','History:houliang','History:houtang','History:houjin','History:houhan','History:houzhou','History:beisong','History:jin','History:yuan','History:ming','History:qing'];
var url = 'History:chunqiu';//初始化图层名
var map;
var wmslayer;
var tiled;
var vectorLayer;
var layer;
var Num;

下面是jquery。

$(document).ready(function(){
           $('.single-slider').jRange({
                from: 1,
                to: 24,
                step: 0.1,
                scale: ["春秋","战国", "秦", "西汉", "东汉", "曹魏","西晋","东晋","刘宋","北魏","东魏","北齐","隋代","唐","后梁","后唐","后晋","后汉","后周","北宋","金","元代","明","清代"],
                width: 1000,
                showLabels: false,
                snap: true
            });
           $('.single-slider').change(function() {// 滑块的值改变，运行这个函数
            oSpanNum=$(this).val();
            //alert(oSpanNum);
            changelayer();
            //滑块的值改变的话，滑块的值赋值给方框，实现动态变化
            });
        });

// 控制图层显示的js函数
//geoserver模块
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }

    function changelayer() {
        map.removeLayer(wmslayer);
        map.removeLayer(layer);
        Num=Math.round(oSpanNum-1);
        url= chaidainme[Num];
        loadgeo(url);
        document.getElementById("txt").innerHTML = chaodainm[Num];
}
    function loadgeo(URL){
        layer = new ol.layer.Vector({//增加点击高亮的矢量图层
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: "#f00"
                }),
                stroke: new ol.style.Stroke({
                    color: "#ffff00",
                    width: 3
                })
            })
        });
        wmslayer = new ol.layer.Image({//wms图层
            //extent:[114.79473845077413,34.36189456889595,122.6741768280149,38.12993904964089],
            group:"WMS",
            source:new ol.source.ImageWMS({
                url:'http://localhost:8080/geoserver/History/wms',
                wrapX: false,
                params:{
                    'LAYERS':URL,
                    'FORMAT': 'image/png',
                },
                serverType: 'geoserver',
                projection:'EPSG:4326'
            })
        });
        map.addLayer(wmslayer);
        map.addLayer(layer);
        //点击高亮响应事件
     map.on('click', function(e) {
            // 创建一个请求
            var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326', //坐标系
                featureNS: 'http://geoserver.org/history', // 注意这个值必须为创建工作区时的命名空间URI
                featurePrefix: 'History', //工作区的名称
                featureTypes: [url], //所要访问的图层
                maxFeatures: 1,
                outputFormat: 'application/json',
                //这里注意，ol4.5.6里面ol.format.filter.Intersects构造出来的WFS是1.1.0版本，这里的坐标中经纬度是反的
                filter: new ol.format.filter.Intersects("the_geom", new ol.geom.Point([e.coordinate[1], e.coordinate[0]]), "EPSG:4326")
            });//the_geom是geoserver发布图层的几何属性列的列名

            // 发送请求
            fetch('http://localhost:8080/geoserver/wfs', {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function(response) {
                return response.json();
            }).then(function(re) {
                var feas = new ol.format.GeoJSON().readFeatures(re);
                layer.getSource().clear();
               layer.getSource().addFeatures(feas)

            });
        })
}

//打开页面直接执行的函数：
function init() {/*初始执行的方法*/

    tiled =new ol.layer.Tile({
                source:new ol.source.Stamen({
                    layer: 'watercolor'
                })

            })
    map = new ol.Map({
        target:'map',
        layers:[
        ],
        view:new ol.View({
            center:[118,36],
            zoom:7,
            projection:'EPSG:4326'
        })
    });
    map.addLayer(tiled);
    changelayer();
}

html的滑块代码

<div id="map"></div>
<div class="timeslider">
    <div>
        <p id="txt">
        </p>
    </div><!--上面这部分是显示时期的方框的html-->
    <div class="slider">
        <input type="range" class="single-slider" id="slider" value="1" >
    </div>
</div>

至于css样式代码，我这里就不再记录了，大家可以按照自己喜欢的样式改~
放上效果图供大家欣赏：

标签：jquery,ol,滑块,OpenLayer,jsonData,json,static,new,History
来源： https://blog.csdn.net/weixin_43349440/article/details/118575793