openlayers项目使用小结-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>gis</title>
    <!--纳米进度条-->
    <!--<link rel="stylesheet" href="${rc.contextPath}/npro/style.css">-->
    <link rel="stylesheet" href="${rc.contextPath}/npro/nprogress.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="${rc.contextPath}/npro/nprogress.js"></script>
    <script>if(location.hostname.match(/ricostacruz\.com$/)){var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-20473929-1"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()}</script>
    <!--纳米进度条-->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.4/css/ol.css" type="text/css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/gis.css?v=2.0">
    <!--地图切换所用-->
    <link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/layerswitcherimagecontrol.css">
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/style.css?v=2.0">

    <style>
        #info{position: absolute; top:0px; left: 0px; width: 300px; height: 300px; display: none; background: #000}
        .ol-unselectable{ background: #fff;}
        .ol-zoom{top:1em;}
        .ol-layerswitcher-image button
        {   background-color: #7593b9;
            background-image: url("${rc.contextPath}/statics/img/layer(1).png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            float: right;
            height: 25px;
            width: 25px;
            display:none;
        }
        .ol-control{ padding: 1px;}
    </style>
</head>
<body>
<div class="gis">
    <div id="map" class="map"></div>
</div>
<script src="${rc.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${rc.contextPath}/statics/libs/jquery.cookie.js"></script>
<script src="${rc.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="https://openlayers.org/en/v4.3.4/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script>
<script src="${rc.contextPath}/statics/libs/layerswitchercontrol.js"></script>
<script src="${rc.contextPath}/statics/libs/layerswitcherimagecontrol.js"></script>
<script src="${rc.contextPath}/statics/libs/getpreview.js"></script>
<script src="${rc.contextPath}/js/sys/gis.js?_v1.0"></script>

<script>
    if ($.cookie("pid") == "") {
        location.reload()
    } else {
        $(function () {
            //     纳米进度条
            $('body').show();
            $('.version').text(NProgress.version);
            NProgress.start();
            <!-- 纳米进度条-->
            $(".ol-collapsed").css("display","block")
            var pid = $.cookie("pid");
//            初始化中心所用变量
            var tian_di_tu_satellite_layer = new ol.layer.Tile({
                title: "影像及标注",
                visible: true,
                preview: "",
                source: new ol.source.XYZ({
                    url: 'http://t{0-7}.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                })
            });
            var tian_di_tu_biaozhu_layer = new ol.layer.Tile({
                title: "影像及标注",
                visible: true,
                preview: "",
                source: new ol.source.XYZ({
                    url: 'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
                })
            });

            var zj = localStorage.getItem("zj")
            var params_gydy = {LAYERS: 'dx:dxgydySQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
            var params_zj = {LAYERS: 'dx:dx_zjSQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
            var params_cj = {LAYERS: 'dx:dx_cjSQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
            var params_cg = {LAYERS: 'dx:dx_cgSQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
            var params_tuxian = {LAYERS: 'dx:dx_tuxianSQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
            var params_road = {LAYERS: 'dx:dx_road', FORMAT: 'image/png'};
            var params_progres = {LAYERS: 'dx:dx_progresSQL', FORMAT: 'image/png', viewparams: "zhen:N'" + zj + "'"};
//            var params_bzc = {LAYERS: 'dx:bacgydy', FORMAT: 'image/png'};
            var gydySQL_source = new ol.source.TileWMS({
                title: 'Thunderforest - OpenCycleMap',
                type: 'base',
                visible: false,
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_gydy,
                serverType: 'geoserver'
            });

            var zjSQL_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_zj,
                serverType: 'geoserver'
            });
//            console.log(zjSQL_source.getPreview([116.472, 39.74266],150))
            var cjSQL_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_cj,
                serverType: 'geoserver'
            });

            var cgSQL_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_cg,
                serverType: 'geoserver'
            });
            var tuxianSQL_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_tuxian,
                serverType: 'geoserver'
            });
            var road_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: {'LAYERS': 'dx:dx_road', 'VERSION': '1.1.0'},
                serverType: 'geoserver'
            });
            var road_source2 = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: {'LAYERS': 'dx:dx_roads', 'VERSION': '1.1.0'},
                serverType: 'geoserver'
            });

            var progresSQL_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_progres,
                serverType: 'geoserver'
            });
           /* var bzc_source = new ol.source.TileWMS({
                url: 'http://139.224.52.12:8080/geoserver/dx/wms',
                params: params_bzc,
                serverType: 'geoserver'
            });*/

            var zjLayer = new ol.layer.Tile({
                title: '',
                visible: true,
                source: zjSQL_source,
                displayInLayerSwitcher: false,
//                控制切换小图标
                preview: "",
            });

            var cjLayer = new ol.layer.Tile({
                title: '',
                visible: true,
                source: cjSQL_source,
                displayInLayerSwitcher: false,
                preview: "",
            });

            var cgLayer = new ol.layer.Tile({
                title: '',
                type: 'base',
                preview: "",
                visible: false,
                source: cgSQL_source
            });

            var gydyLayer = new ol.layer.Tile({
                title: '',
                type: 'base',
                preview: "",
                displayInLayerSwitcher: false,
                visible: true,
                source: gydySQL_source
            });
            var tuxianLayer = new ol.layer.Tile({
                title: '',
                type: 'base',
                preview: "",
                visible: true,
                source: tuxianSQL_source
            });
            var roadLayer = new ol.layer.Tile({
                title: '',
//                type: 'base',
                preview: "",
                visible: true,
                displayInLayerSwitcher: false,
                source: road_source
            });
            var roadLayer2 = new ol.layer.Tile({
                title: '',
//                type: 'base',
                preview: "",
                visible: true,
                displayInLayerSwitcher: false,
                source: road_source2
            });

            var progresLayer = new ol.layer.Tile({
                title: '',
                type: 'base',
                preview: "",
                visible: true,
                source: progresSQL_source
            });
            /*var bzcLayer = new ol.layer.Tile({
                title: '',
                type: 'base',
                preview: "",
                visible: true,
                source: bzc_source
            });*/

            var view = new ol.View({
                center: [116.472, 39.74266],
                zoom: 15,
                projection: ol.proj.get("EPSG:4326"),
                minZoom: 1,
                maxZoom: 18
            });
            var yx = new ol.layer.Group({
                title: "",
                layers: [tian_di_tu_satellite_layer, tian_di_tu_biaozhu_layer,],
                visible:false,
                });

                var map = new ol.Map({
//                layers: [tian_di_tu_satellite_layer,tian_di_tu_biaozhu_layer,zjLayer,cjLayer, gydyLayer,cgLayer],
                    layers: [yx,tuxianLayer,roadLayer,roadLayer2,progresLayer,gydyLayer,cgLayer,cjLayer, zjLayer],
                    target: 'map',
                    view: view,

                });

            $(".load").css("display","none")

//            图层切换
            map.addControl(new ol.control.LayerSwitcherImage());
//            地图定位
            $.ajax({
                type: "post",
                url: "../sys/proj/mapCenter/" + pid,
                async: true,
                dataType: "json",
                success: function (r) {
                    try {
                        var coors = new Array(r.x, r.y);
                        view.setCenter(coors);
                        view.setZoom(13);
                        //  纳米进度条
                        NProgress.done();
                    } catch (err) {
                        console.log(err);
                    }

                },
                error: function (err) {
                    console.log(err)
                }
            });
        })
    }
</script>
<!--纳米进度条-->
<script>var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>

</body>
</html>