{% extends "index/baseTemp.html" %} {% block title %}
<title>主题浏览</title>
{% endblock %} {% block blink %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ol4/ol.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ol4/layerswitchercontrol.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/cropper/cropper.min.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/themeSlice/themeView.css"> {% endblock %} {% block bscript %}
<script src="{{ pathPrefix }}/plugins/ol4/ol.js"></script>
<script src="{{ pathPrefix }}/plugins/ol4/layerswitchercontrol.js"></script>
<script src="{{ pathPrefix }}/plugins/ol4/proj.js"></script>
<script src="{{ pathPrefix }}/plugins/cropper/cropper.min.js"></script>
<script src="{{ pathPrefix }}/js/common/map2dTools.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/themeSlice/themeView.js"></script>
<script src="{{ pathPrefix }}/js/common/selectBaseMap.js"></script>
{% endblock %} {% block centent %}
<div id="map" style="overflow: hidden;">
    <!-- 返回主题区域 -->
    <div id="home" title="重置位置"><i class="glyphicon glyphicon-home"></i></div>

    <!-- 返回主题区域 -->
    <div id="bg" title="设置主题封面"><i class="glyphicon glyphicon-camera"></i></div>

    <!-- 坐标显示 -->
    <div id="mouse-position" class="mouse-position-wrapper noselect"></div>

    <!-- 发布地址 -->
    <div id="api_btn" class="clearfix hidden noselect" title="发布地址">地</div>

    <div id="api_tip">
        <p style="font-weight: 600;margin-bottom: 10px;">arcgis接入方法:</p>
        <p style="margin-bottom: 5px;">在arcgis中添加wmts服务器</p>
        <p>服务地址：</p>
        <p class="path" style="margin-bottom: 5px;word-break: break-word;"></p>
        <p>图层名称：<span class="name"></span></p>
    </div>

    <div id="time_btn" title="时间轴">时</div>

    <!-- 时间轴 -->
    <div id="time_axis" class="clearfix noselect">
        <div class="use_control use_control_left">
            <input type="checkbox" id="live_time">
            <label for="live_time">动态更新时间节点</label>
        </div>
        <div id="left_btn" class="move_btn disabled">
            <i class="fa fa-angle-double-left fa-fw"></i>
        </div>
        <div id="time_list">
            <ul class="clearfix"></ul>
        </div>
        <div id="right_btn" class="move_btn">
            <i class="fa fa-angle-double-right fa-fw"></i>
        </div>
        <div id="play_btn" class="tool_btn">
            <i class="fa fa-play fa-fw"></i>
        </div>
        <div class="use_control">
            <input type="checkbox" id="use_limited">
            <label for="use_limited">仅显示选定时间数据</label>
            <div class="explain">
                <p>开启后将只看选定时间点的瓦片，不开启则浏览指定时间及以前尽可能多的瓦片</p>
            </div>
        </div>
        <div class="play_info"></div>
        <div class="play_list">
            <select class="form-control"></select>
        </div>
        <div class="remove_point" title="关闭时间轴">x</div>
    </div>

    <!-- 图层管理 -->
    <div id="layers_control" class="clearfix noselect" title="图层管理">
        <i class="fa fa-database"></i>
        <div class="layers_list">
            <div>图层管理</div>
            <ul>
                <li class="checkbox">
                    <label>
                        <input type="checkbox" class="theme_layer" checked>
                        <span>多时间节点主题</span>
                    </label>
                </li>
                <li class="checkbox">
                    <label>
                        <input type="checkbox" class="base_layer" checked>
                        <span>背景底图</span>
                    </label>
                </li>
            </ul>
        </div>
    </div>

    <!-- 底图切换 -->
    <div id="layer_list">
        <ul></ul>
    </div>

</div>

<!-- 地图弹框 -->
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>



<div class="modal fade" id="cover_dialog" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">设置封面</h4>
            </div>
            <div class="modal-body clearfix">
                <div class="row">
                    <div class="col-md-12">
                        <div id="cover_box">
                            <div class="load_cover">
                                <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
                            </div>
                            <div class="head-wrapper"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary set_cover">设置为封面</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}