TDataView_ui/scripts/mod/tools/DXAnalysis.js

/**
 * [ONEMAP.M.mod]
 * @return {[object]}
 */
define(['html!templates/tools/DXAnalysis',
        'css!styles/tools/DXAnalysis',
    ],
    function(tplLayout) {

        /**
         * 模块数据 用于数据存储和外部调用
         * @type {Object}
         * 数据存放
         */
        var modValue = {
        };

        /**
         * 模块界面样式 例如：宽，高
         * @type {Object}
         */
        var styles = {};

        /**
         * 模块状态，用于存储模块的状态 例如：收起，关闭
         * @type {Object}
         */
        var status = {
            initialized:false,
            initsubscribe:false
        };

        /**
         * 查询参数
         * @type {Object}
         */
        var options = {};

        /**
         * 初始化并订阅事件
         * @return {[type]} [description]
         */
        function init() {
            if(!status.initialized){
                $('body').append(tplLayout);
                $('#DXAnalysisContent .popup-ct').dragmove($('#DXAnalysisContent'));
                var PXdom = document.getElementById("PXContent");
                modValue.PXchart = echarts.init(PXdom);
                var PDdom = document.getElementById("PDContent");
                modValue.PDchart = echarts.init(PDdom);
                status.initialized = true;
                //subscribe();
            }
            if(!status.initsubscribe){
                status.initsubscribe = true;
                subscribe();
            }
            ONEMAP.C.publisher.publish({
                modName: 'toolDX'
            }, 'tools:active');
        }

        /**
         * 设置界面
         */
        function setLayout() {

        }

        /**
         * 界面事件绑定
         * @return {[type]} [description]
         */
        function bindEvent() {

        }

        /**
         * 界面重置
         * @return {[type]} [description]
         */
        function layoutResize() {

        }

        /**
         * 注册订阅
         * @type {Function}
         * 推送：ONEMAP.C.publisher.publish(options,'moduleName::type');
         * 订阅：ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
         */ 
        function subscribe() {
            ONEMAP.C.publisher.subscribe(remove, 'tools:active');
        }

        /**
         * 取消订阅
         * @type {Function}
         * 取消订阅：ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
         */
        function unSubscribe() {
            ONEMAP.C.publisher.unSubscribe(remove, 'tools:active');
        }

        function clearMeasuring() {
            if (modValue.reGroup) {
                map23DControl.group({
                    action: 'remove',
                    guid: modValue.reGroup
                })
                modValue.reGroup = null;
            }
            if(modValue.imageOverlayGuid){
                map23DControl.imageOverlay({
                    action:'remove',
                    guid:modValue.imageOverlayGuid
                })
                modValue.imageOverlayGuid = null;
            }
        }

        function addMapEvent() {
            if (!modValue.drawRectangle) {
                modValue.drawRectangle = new L.Draw.Rectangle(map2DViewer.map);
            }
            if (modValue.reGroup) {
                map23DControl.group({
                    action: 'cleanAll',
                    guid: modValue.reGroup
                })
            } else {
                modValue.reGroup = map23DControl.group({
                    action: 'add',
                })
            }
            modValue.drawRectangle.enable();
            map2DViewer.map.on('draw:created', drawCreated);
        }

        function drawCreated(e) {
            modValue.rectangle = e.layer;
            modValue.rectangle.options.fillOpacity = 0;
            map2DViewer.groups[modValue.reGroup].addLayer(modValue.rectangle);
            modValue.rectangle.editing.enable();
            map2DViewer.map.on('edit', updateDXContent);
            updateDXContent();
        }

        function updateDXContent() {
            var latlngs = modValue.rectangle.getLatLngs()[0];
            var bbox = latlngs[1].lng+","+latlngs[1].lat+","+latlngs[3].lng+","+latlngs[3].lat;
            $("#DXAnalysisContent").show();
            $(".fenxialert").remove();
            //获取区域坡向数据
            $.ajax({
                type: "get",
                dataType: 'json',
                data: {
                   bbox:bbox
                },
                url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/aspect/bbox',
                beforeSend: ONEMAP.V.loading.load(),
                success: function (data) {
                    if (data.status == 'ok' && data.result) {
                        //echarts渲染
                        var PXIndex = [];
                        var PXData = [];
                        for(var i=0;i<data.result.length;i++){
                            var name = 22.5*i+"-"+22.5*(i+1);
                            PXIndex.push(name);
                            PXData.push({
                                value:data.result[i], name:name
                            })
                        }
                        
                        var app = {};
                        option = null;
                        option = {
                            title : {
                                text: '区域坡向统计',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series : [
                                {
                                    name: '坡向统计',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '50%'],
                                    data:PXData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        modValue.PXchart.setOption(option, true);
                        modValue.PXchart.resize();
                    } else {
                        $("<p class='fenxialert'>所选区域暂无数据</p>").appendTo($("#PXContent"))
                    } 
                },
                completer: ONEMAP.V.loading.loaded()
            });
            //获取区域坡度数据
            $.ajax({
                type: "get",
                dataType: 'json',
                data: {
                   bbox:bbox
                },
                url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/slope/bbox',
                beforeSend: ONEMAP.V.loading.load(),
                success: function (data) {
                    if (data.status == 'ok') {
                        //echarts渲染
                        $("#DXAnalysisContent .min_num").html(data.result.min);
                        $("#DXAnalysisContent .max_num").html(data.result.max);
                        var PXIndex = [];
                        var PXData = [];
                        for(var i=0;i<data.result.bins.length;i++){
                            PXIndex.push(data.result.bins[i].range);
                            PXData.push({
                                value:data.result.bins[i].percentage, name:data.result.bins[i].range
                            })
                        }
                        var app = {};
                        option = null;
                        option = {
                            title : {
                                text: '区域坡度统计',
                                x:'center'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series : [
                                {
                                    name: '坡度统计',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '50%'],
                                    data:PXData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        modValue.PDchart.setOption(option, true);
                        modValue.PDchart.resize();
                    } else {
                        $("<p class='fenxialert'>所选区域暂无数据</p>").appendTo($("#PDContent"))
                    } 
                },
                completer: ONEMAP.V.loading.loaded()
            });
            //获取坡度数据图片并添加到地图上
            var curzoom = map2DViewer.map.getZoom()+1;
            var imageUrl = onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/slope/bbox?bbox='+bbox+'&as_image=1&zoom='+curzoom;
            if(modValue.imageOverlayGuid){
                map23DControl.imageOverlay({
                    action:'update',
                    from:'23D',
                    guid:modValue.imageOverlayGuid,
                    type:'imageOverlay',
                    layers:{
                        opacity:1,//2D透明度
                        layerBounds: [[latlngs[1].lng, latlngs[1].lat], [latlngs[3].lng, latlngs[3].lat]],//左上角  右下角 
                        imageUrl2D:imageUrl,//2D图片地址
                        imageUrl3D:imageUrl//3D图片服务地址
                    }
                })
            }else{
                modValue.imageOverlayGuid = map23DControl.imageOverlay({
                    action:'add',
                    from:'23D',
                    type:'imageOverlay',
                    layers:{
                        opacity:1,//2D透明度
                        layerBounds: [[latlngs[1].lng, latlngs[1].lat], [latlngs[3].lng, latlngs[3].lat]],//左上角  右下角 
                        imageUrl2D:imageUrl,//2D图片地址
                        imageUrl3D:imageUrl//3D图片服务地址
                    }
                })
            }
        }

        function removeMapEvent() {
            clearMeasuring();
            map2DViewer.map.off('draw:created', drawCreated);
            map2DViewer.map.off('edit', updateDXContent);
            $("#DXAnalysisContent").remove();
            status.initialized = false;
            //取消订阅
            //unSubscribe();
        }
        /**
         * 模块移除
         * @return {[type]} [description]
         */
        function remove(options) {
            if (options.modName == 'toolDX') {
                if ($('#toolsBar .tools-dixing').hasClass('cur')) {
                    $('#toolsBar .tools-dixing').removeClass('cur');
                    removeMapEvent();
                } else {
                    $('#toolsBar .tools-dixing').addClass('cur');
                    addMapEvent();
                }
            } else {
                $('#toolsBar .tools-dixing').removeClass('cur');
                removeMapEvent();
            }
        }


        return ONEMAP.M.DXAnalysis = {
            init: init,
            remove: remove
        }
    });