zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>风险点分布图</title>
    <link rel="stylesheet" href="../../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../../assets/module/admin.css?v=312"/>
    <link rel="stylesheet" href="../../../../assets/css/editormap.css?v=312"/>
    <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.css">
    <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet.css">
    <link rel="stylesheet" href="../../../../assets/module/formSelects/formSelects-v4.css"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .risk_point_dot {
            width: 30px;
            height: 30px;
            border-radius: 15px !important;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            display: table-cell;
        }

        .level_ {
            background-color: #0b0b0b;
        }

        .level1_ {
            background-color: red;
        }

        .level2_ {
            background-color: #FB7437;
        }

        .level3_ {
            background-color: #FFDC44;
        }

        .level4_ {
            background-color: #14C2FB;
        }

        .risk_point_text {
            display: table-cell;
            vertical-align: middle;
            height: 30px;
            padding-left: 10px;
        }

        .info li {
            font-size: 15px;
            color: #222;
            line-height: 29px;
            margin-top: 10px;

        }

        .divIcon {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            animation: myfirst 0.8s infinite;
        }

        @keyframes myfirst {
            0% {
                border: 5px solid rgba(255, 0, 0, 1);
            }
            25% {
                border: 5px solid rgba(255, 0, 0, 0.8);
            }
            50% {
                border: 7px solid rgba(255, 0, 0, 0.6);
            }
            75% {
                border: 9px solid rgba(255, 0, 0, 0.4);
            }
            100% {
                border: 10px solid rgba(255, 0, 0, 0);
            }
        }


    </style>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            四色风险地图
        </div>
        <div class="layui-card-body">
            <div class="layui-form toolbar" lay-filter="formFilter">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label w-auto w-padding">部门：</label>
                                <div class="layui-input-inline mr0">
                                    <input type="text" id="groupName" name="groupName" value=""
                                           placeholder="点击选择"
                                           class="layui-input" readonly>
                                    <input type="hidden" id="groupId" name="groupId">
                                    <div id="menuContent" class="menuContent">
                                        <ul id="groupTree" class="ztree" style="margin-top:0;"></ul>
                                    </div>
                                </div>
                                <div class="layui-inline mr0">
                                    <label class="layui-form-label w-auto w-padding">选择背景图：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="entMapList" name="entMapList" lay-filter="entMapList"
                                                lay-verType="tips" class="layui-input-block">
                                            <option value="">选择背景图</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <span class="risk_point_text">总计&nbsp;&nbsp;</span>
                        <div class="risk_point_dot level_">0</div>
                    </div>
                    <div class="layui-col-md1">
                        <span class="risk_point_text">重大&nbsp;&nbsp;</span>
                        <div class="risk_point_dot level1_">0</div>
                    </div>
                    <div class="layui-col-md1">
                        <span class="risk_point_text">较大&nbsp;&nbsp;</span>
                        <div class="risk_point_dot level2_">0</div>
                    </div>
                    <div class="layui-col-md1">
                        <span class="risk_point_text">一般&nbsp;&nbsp;</span>
                        <div class="risk_point_dot level3_">0</div>
                    </div>
                    <div class="layui-col-md1">
                        <span class="risk_point_text">较低&nbsp;&nbsp;</span>
                        <div class="risk_point_dot level4_">0</div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <input type="hidden" name="entMapId" id="entMapId">
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                    <div class="layui-tab layui-tab-card" lay-filter="dangerSource">
                        <input type="hidden" name="riskPointType" id="riskPointType">
                        <ul class="layui-tab-title">
                            <li class="layui-this" lay-id="1">风险点分布图</li>
                            <li lay-id="3">重大危险源</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-hide" id="imgDiv">

                            </div>
                            <div class="layui-tab-item layui-show" id="mapDiv">
                                <div class="right-map" style="height: 700px">
                                    <div class="map-container" id="map"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>

<script type="text/javascript" src="../../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="../../../../assets/libs/leaflet/leaflet.js"></script>
<script src="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.js"></script>
<script src="../../../../assets/libs/leaflet/leaflet-draw/local.js"></script>

<script src="../../../../assets/libs/leaflet/proj4-compressed.js"></script>
<script src="../../../../assets/libs/leaflet/proj4leaflet.js"></script>


