fengxiang
2018-06-01 8c78eae060761830ffdd5d549b2e0a3aedba2176
地图布点辅助工具
6 files added
382 ■■■■■ changed files
src/main/webapp/assets/bullets.json 10 ●●●●● patch | view | raw | blame | history
src/main/webapp/img/mpoint.png patch | view | raw | blame | history
src/main/webapp/img/none.png patch | view | raw | blame | history
src/main/webapp/img/select.png patch | view | raw | blame | history
src/main/webapp/img/star.png patch | view | raw | blame | history
src/main/webapp/page/scheme-helper.html 372 ●●●●● patch | view | raw | blame | history
src/main/webapp/assets/bullets.json
New file
@@ -0,0 +1,10 @@
[
    {"title":"颗粒物2.5","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[900],"markers":[900],"state":1},
    {"title":"PM10","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[550],"markers":[550],"state":1},
    {"title":"一氧化碳","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[400],"markers":[400],"state":1},
    {"title":"PM2.5","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[100],"markers":[100],"state":1},
    {"title":"颗粒物2.5","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[900],"markers":[900],"state":1},
    {"title":"PM10","subtitle":"(ug/m³)","ranges":[350,500,600,800],"measures":[550],"markers":[550],"state":1},
    {"title":"一氧化碳","subtitle":"(ug/m³)","ranges":[-350,-500,-600,-800],"measures":[-400],"markers":[-400]},
    {"title":"PM2.5","subtitle":"(ug/m³)","ranges":[800,800,800,800],"measures":[100],"markers":[-100]}
]
src/main/webapp/img/mpoint.png
src/main/webapp/img/none.png
src/main/webapp/img/select.png
src/main/webapp/img/star.png
src/main/webapp/page/scheme-helper.html
New file
@@ -0,0 +1,372 @@
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>方案布点辅助</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<style type="text/css">
    body,
    html,
    .main-body,
    #mapCanvas {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        z-index: 0;
        font-size: 14px;
        font-family: "微软雅黑";
    }
    .popup-box {
        position: absolute;
        z-index: 1;
        background-color: white;
        top: 3%;
        left: 1%;
        padding: 14px 10px 0px;
        text-align: center;
        width: 280px;
        height: 110px;
    }
    .search-box {
        width: 220px;
    }
    .anchorBL {
        display: none;
    }
    .click-handle-title {
        text-align: left;
    }
    .marker-total {
        text-align: left;
        padding-left: 2px;
    }
</style>
<div class="main-body">
    <div class="popup-box">
        <table>
            <tr>
                <td>
                    <input class="search-box" type="input" />
                </td>
                <td>
                    <input class="search-btn" type="button" value="搜索" />
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" />
                </td>
                <td class="click-handle-title">
                    无操作
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;
                </td>
                <td>
                    <input id="clickHandle_3" type="radio" name="mapClickHandle" value="3" />
                </td>
                <td class="click-handle-title">
                    删除布点
                </td>
            </tr>
            <tr>
                <td>
                    <input id="clickHandle_1" type="radio" name="mapClickHandle" value="1" />
                </td>
                <td class="click-handle-title">
                    [设备]布点
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;
                </td>
                <td>
                    <input id="clickHandle_2" type="radio" name="mapClickHandle" value="2" />
                </td>
                <td  class="click-handle-title">
                    [五角星]布点
                </td>
            </tr>
            <tr>
                <td colspan="2" class="marker-total">
                    [设备]总数:
                    <span id="mpointCount">0</span>
                </td>
                <td>
                    &nbsp;&nbsp;&nbsp;
                </td>
                <td colspan="2" class="marker-total">
                    [五角星]总数:
                    <span id="starCount">0</span>
                </td>
            </tr>
        </table>
    </div>
    <div id="mapCanvas"></div>
</div>
<body>
    <script>
        var baiduMap;
        var markerManager = {
            data: {},
            bind: {}
        };
        markerManager.bindSelect = function (key, select) {
            this.bind[key] = jQuery(select);
        }
        markerManager.reloadBind = function (key) {
            var select = this.bind[key];
            if (!!select && !!this.data[key]) {
                select.text(this.data[key].length);
            } else {
                if (!this.data[key]) {
                    throw new Error("int markerManager key:" + key + ",don't have data");
                } else {
                    console.log("int markerManager key:" + key + ",don't bind select");
                }
            }
        }
        markerManager.addMarker = function (key, marker) {
            this.data[key] = !!this.data[key] ? this.data[key] : [];
            this.data[key].push(marker);
            this.reloadBind(key);
        }
        markerManager.addMpoint = function (marker) {
            this.addMarker("mpoint", marker);
        }
        markerManager.addMpoint = function (marker) {
            this.addMarker("star", marker);
        }
        markerManager.removeMarker = function (key, marker) {
            if (!!this.data[key]) {
                var markers = this.data[key];
                for (var index in markers) {
                    var m = markers[index];
                    if (m == marker) {
                        markers.splice(index, 1);
                    }
                }
                this.reloadBind(key);
            }
        }
        // 0,无操作,1,增加设备,2,增加五角星,3,删除布点
        function clickHandle(args, key) {
            var handleValue = parseInt($("input[name='mapClickHandle']:checked").val());
            switch (handleValue) {
                case 0:
                    break;
                case 1:
                    addMpoint(args.point);
                    break;
                case 2:
                    addStar(args.point);
                    break;
                case 3:
                    removeOverlay(key, this);
                    break;
            }
        }
        var switchMenuItems = {};
        switchClickHanld = function (value) {
            value = value.toString();
            $("input[name='mapClickHandle']").each(function () {
                var handleValue = $(this).val().toString();
                if (handleValue === value) {
                    $("#clickHandle_" + value).prop("checked", true);
                    $("#clickHandle_" + value).attr("checked", true);
                    // $("#clickHandle_" + value).checked = "checked";
                }
            });
            for (var key in switchMenuItems) {
                var menuItem = switchMenuItems[key];
                if (value == key) {
                    menuItem.setIcon("/img/select.png");
                } else {
                    menuItem.setIcon("/img/none.png");
                }
            }
        }
        function clearOverlays() {
            for (var key in markerManager.data) {
                markerManager.data[key] = [];
                markerManager.reloadBind(key);
            }
            baiduMap.clearOverlays();
        }
        function removeOverlay(key, marker) {
            baiduMap.removeOverlay(marker);
            markerManager.removeMarker(key, marker);
        }
        function addMarker(point, option) {
            var marker = new BMap.Marker(point, option);
            marker.addEventListener("click", function () {
                var args = Array.prototype.slice.call(arguments);
                clickHandle.call(marker, args, option.key);
            });
            var baiduMap = this.baiduMap;
            this.baiduMap.addOverlay(marker);
            markerManager.addMarker(option.key, marker);
            //创建右键菜单
            var markerMenu = new BMap.ContextMenu();
            markerMenu.addItem(new BMap.MenuItem('删除', function () {
                removeOverlay(option.key, marker);
            }));
            marker.addContextMenu(markerMenu);
        }
        function addMpoint(point) {
            var option = {
                enableDragging: true
            };
            option.icon = new BMap.Icon(
                "/img/mpoint.png",
                new BMap.Size(19, 30)
            );
            option.key = "mpoint";
            option.offset = new BMap.Size(0, -15);
            addMarker(point, option);
        }
        function addStar(point) {
            var option = {
                enableDragging: true
            };
            option.icon = new BMap.Icon(
                "/img/star.png",
                new BMap.Size(31, 31)
            );
            option.key = "star";
            // option.offset = new BMap.Size(0,-15);
            addMarker(point, option);
        }
        function mapInit() {
            var map = new BMap.Map("mapCanvas");
            this.baiduMap = map;
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
            map.setDefaultCursor('Crosshair');
            map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            var menu = new BMap.ContextMenu();
            var txtMenuItem = [{
                    handleType: 0,
                    text: '无操作',
                    select: true,
                    switch: true,
                    callback: function () {
                        switchClickHanld(0);
                    },
                },
                {
                    handleType: 1,
                    text: '[设备]布点',
                    switch: true,
                    callback: function () {
                        switchClickHanld(1);
                    }
                },
                {
                    handleType: 2,
                    text: '[五角星]布点',
                    switch: true,
                    callback: function () {
                        switchClickHanld(2);
                    },
                },
                {
                    handleType: 3,
                    text: '删除布点',
                    switch: true,
                    callback: function () {
                        switchClickHanld(3);
                    },
                },
                {
                    seperator: true
                },
                {
                    text: '关闭搜素框',
                    callback: function () {
                        var popupBox = $(".popup-box");
                        if (popupBox.css('display') !== "block") {
                            popupBox.css('display', "block");
                            this.setText("关闭搜素框");
                        } else {
                            popupBox.css('display', "none");
                            this.setText("显示搜素框");
                        }
                    }
                },
                {
                    text: '清空地图',
                    callback: function (menuItem) {
                        var result = confirm('注意! 注意! 注意! 一旦清除后将无法恢复')
                        if (result) {
                            clearOverlays();
                        }
                    }
                }
            ];
            for (var i = 0; i < txtMenuItem.length; i++) {
                var item = txtMenuItem[i];
                if (!!item['seperator']) {
                    menu.addSeparator();
                } else {
                    if (item.select) {
                        item.icon = "/img/select.png";
                    } else {
                        item.icon = "/img/none.png";
                    }
                    var menuItem = new BMap.MenuItem(item.text, item.callback, {
                        width: 120,
                        iconUrl: item.icon
                    });
                    menu.addItem(menuItem);
                    if (item.switch) {
                        switchMenuItems[item.handleType] = menuItem;
                    }
                }
            }
            map.addContextMenu(menu);
            map.addEventListener(
                "click",
                clickHandle
            );
            return map;
        }
        (function ($) {
            var map = mapInit();
            // 搜索点击
            $('.search-btn').on('click', function (args) {
                var searchValue = $('.search-box').val();
                if (!!searchValue) {
                    baiduMap.centerAndZoom(searchValue);
                }
            });
            markerManager.bindSelect("mpoint", "#mpointCount");
            markerManager.bindSelect("star", "#starCount");
            $("input[name='mapClickHandle']").each(function () {
                var handleValue = $(this).val().toString();
                $(this).click(function(){
                    switchClickHanld(handleValue);
                });
            });
        })($, baiduMap);
    </script>
</body>