{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类型分析</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.PolyEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        html,
        body,
        .content {
            width: 100%;
            height: 100%;
        }

        /* .mainContent, */

        .mainContent {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        /* 内容 */
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>基地划分</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div id="container"></div>
            <div class="input-card" style="width: 200px">
                <h4 style="margin-bottom: 10px; font-weight: 600">绘制地块</h4>
                <button class="btn" onclick="drawPolygon()" style="margin-bottom: 5px">绘制多边形农场</button>
                <button class="btn" onclick="drawRectangle()" style="margin-bottom: 5px">绘制矩形农场</button>
                <!-- <button class="btn" onclick="rectangleEditor.open()" style="margin-bottom: 5px">编辑</button>   -->
                <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button> 
                <button class="btn" onclick="polyEditor.close()">结束编辑</button> 
            </div>
        </div>

    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        var element, layer, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            //执行一个laydate实例


        })

        var map = new AMap.Map("container", {
            center: [119.606576, 26.090966],
            zoom: 14,
            // layers: [
            //     // 卫星
            //     new AMap.TileLayer.Satellite(),
            //     // 路网
            //     new AMap.TileLayer.RoadNet()
            // ],
        });

        var scale = new AMap.Scale({
            visible: false
        })
        map.addControl(scale);
        scale.show();


        var path = [
            [119.5894, 26.119647],
            [119.600036, 26.123669],
            [119.619009, 26.111472],
            [119.600755, 26.11225]
        ]

        var polygon = new AMap.Polygon({
            path: path,
            strokeColor: "#FF33FF",
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: '#1791fc',
            zIndex: 50,
        })
        addTxt(path[0], '农场一')

        map.add(polygon)


        var polyEditor = new AMap.PolyEditor(map, polygon)

        polyEditor.on('addnode', function (event) {
            log.info('触发事件：addnode')
        })

        polyEditor.on('adjust', function (event) {
            log.info('触发事件：adjust')
        })

        polyEditor.on('removenode', function (event) {
            log.info('触发事件：removenode')
        })

        polyEditor.on('end', function (event) {
            log.info('触发事件： end')
            // event.target 即为编辑后的多边形对象
        })

        var mouseTool = new AMap.MouseTool(map)

        function drawPolygon() {
            mouseTool.polygon({
                strokeColor: "#000",
                strokeWeight: 1,
                strokeOpacity: .5,
                fillOpacity: 0.4,
                fillColor: '#ff0000',
                zIndex: 50,
            })
        }

        function drawRectangle() {
            mouseTool.rectangle({
                strokeColor: "#000",
                strokeWeight: 1,
                strokeOpacity: .5,
                fillOpacity: 0.4,
                fillColor: '#ff0000',
                zIndex: 50,
            })
        }

        mouseTool.on('draw', function (e) {
            // event.obj 为绘制出来的覆盖物对象
            log.info('覆盖物对象绘制完成')
            console.log(e.obj.getPath());//获取路径/范围
            layer.prompt({ title: '随便写点啥，并确认', formType: 2, maxlength: 20 }, function (text, index) {
                layer.close(index);
                addTxt(e.obj.getPath()[0], text)
            });
            // addTxt(e.obj.getPath()[0])
            // openInfo(e.obj.getPath()[0])
        })

        function addTxt(address, text) {
            // 创建纯文本标记
            var text = new AMap.Text({
                text: text,
                anchor: 'center', // 设置文本标记锚点
                draggable: true,
                cursor: 'pointer',
                angle: 10,
                style: {
                    'padding': '.3rem .4rem',
                    'margin-bottom': '1rem',
                    'border-radius': '.25rem',
                    'background-color': 'white',
                    // 'width': '15rem',
                    'border-width': 0,
                    'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                    'text-align': 'center',
                    'font-size': '.2rem',
                    'color': 'blue'
                },
                position: address
            });

            text.setMap(map)
        }

        //在指定位置打开信息窗体
        function openInfo(address) {
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" http://webapi.amap.com/images/autonavi.png \"/></div> ");
            info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
            info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
            info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

            infoWindow = new AMap.InfoWindow({
                // content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                content: '默认打开'  //使用默认信息窗体框样式，显示信息内容
            });

            infoWindow.open(map, address);
        }

    </script>
</body>

</html>