标签：jquery ol 滑块 OpenLayer jsonData json static new History

通过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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。