<%@ 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/demo.css"></fb:css>
    <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: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");

            var popup = null;
            var popup2 = 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;

            var projection = new ol.proj.Projection({
                code: 'EPSG:3857',
                units: 'degrees',
                global: false
            });

            layui.use([ 'tool', 'form', 'table'], function() {
                var form = layui.form;
                tool = layui.tool
                var target = "map"

                view1 = new ol.View({
                    center: [113.036779, 23.704188],
                    projection: projection,
                    zoom: 12
                })

                let vectorSource = new ol.source.Vector();
                // 矢量地图
                let vectorLayer = new ol.layer.Vector({
                    style: colorStyle,
                    zIndex:1000,
                    source: vectorSource
                });

                map = new ol.Map({
                    view: view1,
                    target: target,
                    layers: [vectorLayer]
                });


                //默认打开的底图
                wmtsData["img_wmts"]["layerObj"] = crtLayerWMTS(wmtsData["img_wmts"],1);
                map.addLayer(wmtsData["img_wmts"]["layerObj"])
                form.val('layers', {
                    "img_wmts": true //开关状态
                });

                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
                        }
                    }
                };

                var zNodes =[
                    { id:1, pId:0, name:"父节点1 - 展开", open:true},
                    { id:11, pId:1, name:"父节点11 - 折叠"},
                    { id:111, pId:11, name:"叶子节点111"},
                    { id:112, pId:11, name:"叶子节点112"},
                    { id:113, pId:11, name:"叶子节点113"},
                    { id:114, pId:11, name:"叶子节点114"},
                    { id:12, pId:1, name:"父节点12 - 折叠"},
                    { id:121, pId:12, name:"叶子节点121"},
                    { id:122, pId:12, name:"叶子节点122"},
                    { id:123, pId:12, name:"叶子节点123"},
                    { id:124, pId:12, name:"叶子节点124"},
                    { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
                    { id:2, pId:0, name:"父节点2 - 折叠"},
                    { id:21, pId:2, name:"父节点21 - 展开", open:true},
                    { id:211, pId:21, name:"叶子节点211"},
                    { id:212, pId:21, name:"叶子节点212"},
                    { id:213, pId:21, name:"叶子节点213"},
                    { id:214, pId:21, name:"叶子节点214"},
                    { id:22, pId:2, name:"父节点22 - 折叠"},
                    { id:221, pId:22, name:"叶子节点221"},
                    { id:222, pId:22, name:"叶子节点222"},
                    { id:223, pId:22, name:"叶子节点223"},
                    { id:224, pId:22, name:"叶子节点224"},
                    { id:23, pId:2, name:"父节点23 - 折叠"},
                    { id:231, pId:23, name:"叶子节点231"},
                    { id:232, pId:23, name:"叶子节点232"},
                    { id:233, pId:23, name:"叶子节点233"},
                    { id:234, pId:23, name:"叶子节点234"},
                    { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
                ];
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);


            });



        </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>
        <!-- 底部地图 -->
        <!-- 底部层 -->
        <div id="bottom-layer" class="bottom-layer no-events">
        </div>
        <!-- 底部层 -->
        <!-- 左边层 -->
        <div id="left-layer" class="left-layer no-events">
            <ul id="treeDemo" class="ztree yse-events"></ul>
        </div>


    </fb:layout>
</fb:ui>