调整安防视频页面及逻辑

czt

3 天以前 51faf3e9c3c613e7fb12db6c88356946f2429e0c

 fzzy-igdss-web/src/main/resources/static/group/gis-map.js

@@ -13,6 +13,35 @@
    return hex;
}

//---------------------------------------------------------------------------------
//just some colors
// var colors = [
//     "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
//     "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
//     "#651067", "#329262", "#5574a6", "#3b3eac"
// ];
// var colors = [
//     "#3366cc",
//     "#191970",
//     "#000080",
//     "#6495ED",
//     "#483D8B",
//     "#6A5ACD",
//     "#0000CD",
//     "#7B68EE",
//     "#4169E1",
//     "#8470FF",
//     "#0000FF",
//     "#1E90FF",
//     "#00BFFF",
//     "#87CEEB",
//     "#87CEFA",
//     "#4682B4",
//     "#B0C4DE",
//     "#ADD8E6",
//     "#B0E0E6",
//     "#3b3eac"
// ];
// 颜色辅助方法
var colors = [];
var num = 0;
@@ -27,6 +56,7 @@
        eventSupport: true, //打开事件支持
        map: map
    });
    console.log(districtExplorer);
    //监听feature的hover事件
    districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
        toggleHoverFeature(feature, e.type === 'featureMouseover',
@@ -41,6 +71,7 @@

//feature被点击
    districtExplorer.on('featureClick', function(e, feature) {

        var props = feature.properties;
        //如果存在子节点
        // if (props.childrenNum > 0) {
@@ -52,15 +83,18 @@

//外部区域被点击
    districtExplorer.on('outsideClick', function(e) {

        districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {

            if (routeFeatures && routeFeatures.length > 1) {
                //切换到省级区域
               // switch2AreaNode(routeFeatures[1].properties.adcode);
                renderAreas(routeFeatures[1].properties.adcode);
            } else {
                //切换到全国
                switch2AreaNode(610000);
                switch2AreaNode(650000);
            }

        }, {
            levelLimit: 2
        });
@@ -69,8 +103,10 @@

//当前聚焦的区域
var currentAreaNode = null;

//鼠标hover提示内容
var $tipMarkerContent = $('<div class="tipMarker top" style="color: #1E9CFF;font-size: 18px;weight:100px;"></div>');

var tipMarker = new AMap.Marker({
    content: $tipMarkerContent.get(0),
    offset: new AMap.Pixel(0, 0),
@@ -79,12 +115,17 @@

//根据Hover状态设置相关样式
function toggleHoverFeature(feature, isHover, position) {

    tipMarker.setMap(isHover ? map : null);

    if (!feature) {
        return;
    }

    var props = feature.properties;

    if (isHover) {

        //更新提示内容
        $tipMarkerContent.html("　　　" + props.name);
        //更新位置
@@ -96,6 +137,7 @@
    //更新相关多边形的样式
    var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
    for (var i = 0, len = polys.length; i < len; i++) {

        polys[i].setOptions({
            fillOpacity: isHover ? 0.5 : 0.35
        });
@@ -106,34 +148,47 @@

//绘制区域面板的节点
function renderAreaPanelNode(ele, props, color) {

    var $box = $('<li/>').addClass('lv_' + props.level);

    var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
        'data-adcode': props.adcode,
        'data-level': props.level,
        'data-children-num': props.childrenNum || void(0),
        'data-center': props.center.join(',')
    }).html(props.name).appendTo($box);

    if (color) {
        $h2.css('borderColor', color);
    }

    //如果存在子节点
    if (props.childrenNum > 0) {

        //显示隐藏
        $('<div class="showHideBtn"></div>').appendTo($box);

        //子区域列表
        $('<ul/>').addClass('sublist lv_' + props.level).appendTo($box);

        $('<div class="clear"></div>').appendTo($box);

        if (props.level !== 'country') {
            $box.addClass('hide-sub');
        }
    }

    $box.appendTo(ele);
}


//填充某个节点的子区域列表
function renderAreaPanel(areaNode) {

    var props = areaNode.getProps();

    var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist');

    if (!$subBox.length && props.childrenNum) {
        //父节点不存在，先创建
        renderAreaPanelNode($('#area-tree'), props);
@@ -142,8 +197,11 @@
    if ($subBox.attr('data-loaded') === 'rendered') {
        return;
    }

    $subBox.attr('data-loaded', 'rendered');

    var subFeatures = areaNode.getSubFeatures();

    //填充子区域
    for (var i = 0, len = subFeatures.length; i < len; i++) {
        renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
@@ -154,12 +212,16 @@
function renderAreaPolygons(areaNode) {
    //更新地图视野
    map.setBounds(areaNode.getBounds(), null, null, true);

    //清除已有的绘制内容
    districtExplorer.clearFeaturePolygons();

    //绘制子区域
    districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

        var fillColor = colors[i % colors.length];
        var strokeColor = colors[colors.length - 1 - i % colors.length];

        return {
            cursor: 'default',
            bubble: true,
@@ -170,6 +232,7 @@
            fillOpacity: 0.35, //填充透明度
        };
    });

    //绘制父区域
    districtExplorer.renderParentFeature(areaNode, {
        cursor: 'default',
@@ -181,16 +244,24 @@
        fillOpacity: 0.35, //填充透明度
    });
}

//切换区域后刷新显示内容
function refreshAreaNode(areaNode) {

    districtExplorer.setHoverFeature(null);

    renderAreaPolygons(areaNode);

    //更新选中节点的class
    var $nodeEles = $('#area-tree').find('h2');

    $nodeEles.removeClass('selected');

    var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');

    //展开下层节点
    $selectedNode.closest('li').removeClass('hide-sub');

    //折叠下层的子节点
    $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
}
@@ -199,21 +270,31 @@
function switch2AreaNode(adcode, callback) {
    //-----------------------刷新数据
    county = adcode;
    ajaxFoodNum();
    // ajaxFoodNum();


    if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
        return;
    }

    loadAreaNode(adcode, function(error, areaNode) {

        if (error) {

            if (callback) {
                callback(error);
            }

            return;
        }

        currentAreaNode = window.currentAreaNode = areaNode;

        //设置当前使用的定位用节点
        districtExplorer.setAreaNodesForLocating([currentAreaNode]);

        refreshAreaNode(areaNode);

        if (callback) {
            callback(null, areaNode);
        }
@@ -222,15 +303,22 @@

//加载区域
function loadAreaNode(adcode, callback) {

    districtExplorer.loadAreaNode(adcode, function(error, areaNode) {

        if (error) {

            if (callback) {
                callback(error);
            }

            console.error(error);

            return;
        }

        renderAreaPanel(areaNode);

        if (callback) {
            callback(null, areaNode);
        }
@@ -238,11 +326,14 @@
}

$('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) {

    if (e.type === 'mouseleave') {
        districtExplorer.setHoverFeature(null);
        return;
    }

    var adcode = $(this).attr('data-adcode');

    districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode));
});

@@ -253,19 +344,28 @@
});

$('#area-tree').on('click', '.showHideBtn', function() {

    var $li = $(this).closest('li');

    $li.toggleClass('hide-sub');

    if (!$li.hasClass('hide-sub')) {

        //子节点列表被展开
        var $subList = $li.children('ul.sublist');

        //尚未加载
        if (!$subList.attr('data-loaded')) {

            $subList.attr('data-loaded', 'loading');

            $li.addClass('loading');

            //加载
            loadAreaNode($li.children('h2').attr('data-adcode'), function() {

                $li.removeClass('loading');
            });
        }
    }
});
});