<script>
    var imgPath, viewImgPath, map;
    var entMapList;
    var loadFlag = true;
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'zTree', 'uParas', '_groupTree', 'element', 'laydate', 'notice', '_zTree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var form = layui.form;
        var admin = layui.admin;
        var uParas = layui.uParas;
        var _groupTree = layui._groupTree;
        var laydate = layui.laydate;
        var notice = layui.notice;
        var _zTree = layui._zTree;
        var insTb = {
            reload: function (obj, p) {
                $.getJSON(uParas.baseUrl + "/ent/riskPoint/riskPointLvCount", {gId: $("#groupId").val()}, function (result) {
                    if (result.code == 1) {
                        var allCount = 0, lv1Count = 0, lv2Count = 0, lv3Count = 0, lv4Count = 0;
                        $.each(result.data, function (i, field) {
                            if (field.riskPointLevel == 1) {
                                lv1Count = field.lvCount;
                            }
                            if (field.riskPointLevel == 2) {
                                lv2Count = field.lvCount;
                            }
                            if (field.riskPointLevel == 3) {
                                lv3Count = field.lvCount;
                            }
                            if (field.riskPointLevel == 4) {
                                lv4Count = field.lvCount;
                            }
                            if (field.riskPointLevel != null) {
                                allCount += field.lvCount;
                            }
                        });
                        $(".risk_point_dot.level1_").html(lv1Count);
                        $(".risk_point_dot.level2_").html(lv2Count);
                        $(".risk_point_dot.level3_").html(lv3Count);
                        $(".risk_point_dot.level4_").html(lv4Count);
                        $(".risk_point_dot.level_").html(allCount);

                        setTimeout(function () {
                            loadMapData.init(0, uParas, riskPointLevelFunc, _zTree);
                        }, 1000)
                    }
                });
            }
        }
        _groupTree.init(insTb);
        insTb.reload();

        var entMapId = uParas.getUrlParam("entMapId");
        if (entMapId != null && entMapId != undefined) {
            $("#entMapId").val(entMapId);
        }
        $.getJSON(uParas.baseUrl + "/ent/map/getList", {mapType: 2}, function (result) {
            var entMap;
            if (result.data != null) {
                entMapList = result.data;
                if (entMapId != null && entMapId != undefined) {
                    $.each(result.data, function (i, field) {
                        if (field.mapId.toString() === entMapId) {
                            imgPath = field.mapRasterLayer;
                            uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMapId);
                            return;
                        }
                    });
                } else {
                    entMap = result.data[0];
                    imgPath = entMap.mapRasterLayer;
                    uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMap.mapId);
                    $("#entMapId").val(entMap.mapId);
                }

            }
        });
        //监听下拉选择
        form.on('select(entMapList)', function (data) {
            if (data.value != "") {
                $.each(entMapList, function (i, field) {
                    if (field.mapId.toString() === data.value) {
                        imgPath = field.mapRasterLayer;
                        return;
                    }
                });
                $("#entMapId").val(data.value);
                myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
                if ($("#riskPointType").val() == null || $("#riskPointType").val() == "") {
                    loadMapData.init("0", uParas, riskPointLevelFunc, _zTree);
                } else {
                    loadMapData.init($("#riskPointType").val(), uParas, riskPointLevelFunc, _zTree);
                }
            }
        });
        //监听Tab切换，以改变地址hash值
        element.on('tab(dangerSource)', function (data) {
            var riskPointType = this.getAttribute('lay-id');
            if (riskPointType === "1") {
                $("#imgDiv").removeClass("layui-show");
                $("#imgDiv").addClass("layui-hide");
                loadMapData.init("0", uParas, riskPointLevelFunc, _zTree);
                $("#riskPointType").val("0");
            }
            if (riskPointType === "3") {
                loadMapData.init("1", uParas, riskPointLevelFunc, _zTree);
                $("#mapDiv").addClass("layui-show");
                $("#imgDiv").removeClass("layui-show");
                $("#imgDiv").addClass("layui-hide");
                $("#riskPointType").val("1");
            }
        });

        function riskPointLevelFunc(value) {
            var opts = '<div class="riskPointLevel">';
            if (value == 1) {
                opts += "<div class='notify'><span class='heartbit'></span><span><img src='../../../../assets/images/lv/red.png' style='width: 28px;height: 28px;'/></span></div>";
            } else if (value == 2) {
                opts += "<img src='../../../../assets/images/lv/orange.png' style='width: 28px;height: 28px;'/>";
            } else if (value == 3) {
                opts += "<img src='../../../../assets/images/lv/yellow.png' style='width: 28px;height: 28px;'/>";
            } else if (value == 4) {
                opts += "<img src='../../../../assets/images/lv/blue.png' style='width: 28px;height: 28px;'/>";
            } else {
                opts += "无";
            }
            opts += "</div>"
            return opts;
        }

        setTimeout(function () {
            myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
        }, 1000);
    });

    var myBmap = {
        mapContainer: "map", //地图容器
        mapTile: "http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=20181205", //切片图层
        myIcon: null, //保存创建的icon
        myMarker: null, //保存自己创建marker
        myMarkerType: 0, //marker类型
        myMarkerId: null, //markerId
        isSave: true, //是否保存标记
        checkedIcon: null, //保存选中的icon
        title: null,
        deleteMarkerId: null, //保存删除得markerId
        myMarkerGroup: L.layerGroup(),
        myMarkerGroupInit: L.layerGroup(),
        data: {},
        init: function (form, uParas, riskPointLevelFunc, _zTree) {
            _form = form;
            var _this = this;
            //初始化地图
            var map_type = 3;
            if (map_type == 4) {
                baidu_map();
            } else {
                image_map();
            }
            // 增加区域绘制工具栏
            plotLayer = L.featureGroup(), map.addLayer(plotLayer);
            var e = {
                position: "topright",
                draw: {
                    polyline: {shapeOptions: {color: "#0000ff", weight: 3}},
                    polygon: {allowIntersection: !0, showArea: !0, shapeOptions: {color: "#0000ff", weight: 2}},
                    rectangle: {shapeOptions: {color: "#0000ff", weight: 2}},
                    circle: false,
                    circlemarker: false,
                    marker: false
                },
                edit: {
                    featureGroup: plotLayer,
                    remove: !0,
                    edit: false
                }
            }, n = new L.Control.Draw(e);


            function draw_createdHandler(t) {
                t.layerType;
                var o = t.layer;
                plotLayer.addLayer(o)
                var all = o.toGeoJSON();
                var drawIds = $("#drawIds").val();
                $("#drawIds").remove();
                if (drawIds != undefined) {
                    drawIds = drawIds + "#" + JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type;
                } else {
                    drawIds = JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type
                }
                $(".my-marker-type").append('<input type="hidden" id="drawIds" name="drawIds" value="' + drawIds + '">');
            }

            function draw_deletedHandler(t) {
                $("#drawIds").remove();
            }


            //底图为图片
            // function image_map() {
            //     // 地图更换背景图 crs设置
            //     var yx = L.latLng;
            //     var xy = function xy(x, y) {
            //         if (L.Util.isArray(x)) {
            //             return yx(x[1], x[0]);
            //         }
            //         return yx(y, x);
            //     };
            //     var bounds = [xy(-600, -600), xy(300, 300)];
            //     var imgTile = L.imageOverlay(imgPath, bounds);
            //     map = L.map(_this.mapContainer, {
            //         crs: L.CRS.Simple,
            //         center: L.latLng(50.5, 30.5),
            //         minZoom: 0,
            //         zoom: 4,
            //         layers: [imgTile, _this.myMarkerGroup, _this.myMarkerGroupInit],
            //         attributionControl: true
            //     });
            //     map.fitBounds(bounds);
            // }

            function image_map() {
                if (map == undefined || map._loaded == undefined) {
                    map = L.map(_this.mapContainer, {
                        crs: L.CRS.Simple,
                        center: L.latLng(50.5, 30.5),
                        minZoom: 0,
                        zoom: 4,
                        attributionControl: false
                    });
                } else {
                    loadFlag = false;
                }
                var yx = L.latLng;
                var xy = function xy(x, y) {
                    if (L.Util.isArray(x)) {
                        return yx(x[1], x[0]);
                    }
                    return yx(y, x);
                };
                map.eachLayer(function (layer) {
                    map.removeLayer(layer);
                });
                map.addLayer(_this.myMarkerGroupInit);
                var bounds = [xy(-600, -600), xy(300, 300)];
                L.imageOverlay(imgPath, bounds).addTo(map);
                map.fitBounds(bounds);
            }

            //底图为百度地图
            function baidu_map() {
                var maxZoom = 26;
                var crs = new L.Proj.CRS('EPSG:3395',
                    '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', {
                        resolutions: function () {
                            level = 19;
                            var res = [];
                            res[0] = Math.pow(2, 18);
                            for (var i = 1; i < level; i++) {
                                res[i] = Math.pow(2, (18 - i))
                            }
                            return res;
                        }(),
                        origin: [0, 0],
                        bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
                    });
                var image = new L.TileLayer(_this.mapTile, {
                    maxZoom: maxZoom,
                    minZoom: 10,
                    subdomains: [0, 1, 2],
                    tms: true
                });
                map = L.map(_this.mapContainer, {
                    crs: crs,
                    layers: [image]
                });
                map.setView([34.474387, 109.490437], 14);

            }
        }
    }

    var loadMapData = {
        jobPng: "../../../../assets/images/icon/job.png",
        facilityPng: "../../../../assets/images/icon/facility.png",
        colorList: [
            "rgb(255, 75, 40)",
            "rgb(253, 116, 35)",
            "rgb(255, 223, 16)",
            "rgb(0, 192, 255)",
            "rgb(255, 75, 40)",
            "rgb(253, 116, 35)"
        ],
        init: function (type, uParas, riskPointLevelFunc, _zTree) {
            var _uParas = uParas;
            var riskPointLevelFunc = riskPointLevelFunc;
            var _zTree = _zTree;

            function icon(imgUrl) {
                return L.icon({
                    iconUrl: imgUrl,
                    iconSize: [38, 45],
                    popupAnchor: [0, -16]
                });
            }

            initMapData(type, uParas);

            function initMapData(type, uParas) {
                var groupId = $("#groupId").val();
                // myBmap.myMarkerGroupInit.clearLayers();
                var httpUrl = uParas.baseUrl + "/ent/riskPointMap/getRiskPointMap";
                if (type == "1") {
                    httpUrl += "?isWeightyDangerSrc=1";
                    httpUrl += "&entMapId=" + $("#entMapId").val();
                } else {
                    httpUrl += "?entMapId=" + $("#entMapId").val();
                }
                myBmap.myMarkerGroupInit.clearLayers();
                $.getJSON(httpUrl, {gId: groupId}, function (result) {
                    if (result.code == 1) {
                        $.each(result.data, function (index, item) {
                            var markerData = item.markerData;
                            if (markerData != null) {
                                var optionsData = {
                                    mapId: item.id,
                                    riskPointId: item.riskPointId,
                                    title: item.markerTitle
                                };
                                optionsData.iconUrl = imgPathFun(item.riskPointLevel);
                                optionsData.icon = icon(optionsData.iconUrl);
                                if (item.markerType == 3) {
                                    var data = new Array();
                                    $.each($.parseJSON(markerData), function (index, item) {
                                        data[index] = new Array(item[1], item[0]);
                                    });
                                    optionsData.color = loadMapData.colorList[item.riskPointLevel - 1];
                                    optionsData.fillColor = loadMapData.colorList[item.riskPointLevel - 1];
                                    L.polygon(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
                                } else if (item.markerType == 1) {
                                    if (item.isWeightyDangerSrc == 1) {
                                        optionsData.icon = L.divIcon({
                                            className: "divIcon1",
                                            iconSize: [38, 45],
                                            html: `<div style="width: 100px;height: 100px; margin-top: -27px;margin-left: -31px;  display: flex;justify-content: center;align-items: center">
                                                <img class="divIcon" src="../../../../assets/images/icon/zdwxy.png" style="background-color: red" alt="">
                                               </div>`
                                        });
                                    }
                                    L.marker($.parseJSON(markerData), optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
                                } else if (item.markerType == 2) {
                                    var data = new Array();
                                    $.each($.parseJSON(markerData), function (index, item) {
                                        data[index] = new Array(item[1], item[0]);
                                    });
                                    optionsData.color = loadMapData.colorList[item.riskPointLevel - 1];
                                    L.polyline(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
                                }
                            }
                        });

                    }
                });
            }

            function imgPathFun(lv) {
                return "../../../../assets/images/lv/lv" + lv + ".png";
            }

            function onMapClick(e) {
                var riskPointId = e.target.options.riskPointId;
                var index = layer.open({
                    type: 2,
                    zIndex: 1000,
                    title: "风险点详情",
                    shadeClose: true,
                    area: ['650px', '768px'],
                    content: "../details.html?riskPointId=" + riskPointId + "&type=open",
                    fixed: false,
                    maxmin: true
                });
                layer.full(index);
            }
        }
    }


    function iconClick(e) {
        $(e).toggleClass('icon-active')
    }
</script>

</body>
</html>