dataserver_management_map_ui_sh2000/scripts/mod/menu/vector.js

/**
 * [ONEMAP.M.projectController]
 * @return {[object]}
 */
define(function (tplLayout) {

    /**
     * 初始化并订阅事件
     * @return {[type]} [description]
     */
    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     * 数据存放
     */
    var modValue = {
        VECTOR: {},
        model: {},
        seleted_guid: null,
        stereoscopic_handle: null,
    }

    /**
     * 状态值
     * @type {Boolean}
     * @default false
     * @private
     */
    var status = {
        initialized: false,
        isShowChild: false,
        connect: false,
        webSocketState: false
    };

    function init() {
        if (!localStorage.getItem("systemToken")) {
            ONEMAP.C.publisher.publish({
                type: 'warning',
                message: '用户尚未登录！'
            }, 'noteBar::add');
            return;
        }
        if (!status.initialized) {
            subscribe();
            bindEvent();
            // prototypeBind();
            status.initialized = true;
            // $("#threeData").parent().find(".menu-content").show();
        }
        ONEMAP.C.publisher.publish({
            modName: 'vector'
        }, 'menuListClick');
    }

    function prototypeBind() {
        //1.0GLTG插件
        var fixGltf = function (gltf) {
            if (!gltf.extensionsUsed) {
                return;
            }
            var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
            var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
            // 中招了。。
            if (v !== -1) {
                gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
                gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
                gltf.extensions = gltf.extensions || {};
                gltf.extensions['KHR_techniques_webgl'] = {};
                gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
                gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
                gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
                var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;

                gltf.materials.forEach(function (mat, index) {
                    gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
                    gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];

                    var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];

                    for (var value in vtxfMaterialExtension.values) {
                        var us = techniques[vtxfMaterialExtension.technique].uniforms;
                        for (var key in us) {
                            if (us[key] === value) {
                                vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
                                delete vtxfMaterialExtension.values[value];
                                break;
                            }
                        }
                    };
                });

                techniques.forEach(function (t) {
                    for (var attribute in t.attributes) {
                        var name = t.attributes[attribute];
                        t.attributes[attribute] = t.parameters[name];
                    };

                    for (var uniform in t.uniforms) {
                        var name = t.uniforms[uniform];
                        t.uniforms[uniform] = t.parameters[name];
                    };
                });
            }
        }
        Object.defineProperties(Cesium.Model.prototype, {
            _cachedGltf: {
                set: function (value) {
                    this._vtxf_cachedGltf = value;
                    if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
                        fixGltf(this._vtxf_cachedGltf._gltf);
                    }
                },
                get: function () {
                    return this._vtxf_cachedGltf;
                }
            }
        });
    }

    function bindEvent() {
        $.ajax({
            type: "POST",
            headers: {
                token: localStorage.getItem("systemToken"),
            },
            data: {
                id: onemapUrlConfig.columnConfig.vector.id,
            },
            dataType: "json",
            url: onemapUrlConfig.DMS_URL + '/dms/column/selectChild',
            success: function (result) {
                if (result.code != 200) return
                let data = result.content;
                let thrData = data.map(function (item) {
                    return {
                        "category": "倾斜摄影",
                        "info": "",
                        "type": "vector",
                        "name": item.title,
                        "item": item
                    }
                })
                let threeLength = thrData.length;
                var ul = $('<ul class="menu-content"></ul>');
                for (var i = 0; i < threeLength; i++) {
                    var threeDlist = $('<li class="item" cid="' + i + '"><input type="checkbox" class="zt-cbx" layer=""><span class="meun-checkBox menu-select-no"></span><span class="no-bg">' + thrData[i].name + '</span></li>');
                    ul.append(threeDlist);
                }
                var html = ul.html();
                $(".vectorContent .menu-content").html(html);

                $(".vectorContent li").unbind('click').bind('click', function () {
                    var menuCheckBox = $(this).find('.meun-checkBox');
                    var ztCbx = $(this).find('.zt-cbx');
                    if (menuCheckBox.hasClass("menu-select-no")) {

                        menuCheckBox.removeClass('menu-select-no').addClass("menu-select");

                        if (!map23DData.display.map3D) {
                            $("#mapModelChange .bg")[0].click()
                        }

                        var idx = $(this).attr('cid');
                        var modelData = thrData[idx];
                        var guid = null
                        var options = {};
                        let that = this;
                        $.ajax({
                            type: "POST",
                            data: {
                                columnId: modelData.item.id,
                                token: localStorage.getItem("systemToken"),
                            },
                            dataType: "json",
                            url: onemapUrlConfig.DMS_URL + '/dms/content/getVectorData',
                            success: function (result) {
                                if (result.code != undefined) {
                                    ONEMAP.C.publisher.publish({
                                        type: 'warning',
                                        message: result.message,
                                    }, 'noteBar::add');
                                    return
                                }
                                guid = add3DVECTOR({ data: result });
                                options = {
                                    action: "add",
                                    DOM: {
                                        guid: guid,
                                        type: "VECTOR",
                                        name: $(that).find('.no-bg').text(),
                                    },
                                    mod: "VECTOR"
                                }

                                if (!guid) return

                                ztCbx.attr("layer", guid);
                                ztCbx.attr("class", "zt-cbx " + guid);

                                ONEMAP.M.myLayers.myLayerControl(options); // 添加信息到“我的图层”
                                ONEMAP.C.publisher.subscribe(layerAction, guid);
                            }
                        })

                    } else {
                        menuCheckBox.removeClass('menu-select').addClass("menu-select-no");
                        var guid = ztCbx.attr("layer");
                        removeVECTOR(guid)
                        ONEMAP.M.myLayers.myLayerControl({
                            action: "remove",
                            DOMid: guid
                        }); // 移除数据层
                    }
                })
            },
            error: function (result) {

            }
        })
    }


    function layerAction(options) {
        if (options.guid.split("-")[0] == "VECTOR") {
            if (options.action == "remove") {
                removeVECTOR(options.guid)
            } else if (options.action == "opacity") {
                opacityVECTOR(options)
            } else if (options.action == "controlShow") {
                controlShowVECTOR(options)
            } else if (options.action == "up" || options.action == "down") {

            } else if (options.action == "location") {
                locationVECTOR(options)
            }
        }
    }

    /**
     * 加载/移除倾斜摄影
     * @return {[type]} [description]
     */
    function add3DVECTOR(options) {
        var guid = map23DControl.buildGuid('VECTOR-3DData');
        Cesium.GeoJsonDataSource.load(options.data).then(
            function (dataSource) {
                dataSource.name = guid;
                map3DViewer.map.dataSources.add(dataSource);
                modValue.VECTOR[guid] = dataSource;
                var entities = dataSource.entities.values;
                for (var i = 0; i < entities.length; i++) {
                    var entity = entities[i];
                    if (entity.billboard) {
                        entity.billboard = undefined;
                        entity.point = new Cesium.PointGraphics({
                            show: true,
                            pixelSize: 15,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            color: Cesium.Color.fromCssColorString("#aed0ff"),
                            outlineColor: Cesium.Color.fromCssColorString("#3388ff"),
                            outlineWidth: 2,

                            scaleByDistance: new Cesium.NearFarScalar(10000, 1, 20000, 0.5),
                            // translucencyByDistance: new Cesium.NearFarScalar(1500, 1, 20000, 0.2),
                            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
                        })
                    }
                    if (entity.polyline) {
                        entity.polyline.width = 4;
                        entity.polyline.material = Cesium.Color.fromCssColorString("#3388ff"); // 颜色
                    }
                    if (entity.polygon) {
                        entity.polygon.height = 0.2;
                        entity.polygon.outline = true; // 边框是否显示
                        entity.polygon.outlineColor = Cesium.Color.fromCssColorString("#3388ff"); // 边框颜色
                        entity.polygon.outlineWidth = 4; // 边框宽度
                        entity.polygon.material = Cesium.Color.fromCssColorString("#aed0ff");// 填充色
                    }
                }
                var extentR = turf.bbox(options.data);
                map3DViewer.map.camera.flyTo({
                    destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                });
                modValue.VECTOR[guid + "_extent"] = extentR;
            }
        );
        return guid;
    };

    function removeVECTOR(guid) {
        // map3DViewer.map.imageryLayers.remove(modValue.VECTOR[guid]);
        // delete modValue.VECTOR[guid]; 
        map3DViewer.map.dataSources.remove(map3DViewer.map.dataSources.getByName(guid)[0]);
        delete modValue.VECTOR[guid];
    }

    function opacityVECTOR(options) {
        modValue.VECTOR[options.guid].entities.values.map(function (entity) {
            if (entity.point) {
                entity.point = new Cesium.PointGraphics({
                    show: true,
                    pixelSize: 15,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    color: Cesium.Color.fromCssColorString("#aed0ff").withAlpha(options.options.opacity),
                    outlineColor: Cesium.Color.fromCssColorString("#3388ff").withAlpha(options.options.opacity),
                    outlineWidth: 2,
                    scaleByDistance: new Cesium.NearFarScalar(10000, 1, 20000, 0.5),
                })
            }
            if (entity.polyline) {
                entity.polyline.material = Cesium.Color.fromCssColorString("#3388ff").withAlpha(options.options.opacity); // 颜色
            }
            if (entity.polygon) {
                entity.polygon.outlineColor = Cesium.Color.fromCssColorString("#3388ff").withAlpha(options.options.opacity); // 边框颜色 
                entity.polygon.material = Cesium.Color.fromCssColorString("#aed0ff").withAlpha(options.options.opacity);// 填充色
            }
        })
    }

    function controlShowVECTOR(options) {
        if (options.options.show)
            modValue.VECTOR[options.guid].show = true
        if (!options.options.show)
            modValue.VECTOR[options.guid].show = false
    }

    function locationVECTOR(options) {
        let extentR = modValue.VECTOR[options.guid + "_extent"]
        map3DViewer.map.camera.flyTo({
            destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
        });
    }

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

    }

    /**
     * 界面重置
     * @return {[type]} [description]
     */
    function layoutResize(options) {
        if (options.modName != "vector") {
            remove();
        } else {
            if (status.isShowChild) {
                remove();
            } else {
                $("#menu .vectorContent").addClass('active');
                status.isShowChild = true;
                if (map23DData.show3DAlert) {
                    ONEMAP.C.publisher.publish('3D', 'layout::mapStyle');
                }
            }
        }
    }

    /**
     * 模块移除
     * @return {[type]} [description]
     */
    function remove() {
        //取消订阅
        unSubscribe();

        $("#menu .vectorContent").removeClass('active');
        status.isShowChild = false;
    }

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

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

    }

    return ONEMAP.M.threeData = {
        init: init
    }
});