zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
							<!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"/>
</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-body">
            <form id="modelRoleForm" lay-filter="modelRoleForm" class="layui-form">
                <input type="hidden" name="entMapId" id="entMapId">
                <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">
                            <select id="entMapList" name="entMapList" lay-filter="entMapList" lay-verType="tips"
                                    class="layui-input-block">
                                <option value="">选择背景图</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="map-container" id="map" style="height: 500px"></div>
                <div class="layui-form-item text-right">
                    <button class="layui-btn" lay-filter="modelSubmitRole" lay-submit>保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" id="closePageDialog">取消</button>
                </div>
            </form>
        </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;
    var map;
    var entMapList;
    var loadFlag = true;
    layui.use(['layer', 'form', 'uParas', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var uParas = layui.uParas;
        var riskPointId = uParas.getUrlParam("riskPointId");
        var entMapId = uParas.getUrlParam("entMapId");
        if (entMapId != null && entMapId != undefined) {
            $("#entMapId").val(entMapId);
        }
        $.ajaxSetup({async: false});
        $.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", "modelRoleForm", result, "mapName", "mapId", entMapId);
                            return;
                        }
                    });
                } else {
                    entMap = result.data[0];
                    imgPath = entMap.mapRasterLayer;
                    uParas.initSimpleSelectX("entMapList", "modelRoleForm", result, "mapName", "mapId", entMap.mapId);
                    $("#entMapId").val(entMap.mapId);
                }
            }
        });
        // console.log("entMapList", entMapList);
        //监听下拉选择
        form.on('select(entMapList)', function (data) {
            $.each(entMapList, function (i, field) {
                if (field.mapId.toString() === data.value) {
                    imgPath = field.mapRasterLayer;
                    console.log(field)
                    return;
                }
            });
            $("#entMapId").val(data.value);
            myBmap.resetMapLoadData(riskPointId);
        });

        form.on('submit(modelSubmitRole)', function (data) {
            //console.log(data.field);
            var layers = plotLayer.getLayers();
            var drawIds = '';
            if (layers.length > 0) {
                layers.forEach(function (v) {
                    v = v.toGeoJSON();
                    //console.log(v);
                    if (v.geometry.type == "Point") {
                        var data = new Array();
                        data[0] = v.geometry.coordinates[1];
                        data[1] = v.geometry.coordinates[0];
                        drawIds = drawIds += JSON.stringify(data) + ";" + v.geometry.type + "#";
                    } else {
                        drawIds = drawIds += JSON.stringify(v.geometry.coordinates) + ";" + v.geometry.type + "#";
                    }
                });
            }
            data.field.riskPointId = riskPointId;
            data.field.drawIds = drawIds;
            data.field.entMapId = $("#entMapId").val();
            console.log(data.field.entMapId)
            $.ajax({
                type: "post",
                url: "/ent/riskPointMap/saveDangerSourceMapData",
                data: data.field,
                dataType: "json",
                success: function (result) {
                    if (result.code === 1) {
                        parent.layer.closeAll();
                        layer.msg(result.msg);
                        parent.closeReload();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
            return false;
        });
        $('#closePageDialog').click(function () {
            parent.layer.closeAll();
        });
        myBmap.init();
        myBmap.resetMapLoadData(riskPointId);
    });

    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
        deleteMarkerId: null, //保存删除得markerId
        mapControl: null,    // 地图控制器，用来清除叠加控制
        data: {},
        layerGroup: null,   // 全部图层组
        plotLayer: null,    // 绘制图层组
        init: function () {
            var _this = this;

            // 初始化图层组
            layerGroup = new L.LayerGroup()

            //初始化地图
            var map_type = 3;
            if (map_type == 4) {
                baidu_map();
            } else {
                image_map();
            }

            // 增加区域绘制工具栏
            plotLayer = new 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: true,
                    Point: false
                },
                edit: {
                    featureGroup: plotLayer,
                    remove: !0,
                    edit: true
                }
            }, n = mapControl = new L.Control.Draw(e);
            // if (loadFlag) {
            //     map.addControl(n),
            //         map.on(L.Draw.Event.CREATED, draw_createdHandler);
            // }
            map.addControl(n),
                map.off(L.Draw.Event.CREATED).on(L.Draw.Event.CREATED, draw_createdHandler);

            function draw_createdHandler(t) {
                // console.dir(t)
                t.layerType;
                var o = t.layer;
                // 逻辑判断
                // var layers = plotLayer.getLayers();
                // var types;
                // if (layers.length > 0) {
                //     layers.forEach(function (v) {
                //         types += v.toGeoJSON().geometry.type;
                //     });
                //     if (types.indexOf("Point") != -1) {
                //         Point = 1
                //     }
                // }
                // if (o.toGeoJSON().geometry.type == "Point" && Point == 0) {
                //     plotLayer.addLayer(o);
                // } else if (o.toGeoJSON().geometry.type != "Point") {
                //     plotLayer.addLayer(o);
                // }
                plotLayer.addLayer(o);
                myBmap.addLayer(o)
            }


            //底图为图片
            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;
                }
            }

            //底图为百度地图
            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);

            }

        },
        resetMapLoadData(riskPointId) {  // 重置地图加载数据
            myBmap.clearLayer()
            myBmap.loadData(riskPointId)
            myBmap.resetMapImage()
        },
        /**
         * @Author: NanKeYang
         * @Description: 重置地图图片
         * @Data: 2019/12/23 10:59
         */
        resetMapImage: function () {
            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) {
            //     console.log(layer)
            //     // map.removeLayer(layer);
            // });
            var bounds = [xy(-600, -600), xy(300, 300)];
            let imgOverlay = L.imageOverlay(imgPath, bounds).addTo(map);
            myBmap.addLayer(imgOverlay);
            map.fitBounds(bounds);
        },
        /**
         * @Author: NanKeYang
         * @Description: 加载数据
         * @Data: 2019/12/23 10:59
         */
        loadData: function (riskPointId) {
            //获取数据
            $.getJSON("/ent/riskPointMap/findMapDataById", {
                riskPointId: riskPointId,
                entMapId: $("#entMapId").val()
            }, function (result) {
                $.each(result.data, function (index, item) {
                    //console.log(item);
                    var markerData = item.markerData;
                    if (markerData != null) {
                        var optionsData = {
                            riskPointId: item.riskPointId,
                            title: item.markerTitle
                        };
                        var layers;
                        if (item.markerType == 3) {
                            var data = new Array();
                            $.each($.parseJSON(markerData), function (index, item) {
                                data[index] = new Array(item[1], item[0]);
                            });
                            layers = L.polygon(data, optionsData);
                        } else if (item.markerType == 1) {
                            layers = L.marker($.parseJSON(markerData));
                        } else if (item.markerType == 2) {
                            var data = new Array();
                            $.each($.parseJSON(markerData), function (index, item) {
                                data[index] = new Array(item[1], item[0]);
                            });
                            layers = L.polyline(data, optionsData);
                        }
                        plotLayer.addLayer(layers);
                        myBmap.addLayer(layers)
                    }
                });
            });
        },
        /**
         * @Author: NanKeYang
         * @Description: 添加图层
         * @Data: 2019/12/23 11:00
         */
        addLayer: function (layer) {
            layerGroup.addLayer(layer)
        },
        /**
         * @Author: NanKeYang
         * @Description: 清空图层
         * @Data: 2019/12/23 11:00
         */
        clearLayer: function () {
            layerGroup.eachLayer(function (layerItem) {
                map.removeLayer(layerItem)
            })
            layerGroup.clearLayers()
            plotLayer.clearLayers()
        },
        /**
         * @Author: NanKeYang
         * @Description: 清除地图控制
         * @Data: 2019/12/23 11:00
         */
        clearMapController() {   // 清除地图控制器
            map.removeControl(mapControl)
        }
    }


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

</body>
</html>