dataserver_qp_23D_zhsj/scripts/mod/layerVue/raster.js

/**
 * [ONEMAP.M.projectController]
 * @return {[object]}
 */
define([
    'html!templates/menu/cartodbInfo',
    'css!styles/menu/cartodbInfo',
], function (dialogLayout) {

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

    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;
                }
            }
        });
    }

    async function add(item, cancelSelected) {
        modValue.cancelSelected = cancelSelected
        // if (ONEMAP.M.myLayers.checkLength() >= map23DConfig.layerMaxLength) {
        //     ONEMAP.C.publisher.publish({ type: 'warning', message: '图层数量已达上限' }, 'noteBar::add');
        //     modValue.cancelSelected(item.id)
        //     return;
        // }
        var modelData = {
            "category": "倾斜摄影",
            "info": "",
            "type": "raster",
            "name": item.title,
            "item": item,
            "layerInfo": item
        }
        var guid = null
        var options = {};
        guid = await add3DRASTER(modelData);
        options = {
            action: "add",
            DOM: {
                guid: guid,
                type: "RASTER",
                name: item.title,
            },
            mod: "RASTER"
        }

        if (!guid) return

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

    }

    function remove(options) {
        var guid = options.guid ? options.guid : "RASTER--" + options.id;
        removeRASTER(guid)
        modValue.cancelSelected(guid);
        ONEMAP.M.myLayers.myLayerControl({
            action: "remove",
            DOMid: guid
        }); // 移除数据层
        closeEntityPropertiesDialog();
    }


    function layerAction(options) {
        if (options.guid.split("--")[0] == "RASTER") {
            if (options.action == "remove") {
                // removeRASTER(options.guid)
                remove(options)
                modValue.cancelSelected(options.guid.split("--")[1]);
            } else if (options.action == "opacity") {
                opacityRASTER(options)
            } else if (options.action == "controlShow") {
                controlShowRASTER(options)
            } else if (options.action == "up" || options.action == "down") {

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

    /**
     * 加载/移除倾斜摄影
     * @return {[type]} [description]
     */
    function add3DRASTER(options) {
        return new Promise((resolve, reject) => {
            // 0 arcgis_server

            // 6 json

            // 1 xyz
            // 2 arcgis-vectortile
            // 3 arcgis-tile
            // 4 tdt
            // 7 cartodb
            // 8 arcgis-dynamic 
            // 9 wms 

            // 5 3dtiles
            var guid = 'RASTER--' + options.layerInfo.id
            var items = options.item;
            addMapClickEvent();
            var layerObj = null
            if (items.c_tile_server_type == "1") {
                // xyz
                layerObj = new Cesium.UrlTemplateImageryProvider({
                    url: items.c_url,
                })
                var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
                // var bbox = JSON.parse(items.c_bbox)
                // var extentR = turf.bbox(bbox);
                // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
                // // 二维地图定位异常 
                // map3DViewer.map.camera.flyTo({
                //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                // });
                modValue.RASTER[guid] = layer
                // modValue.RASTER[guid + "_extent"] = extentR
                resolve(guid);
            } else if (items.c_tile_server_type == "2") {
                // arcgis-vectortile

            } else if (items.c_tile_server_type == "3") {
                // arcgis-tile
                layerObj = new Cesium.CGCS2000ArcGisMapServerImageryProvider({
                    url: items.c_url,
                })
                var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
                // var bbox = JSON.parse(items.c_bbox)
                // var extentR = turf.bbox(bbox);
                // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
                // // 二维地图定位异常 
                // map3DViewer.map.camera.flyTo({
                //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                // });
                modValue.RASTER[guid] = layer
                // modValue.RASTER[guid + "_extent"] = extentR
                resolve(guid);
            } else if (items.c_tile_server_type == "4") {
                // tdt
                layerObj = new Cesium.WebMapTileServiceImageryProvider({
                    url: items.c_url + "&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=default&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}"
                });
                var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
                // var bbox = JSON.parse(items.c_bbox)
                // var extentR = turf.bbox(bbox);
                // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
                // // 二维地图定位异常 
                // map3DViewer.map.camera.flyTo({
                //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                // });
                modValue.RASTER[guid] = layer
                // modValue.RASTER[guid + "_extent"] = extentR
                resolve(guid);
            } else if (items.c_tile_server_type == "7") {
                // cartodb
                let note = JSON.parse(items.c_note);
                let temId = note.id.replace(/-/g, '_')
                fetch('http://121.43.55.7:3000/user/dev/api/v1/map/named/tpl_' + temId, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    mode: "cors",
                }).then(resp => resp.json()).then(responses => {
                    var url = 'http://121.43.55.7:3000/user/dev/api/v1/map/' + responses.layergroupid + '/{z}/{x}/{y}.png'
                    let layerObj = new Cesium.UrlTemplateImageryProvider({
                        url: url,
                    });
                    var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
                    layer.layerType = "cartodb"
                    layer.layerData = options.item
                    // var bbox = JSON.parse(items.c_bbox)
                    // var extentR = turf.bbox(bbox);
                    // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
                    // // 二维地图定位异常 
                    // map3DViewer.map.camera.flyTo({
                    //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                    // });
                    modValue.RASTER[guid] = layer
                    // modValue.RASTER[guid + "_extent"] = extentR
                    resolve(guid);
                })
            } else if (items.c_tile_server_type == "8") {
                // arcgis-dynamic

            } else if (items.c_tile_server_type == "9") {
                // wms 
                let note = JSON.parse(items.c_note);
                if (items.c_epsg == "EPSG:sh2000"){
                    layerObj = new Cesium.WebMapServiceImageryProvider({
                        url: items.c_url,
                        layers: note.layers,
                        parameters: {
                            TRANSPARENT: true,
                            format: note.format,
                        },
                        tilingScheme:new Cesium.SHmapMercatorTilingScheme()
                    });
                }else{
                    layerObj = new Cesium.WebMapServiceImageryProvider({
                        url: items.c_url,
                        layers: note.layers,
                        parameters: {
                            TRANSPARENT: true,
                            format: note.format,
                        },
                    });
                }
               
                // if (items.c_epsg == "EPSG:sh2000")
                //     layerObj.
                var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
                // var bbox = JSON.parse(items.c_bbox)
                // var extentR = turf.bbox(bbox);
                // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
                // // 二维地图定位异常 
                // map3DViewer.map.camera.flyTo({
                //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
                // });
                modValue.RASTER[guid] = layer
                // modValue.RASTER[guid + "_extent"] = extentR
                resolve(guid);
            }
            // var layer = map3DViewer.map.imageryLayers.addImageryProvider(layerObj);
            // // var bbox = JSON.parse(items.c_bbox)
            // // var extentR = turf.bbox(bbox);
            // // Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3])
            // // // 二维地图定位异常 
            // // map3DViewer.map.camera.flyTo({
            // //     destination: Cesium.Rectangle.fromDegrees(extentR[0], extentR[1], extentR[2], extentR[3]),
            // // });
            // modValue.RASTER[guid] = layer
            // // modValue.RASTER[guid + "_extent"] = extentR
            // resolve(guid);
        })
    };

    function addMapClickEvent() {
        if (modValue.handler != null) return;
        modValue.handler = new Cesium.ScreenSpaceEventHandler(map3DViewer.map.canvas);
        // 监听鼠标点击事件
        modValue.handler.setInputAction(function (click) {
            if (ONEMAP.M.toolsBar.status.toolsShow) return;
            let cartesian = map3DViewer.map.scene.globe.pick(map3DViewer.map.camera.getPickRay(click.position), map3DViewer.map.scene);
            if (Cesium.defined(cartesian)) {
                // 将笛卡尔坐标转换为经纬度坐标
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var longitude = Cesium.Math.toDegrees(cartographic.longitude)
                var latitude = Cesium.Math.toDegrees(cartographic.latitude)
                // for (const key in modValue.RASTER) {
                //     if (Object.hasOwnProperty.call(modValue.RASTER, key)) {
                //         const layer = modValue.RASTER[key];
                //         if (layer.imageryProvider._resource.url.indexOf("user/dev") >= 0) {
                //             if(layer.alpha != 0 && layer.show){
                //             }
                //         }
                //     }
                // }
                let pickRay = map3DViewer.map.camera.getPickRay(click.position);
                let pickLayer = map3DViewer.map.imageryLayers.pickImageryLayers(pickRay, map3DViewer.map.scene)
                let layers = []
                for (let i = 0; i < pickLayer.length; i++) {
                    const layer = pickLayer[i];
                    if (layer.alpha != 0 && layer.show && layer.layerType != undefined) {
                        if (layer.layerType == "cartodb") {
                            layers.push(layer)
                        }
                    }
                }
                createCartodb(layers, longitude, latitude, function (resultArr) {
                    console.log(resultArr);
                    // 判断数据 展示弹窗
                    for (let i = 0; i < resultArr.length; i++) {
                        const layer = resultArr[i];
                        if (layer.length > 0) {
                            // 构建弹窗
                            openEntityPropertiesDialog(layer[0]);
                            break;
                        } else {
                            // 无数据
                        }

                    }
                });
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    function openEntityPropertiesDialog(properties) {
        if ($("#cartodbInfoModal").length != 1) {
            $('body').append(dialogLayout);
            //拖拽
            $("#cartodbInfoModal .popup-ct").dragmove($('#cartodbInfoModal'));
        } else {
            $("#cartodbInfoForm table").empty();
        }
        $("#cartodbInfoModal .title").text(properties.Name)
        let html = `<tr><td><p>字段</p></td><td>值</td></tr>`
        $("#cartodbInfoForm table").append(html)
        Object.getOwnPropertyNames(properties).map(function (field) {
            if (field != "the_geom" && field != "the_geom_webmercator") {
                let html = `<tr><td><p>${field}</p></td><td>${properties[field]}</td></tr>`
                $("#cartodbInfoForm table").append(html)
            }
        })
        $("#cartodbInfoModal .close").bind('click', function () {
            closeEntityPropertiesDialog();
        });
    }
    function closeEntityPropertiesDialog() {
        $("#cartodbInfoModal").remove()
    }

    function createCartodb(layerArr, lon, lat, callback) {
        tt(layerArr, lon, lat, 0, [])
        function tt(layerArr, lon, lat, index, info) {
            if (layerArr.length <= 0) return;
            let layer = JSON.parse(layerArr[index].layerData.c_note);
            tableSearch(layer, layer.tables, lon, lat, 0, [], function (result) {
                info.push(result);
                if (layerArr.length > index + 1) {
                    data = []
                    tt(layerArr, lon, lat, index + 1, info, callback)
                } else {
                    callback(info);
                }
            })
        }
    }

    function tableSearch(layer, table, lon, lat, index, data, callback) {
        let sql = "";
        switch (layer.type) {
            case "Point":
                sql = "select *, ST_Distance(ST_Transform(t.the_geom, 3857), ST_Transform('SRID=4326;POINT(" + lon + " " + lat + ")'::geometry, 3857)) as distance from " + table[index].name + " t where ST_Distance(ST_Transform(t.the_geom, 3857), ST_Transform('SRID=4326;POINT(" + lon + " " + lat + ")'::geometry, 3857)) < 1000 ORDER BY distance ASC LIMIT 1;"
                console.log(sql)
                break;
            case "Polyline":

                break;
            case "Polygon":
                // "select * , st_asgeojson(the_geom) as geom, st_asgeojson(st_centroid(the_geom)) as center from "
                sql = "select * from " + table[index].name + " where ST_Within(st_geomfromtext('point(" + lon + " " + lat + ")',4326),the_geom)"
                break;
        }
        $.ajax({
            url: "http://121.43.55.7:3000/user/dev/api/v2/sql",
            type: 'GET',
            async: false, // 当设置为Ture时，Ajax异步执行。
            dataType: 'jsonp',
            data: { q: sql },
        }).done(function (responses) {
            if (responses.rows.length != 0) {
                data.push(responses.rows[0])
            }
            if (table.length > index + 1) {
                tableSearch(layer, table, lon, lat, index + 1, data, callback)
            } else {
                callback(data);
            }
        }).fail(function () {
        });
    }

    function removeMapClickEvent() {
        if (modValue.handler) {
            modValue.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            modValue.handler = null;
        }
    }

    function removeRASTER(guid) {
        map3DViewer.map.imageryLayers.remove(modValue.RASTER[guid]);
        delete modValue.RASTER[guid];
        if (Object.getOwnPropertyNames(modValue.RASTER).length == 0)
            removeMapClickEvent();
    }

    function opacityRASTER(options) {
        modValue.RASTER[options.guid].alpha = options.options.opacity;
    }

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

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

    return ONEMAP.M.Raster = {
        add: add,
        remove: remove,
    }
});