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', // 注意这个值必须为创建工作区时的命名空间URIfeaturePrefix: '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样式代码，我这里就不再记录了，大家可以按照自己喜欢的样式改~
放上效果图供大家欣赏：