{% load staticfiles %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>

    </title>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

    <style>
        html,
        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
        }

        #mapDiv {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 90vh;
        }

        .modal-footer {
            padding: 12px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
    </style>
</head>

<body>
    <div id="mapDiv"></div>
    <div class="modal-footer">
        <button type="button" class="layui-btn layui-btn-primary" onclick="clearAll(); return false;">清除</button>
        <button type="button" class="layui-btn layui-btn-normal" onclick="GetBasePolygon(); return false;">确定</button>
    </div>

</body>

</html>



<script src="{% static '/lib/layui/layui.js'%}"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map('mapDiv', {});

    var mapZoom = 14;
    var mapCenter = "119.606784,26.099018";



    map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP] }));

    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);

    map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小


    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.5,       //边线透明度，取值范围0 - 1。
        fillOpacity: 0.1,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingMode: BMAP_DRAWING_POLYGON,//绘制模式  多边形
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 40), //偏离值
            drawingModes: [
                BMAP_DRAWING_POLYGON
            ]
        },
        polygonOptions: styleOptions //多边形的样式
    });

    //鼠标绘制完成回调方法   获取各个点的经纬度
    var overlays = [];
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
        e.overlay.enableEditing();
        //var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
        //for (var i = 0; i < path.length; i++) {
        //    console.log("lng:" + path[i].lng + "\n lat:" + path[i].lat);
        //} 
    };

    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    function clearAll() {

        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0

    }

    var styleOtherOptions = {
        strokeColor: "#22a3ed",    //边线颜色。
        fillColor: "#c8ebff",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 2,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.7,       //边线透明度，取值范围0 - 1。
        fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。
        strokeStyle: "solid" //边线的样式，solid或dashed。
    }
    // 绘制所有地块
    function getData(data) {
        var PolygonStrDat = data;
        if (PolygonStrDat.length) {
            for (var i = 0; i < PolygonStrDat.length; i++) {
                var baseName = PolygonStrDat[i].name;
                if(!PolygonStrDat[i].location){
                    continue;
                }
                var drawingNums = PolygonStrDat[i].location.split('|');
                for (var z = 0; z < drawingNums.length; z++) {
                    if (drawingNums[z] == null || drawingNums[z] == undefined) {
                        continue;
                    }
                    var Point = [];
                    var pointArray = drawingNums[z].split(';');
                    for (var j = 0; j < pointArray.length; j++) {

                        if (pointArray[j] == null || pointArray[j] == "")
                            continue;

                        var p = pointArray[j].split(',');

                        var lng = p[0];
                        var lat = p[1];

                        if ((lng == null || lng == "" || lng == undefined) || (lat == null || lat == "" || lat == undefined)) {
                            continue;
                        }

                        // alert(lng)
                        var address = new BMap.Point(lng, lat);
                        Point.push(address);
                        if (j == pointArray.length - 1) {
                            if (Point.length != 0) {
                                var polygon = new BMap.Polygon(Point, styleOtherOptions);  //创建多边形  
                                map.addOverlay(polygon);   //增加多边形
                                // alert(1)
                                var point = getCenterPoint(polygon.getPath());
                                //获得中心点
                                var label = new BMap.Label(baseName, { offset: new BMap.Size(-40, -25), position: point });
                                label.setStyle({ color: "#22a3ed", fontSize: "12px", fontWeight: "bold", backgroundColor: "0.05", border: "0" });//对label 样式隐藏

                                map.addOverlay(label);
                            }
                            // break;
                        }

                    }
                }




            }
        }
    }
    // 当前绘制
    function currDraw(data) {
        var PolygonStr = data.location;
        if (PolygonStr != "") {
            var polygonArray = PolygonStr.split('|');

            for (var i = 0; i < polygonArray.length; i++) {

                if (polygonArray[i] == null || polygonArray[i] == "")
                    continue;

                var Point = [];

                var pointArray = polygonArray[i].split(';');

                for (var j = 0; j < pointArray.length; j++) {

                    if (pointArray[j] == null || pointArray[j] == "")
                        continue;

                    var p = pointArray[j].split(',');

                    var lng = p[0];
                    var lat = p[1];

                    if ((lng == null || lng == "" || lng == undefined) || (lat == null || lat == "" || lat == undefined)) {
                        continue;
                    }

                    var address = new BMap.Point(lng, lat);
                    Point.push(address);

                }

                if (Point.length != 0) {
                    var polygon = new BMap.Polygon(Point, styleOptions);  //创建多边形 
                    polygon.enableEditing();
                    map.addOverlay(polygon);   //增加多边形

                    overlays.push(polygon);
                }
            }
        }

    }
    // var PolygonStr = "113.468555,23.236127;113.481706,23.234334;113.469633,23.230482;113.464171,23.232208";
    var PolygonStr = ""
    var centerAndZoom = false;

    // if (PolygonStr != "") {
    //     var polygonArray = PolygonStr.split('|');

    //     for (var i = 0; i < polygonArray.length; i++) {

    //         if (polygonArray[i] == null || polygonArray[i] == "")
    //             continue;

    //         var Point = [];

    //         var pointArray = polygonArray[i].split(';');

    //         for (var j = 0; j < pointArray.length; j++) {

    //             if (pointArray[j] == null || pointArray[j] == "")
    //                 continue;

    //             var p = pointArray[j].split(',');

    //             var lng = p[0];
    //             var lat = p[1];

    //             if ((lng == null || lng == "" || lng == undefined) || (lat == null || lat == "" || lat == undefined)) {
    //                 continue;
    //             }

    //             var address = new BMap.Point(lng, lat);
    //             Point.push(address);

    //         }

    //         if (Point.length != 0) {
    //             var polygon = new BMap.Polygon(Point, styleOptions);  //创建多边形 
    //             polygon.enableEditing();
    //             map.addOverlay(polygon);   //增加多边形

    //             overlays.push(polygon);
    //         }
    //     }




    // }



    // var OtherPolygonStr = "TCL产业园-113.452055,23.226064;113.502361,23.230846;113.500923,23.209059;113.448893,23.208793;113.448606,23.208793;113.442857,23.21703;113.449468,23.220219;113.45378,23.223407;113.446306,23.221016|";

    // if (OtherPolygonStr != "") {
    //     var polygonArray = OtherPolygonStr.split('|');

    //     for (var i = 0; i < polygonArray.length; i++) {

    //         if (polygonArray[i] == null || polygonArray[i] == "")
    //             continue;

    //         var Point = [];

    //         var polygonString = polygonArray[i];

    //         var polygonStringArray = polygonString.split('-');

    //         var baseName = polygonStringArray[0];

    //         var pointArray = polygonStringArray[1].split(';');

    //         for (var j = 0; j < pointArray.length; j++) {

    //             if (pointArray[j] == null || pointArray[j] == "")
    //                 continue;

    //             var p = pointArray[j].split(',');

    //             var lng = p[0];
    //             var lat = p[1];

    //             if ((lng == null || lng == "" || lng == undefined) || (lat == null || lat == "" || lat == undefined)) {
    //                 continue;
    //             }

    //             var address = new BMap.Point(lng, lat);
    //             Point.push(address);

    //         }

    //         if (Point.length != 0) {
    //             var polygon = new BMap.Polygon(Point, styleOtherOptions);  //创建多边形  
    //             map.addOverlay(polygon);   //增加多边形

    //             var point = getCenterPoint(polygon.getPath());
    //             //获得中心点
    //             var label = new BMap.Label(baseName, { offset: new BMap.Size(-40, -25), position: point });
    //             label.setStyle({ color: "#22a3ed", fontSize: "12px", fontWeight: "bold", backgroundColor: "0.05", border: "0" });//对label 样式隐藏

    //             map.addOverlay(label);
    //         }
    //     }
    // }

    if (!centerAndZoom) {
        if (mapCenter != "") {
            var x = mapCenter.split(",")[0];
            var y = mapCenter.split(",")[1];

            map.centerAndZoom(new BMap.Point(x, y), mapZoom);
        }
        else
            map.centerAndZoom("中国", 4);
    }


    function getCenterPoint(path) {

        var x = 0.0;
        var y = 0.0;
        for (var i = 0; i < path.length; i++) {
            x = x + parseFloat(path[i].lng);
            y = y + parseFloat(path[i].lat);
        }
        x = x / path.length;
        y = y / path.length;


        return new BMap.Point(x, y);

    }

    function GetAllOverlays() {

        for (var i = 0; i < overlays.length; i++) {
            var path2 = overlays[i].getPath();//Array<Point> 返回多边型的点数组

            var str = "overlays" + i;

            for (var j = 0; j < path2.length; j++) {

                str += "[" + path2[j].lng + "," + path2[j].lat + "],";

                // console.log("overlays" + i + "::lng:" + path2[j].lng + "\n lat:" + path2[j].lat);
            }

            console.log(str);
        }
    }

    function GetBasePolygon() {

        var polygon = "";

        for (var i = 0; i < overlays.length; i++) {
            var path = overlays[i].getPath();//Array<Point> 返回多边型的点数组 
            var str = "";

            for (var j = 0; j < path.length; j++) {

                if (str != "")
                    str += ";";

                str += path[j].lng + "," + path[j].lat;
                // console.log("overlays" + i + "::lng:" + path2[j].lng + "\n lat:" + path2[j].lat);
            }

            if (str != "") {
                if (polygon != "")
                    polygon += "|";

                polygon += str;
            }
        }

        console.log(polygon);

        parent.SetBasePolygon(polygon);
    }

    function GetBaiduMapOpts() {
        //alert("getMapType()	=" + map.getMapType().getName());
        //alert("getCenter()	=" + map.getCenter().lat+","+map.getCenter().lng);
        //alert("getZoom()	=" + map.getZoom()); 

        parent.SetBaiduMapOpts(map.getMapType().getName(), map.getCenter().lng + "," + map.getCenter().lat, map.getZoom());
    }


</script>