实施页面hour-aqi更新

jinpengyong

2020-12-01 3d76bad0a7562441d75768f7e4e677f686037582

 src/main/webapp/page/scheme-helper.html

@@ -30,13 +30,20 @@
        padding: 14px 10px 0px;
        text-align: center;
        width: 280px;
        height: 110px;
        height: 150px;
    }

    .search-box {
        width: 220px;
    }

    .city-box {
        width: 80px;
    }
    .set-city-box {
        display: inline-block;
        position: relative;
        bottom: -2px;
    }
    .anchorBL {
        display: none;
    }
@@ -63,6 +70,15 @@
            </tr>
        </table>
        <table>
            <tr>
                <td colspan="5"  class="click-handle-title">
                    当前城市：
                    <span id="city-name" style="width: 60px;height:20px;border-bottom:solid #1b1b1b 1px;display:inline-block">
                        &nbsp;
                    </span>
                    <div class="set-city-box"><input class="city-box" type="input" />&nbsp;<a id="setCityBtn" style=" text-decoration:underline; color:#00F;cursor:pointer;">设置</a></div>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" />
@@ -120,7 +136,16 @@
    <script>
        var baiduMap;
        var markerManager = {
            data: {},
            data: {
                mpoint:[],
                star:[],
                _regionName:null,
                _boundary:[],
                _boundaryState:false
            },
            menuItems:{
                boundaryMenuItem:null
            },
            bind: {}
        };
        markerManager.bindSelect = function (key, select) {
@@ -137,6 +162,68 @@
                    console.log("int markerManager key:" + key + ",don't bind select");
                }
            }
        }
        markerManager.setRegionName = function (regionName,successCallBack,errorCallBack){
            var thatData = this.data;
            function getBoundary(regionName){
                var bdary = new BMap.Boundary();
                var map = baiduMap;
                bdary.get(regionName, function(rs){       //获取行政区域
                    map.clearOverlays();        //清除地图覆盖物
                    var count = rs.boundaries.length; //行政区域的点有多少个
                    if (count === 0) {
                        // alert('未能获取当前输入行政区域');
                        if(!!errorCallBack&&errorCallBack instanceof Function){
                            errorCallBack(regionName);
                        }
                        return ;
                    }
                    //设置城市名称
                    $('#city-name').html(regionName);
                    $('.city-box').val('');
                    map.setCurrentCity(regionName); // 设置地图显示的城市 此项是必须设置的
                    // var pointArray = [];
                    var polygonArray = [];
                    for (var i = 0; i < count; i++) {
                        var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,fillOpacity:0.01,strokeStyle:"dashed",strokeColor: "#0000ff"}); //建立多边形覆盖物
                        // map.addOverlay(ply);  //添加覆盖物
                        // pointArray = pointArray.concat(ply.getPath());
                        polygonArray.push(ply);
                    }
                    // map.setViewport(pointArray);    //调整视野
                    //addlabel();

                    markerManager.reloadCustomOverlays();
                    //设置边界缓存之前，先清理原有边界
                    if(markerManager.isBoundaryState()){
                        switchBoundary.apply(markerManager.menuItems.boundaryMenuItem);
                    }
                    thatData._regionName = regionName;
                    markerManager.data._boundary = polygonArray;
                    if(!!successCallBack && successCallBack instanceof Function){
                        successCallBack(regionName);
                    }
                });
            }
             getBoundary(regionName);
        }
        markerManager.openBoundary = function(){
            // console.log(this.data._boundary);
            if(!!this.data._boundary&&this.data._boundary.length>0){
                for(var n =0 ;n< this.data._boundary.length;n++){
                    baiduMap.addOverlay(this.data._boundary[n]);
                }
                this.data._boundaryState = true;
            }
        }
        markerManager.closeBoundary = function(){
            for(var n =0 ;n< this.data._boundary.length;n++){
                baiduMap.removeOverlay(this.data._boundary[n]);
            }
            this.data._boundaryState = false;
        }
        markerManager.isBoundaryState = function() {
            return this.data._boundaryState;
        }
        markerManager.addMarker = function (key, marker) {
            this.data[key] = !!this.data[key] ? this.data[key] : [];
@@ -198,7 +285,32 @@
                }
            }
        }
        markerManager.addOverlaysToBmap = function (overlays) {
            if(!!overlays && overlays instanceof Object){
                for(var n in overlays){
                    var overlay = overlays[n];
                    baiduMap.addOverlay(overlay);
                }
            }else {
                throw new Error("in addOverlaysToBmap overlays is not list");
            }

        }
        markerManager.reloadCustomOverlays = function() {
            if(!!markerManager.data['mpoint']){
                markerManager.addOverlaysToBmap(markerManager.data['mpoint']);
            }
            if(!!markerManager.data['star']){
                markerManager.addOverlaysToBmap(markerManager.data['star']);
            }
            if(markerManager.isBoundaryState()){
                markerManager.openBoundary();
            }
        }
        function clearBaiduOverlays() {
            baiduMap.clearOverlays();//先清空百度覆盖物
            markerManager.reloadCustomOverlays();
        }
        function clearOverlays() {
            for (var key in markerManager.data) {
                markerManager.data[key] = [];
@@ -206,7 +318,6 @@
            }
            baiduMap.clearOverlays();
        }

        function removeOverlay(key, marker) {
            baiduMap.removeOverlay(marker);
            markerManager.removeMarker(key, marker);
@@ -228,6 +339,7 @@
            }));
            marker.addContextMenu(markerMenu);
        }

        function addMpoint(point) {
            var option = {
                enableDragging: true
@@ -253,7 +365,19 @@
            // option.offset = new BMap.Size(0,-15);
            addMarker(point, option);
        }

        function switchBoundary() {
            if(!markerManager.isBoundaryState()){
                markerManager.openBoundary();
                if(markerManager.isBoundaryState()){
                    this.setText("关闭边界");
                }else {
                    alert('请设置当前城市');
                }
            }else {
                markerManager.closeBoundary();
                this.setText("打开边界");
            }
        }
        function mapInit() {
            var map = new BMap.Map("mapCanvas");
            this.baiduMap = map;
@@ -313,6 +437,20 @@
                    }
                },
                {
                    id: 'boundaryMenuItem',
                    text: '打开边界',
                    callback: function () {
                        var that = this;
                        switchBoundary.apply(this);
                    }
                },
                {
                    text: '清空百度地标',
                    callback: function (menuItem) {
                        clearBaiduOverlays();
                    }
                },
                {
                    text: '清空地图',
                    callback: function (menuItem) {
                        var result = confirm('注意! 注意! 注意! 一旦清除后将无法恢复')
@@ -336,6 +474,9 @@
                        width: 120,
                        iconUrl: item.icon
                    });
                    if(item.id == "boundaryMenuItem"){
                        markerManager.menuItems.boundaryMenuItem = menuItem;
                    }
                    menu.addItem(menuItem);
                    if (item.switch) {
                        switchMenuItems[item.handleType] = menuItem;
@@ -351,11 +492,32 @@
        }
        (function ($) {
            var map = mapInit();
            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map},
                onMarkersSet:function () {
                    markerManager.reloadCustomOverlays();
                }
            });
            $('#setCityBtn').click(function () {
                var cityName = $('.city-box').val();
                if(!!cityName){
                    baiduMap.centerAndZoom(cityName);
                    markerManager.setRegionName(cityName,function () {
                    },function (value) {
                        alert('未找到名为【'+value+'】的城市');
                    })
                }
            });
            // 搜索点击
            $('.search-btn').on('click', function (args) {
                var searchValue = $('.search-box').val();
                if (!!searchValue) {
                    baiduMap.centerAndZoom(searchValue);
                    markerManager.setRegionName(searchValue,
                        function (searchValue) {
                        },function (searchValue) {
                        local.search(searchValue);
                    });
                }
            });
            markerManager.bindSelect("mpoint", "#mpointCount");