sysu_emap/src/main/webapp/WEB-INF/jsp/comm/admin2.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fastboot" prefix="fb"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<fb:ui src="base/main2">

    <fb:property name="title"></fb:property>
<%--    <fb:script type="text/javascript" src='${base}/static/openlayers/proj4.js'></fb:script>--%>


    <fb:script type="text/javascript" src='${base}/static/openlayers/proj4.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/openlayers/ol.js'></fb:script>
    <fb:script type="text/javascript" src="${base}/static/ol-ext/ol-ext.js"></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/openLayers.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/styleFunction.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/costom.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/admin2.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/system.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/js/tools/analyse.js'></fb:script>
    <fb:script type="text/javascript" src='${base}/static/timeaxis/timeAxis_new.js'></fb:script>
    <fb:css href="${base}/static/js/ztree/css/zTreeStyle/zTreeStyle.css"></fb:css>
    <fb:script src="${base}/static/js/ztree/js/jquery.ztree.core.js"></fb:script>
    <fb:script src="${base}/static/js/ztree/js/jquery.ztree.excheck.js"></fb:script>
    <fb:script src="${base}/static/js/ztree/js/jquery.ztree.exedit.js"></fb:script>
    <fb:css href="${base}/static/js/city-picker/city-picker.css"></fb:css>
    <fb:script src="${base}/static/js/city-picker/city-picker.data.js"></fb:script>

    <fb:script src="${base}/static/package/geo_server_context.js"></fb:script>
    <fb:script src="${base}/static/package/plough_land.js"></fb:script>
    <fb:script src="${base}/static/package/zsjc.js"></fb:script>
    <fb:script src="${base}/static/package/qyz.js"></fb:script>
    <fb:script src="${base}/static/package/cityland.js"></fb:script>


    <fb:script type="text/javascript">
        <script>
            proj4.defs("EPSG:4526","+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
            ol.proj.proj4.register(proj4);
            let geoServerContext = null
            var popup = null;
            var popup2 = null;
            var currentPicker = null;
            var wmtsData = {'vector_wmts':${vector_wmts},'img_wmts':${img_wmts},'qyz':${qyz},'qysdcj':${qysdcj},'ext1':${ext1 == "" ? "{}" : ext1}
                ,'ext2':${ext2 == "" ? "{}" : ext2}
            }
            var map,view1,tool,overLay;
            var gjson = new ol.format.GeoJSON()

            var leftIframeObj = adm2.leftIframeObj,landObj = adm2.landObj, kcObj = adm2.kcObj;

            projection = ol.proj.get("EPSG:4326");
            layui.use([ 'tool', 'form', 'table','city'], function() {
                var form = layui.form;
                tool = layui.tool;
                var city = layui.city
                var target = "map"

                view1 = new ol.View({
                    center: [117.0498, 23.4073],
                    projection: projection,
                    zoom: 18
                })

                map = new ol.Map({
                    view: view1,
                    target: target
                });
                geoServerContext = new GeoServerContext({currentMap: map,currentView: view1,projection: projection},
                "${geoserver}")


                //初始化鼠标位置控件
                var mousePositionControl = new ol.control.MousePosition({
                    //样式类名称
                    projection: projection,
                    className:"coord-box",
                    //投影坐标格式，显示小数点后边多少位
                    coordinateFormat: ol.coordinate.createStringXY(4),
                    //目标容器
                    target:document.getElementById("coord-box")
                });
                //将鼠标位置坐标控件加入到map中
                map.addControl(mousePositionControl);

                //默认打开的底图
                wmtsData["img_wmts"]["layerObj"] = crtLayerWMTS(wmtsData["img_wmts"],1,projection);
                wmtsData["vector_wmts"]["layerObj"] = crtLayerWMTS(wmtsData["vector_wmts"],1,projection);
                map.addLayer(wmtsData["img_wmts"]["layerObj"])
                map.addLayer(wmtsData["vector_wmts"]["layerObj"])


                var timeList = [
                    {name:'第一次',time:'2019'},
                    {name:'第二次',time:'2020'},
                    {name:'第三次',time:'2021'},
                    {name:'第四次',time:'2022'},
                    {name:'第五次',time:'2023'},
                    {name:'第六次',time:'2024'},
                    {name:'第七次',time:'2025'},
                    {name:'第八次',time:'2026'},
                ];//参数列表
                var param = {
                    data: timeList,
                    id: 'cxTime',
                    width: '150px',
                    index: 0
                }
                new oTimeAxios(param);


                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback:{
                        onClick(e, treeId, treeNode){
                            if(treeNode.level == 0){
                                if (treeNode.open) {
                                    zTree.expandNode(treeNode, false);
                                }else{
                                    zTree.expandNode(treeNode, true);
                                }
                            }
                            let action;
                            if(treeNode.Action){
                                action = geoServerContext.createAction(treeNode.id, treeNode.Action)
                                geoServerContext.stopActions()
                                action.start()
                            }
                        }
                    }
                };

                var zNodes =[
                    { id:1, pId:0, name:"耕地地块",icon :"${base}/static/images/cloudy20x20.png", Action: CityLandAction},
                    { id:2, pId:0, name:"作物类型", icon :"${base}/static/images/cloudy20x20.png"},
                    { id:21, pId:2, name:"种植结构",icon :"${base}/static/images/tree-point.png", Action: QyzAction},
                    { id:22, pId:2, name:"水稻",icon :"${base}/static/images/tree-point.png"},
                    { id:23, pId:2, name:"油菜",icon :"${base}/static/images/tree-point.png"},
                    { id:24, pId:2, name:"玉米",icon :"${base}/static/images/tree-point.png"},
                    { id:25, pId:2, name:"柑橘",icon :"${base}/static/images/tree-point.png"},
                    { id:3, pId:0, name:"长势检测",icon :"${base}/static/images/cloudy20x20.png", Action: ZsjcAction},
                    { id:4, pId:0, name:"产量预估",icon :"${base}/static/images/cloudy20x20.png"},
                    { id:5, pId:0, name:"农业灾害风险",icon :"${base}/static/images/cloudy20x20.png"},
                    { id:6, pId:0, name:"土壤要素",icon :"${base}/static/images/cloudy20x20.png"},
                    { id:7, pId:0, name:"适应性评估",icon :"${base}/static/images/cloudy20x20.png"}
                ];
                var zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                // 城市赋值
                currentPicker = new city("#city-picker", {
                    getValListener: function(item){
                        if(geoServerContext.actions["3"]){
                            geoServerContext.actions["3"].fit(item.code)
                        }
                    }});
                geoServerContext.createAction("3", QyzAction).start();
                $("#gray-shade").hide()
            });



        </script>
    </fb:script>

    <fb:layout>
        <link href="${base}/static/css/ol.css" rel="stylesheet"/>
        <link href="${base}/static/css/admin2.css" rel="stylesheet"/>
        <link href="${base}/static/ol-ext/ol-ext.css" rel="stylesheet"/>
        <link href="${base}/static/timeaxis/timeAxis.css" rel="stylesheet"/>
        <!-- 底部地图 -->
        <div id="map" class="bottom-map">
            <div class="head-box no-events">
                <div class="box-left">
                    <div class="label-bg general-font1 date"><img height="25" width="25" src="${base}/static/images/cloudy1.png" />星期六 2022/08/20</div>
                </div>
                <div class="box-center">
                    <h1 class="general-font2 inline">广东省</h1><h3 class="general-font1 inline">农业专题信息一张图</h3>
                </div>
                <div class="box-right">
                    <div class="label-bg general-font1 logout-info">
                        <img height="25" width="25" src="${base}/static/images/boy-2.png" />
                            ${user.nickname},
                            <a class="yse-events" href="${base}/logout">退出</a>
                    </div>
                </div>
            </div>
            <div class="timeline-box no-events">
                <div class="cx-time-main" id="cxTime"></div>
            </div>

            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-title" class="popup-title"></div>
                <div id="popup-content" class="popup-context" ></div>
            </div>

        </div>
        <!-- 底部地图 -->
        <!-- 背景层 -->
        <div id="backdrop-layer" class="backdrop-layer no-events">
        </div>
        <!-- 背景层 -->
        <!-- 左边层 -->
        <div id="left-layer" class="left-layer no-events">
            <ul id="treeDemo" class="ztree no-events"></ul>
            <div id="search-box" class="search-box">
                <div id="select-region" class="select-region yse-events">
                    <input placeholder="全境"  id="city-picker" readonly type="text">
                </div>
            </div>
        </div>
        <!-- 左边层 -->
        <!-- 右下角层 -->
        <div id="right-bottom-box" class="right-bottom-box no-events">
            <div id="coord-box"></div>
            <div id="cutline" class="cutline">
                <div class="cutline-close"><a href="#" class="yse-events">x</a></div>
                <div class="cutline-title">图例</div>
                <div id="cutline-items" class="cutline-items">
                </div>
            </div>
        </div>
        <!-- 右下角层 -->
        <!-- 灰色遮罩 -->
        <div id="gray-shade" class="gray-shade">
        </div>
        <!-- 灰色遮罩 -->


        <link href="${base}/static/js/ztree/css/demo.css" rel="stylesheet"/>
    </fb:layout>
</fb:ui>