web/public/gis/index.js

window.baseEnv = {}
var libPresets, paletteTool
document.ready = function (callback) {
    ///兼容FF,Google
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
            document.removeEventListener('DOMContentLoaded', arguments.callee, false);
            callback();
        }, false)
    }
    //兼容IE
    else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function () {
            if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                callback();
            }
        })
    } else if (document.lastChild == document.body) {
        callback();
    }
}

document.ready(function () {
    console.log('ready=>')
    document.querySelector('#prepare').classList.add('hide')

    LibPresets.getInstance().bindFn().then(ret => {
        libPresets = ret
        init()
        // document.querySelector('#prepare').classList.add('hide')
    })

})


const demoData = [
    {"title": "吉林", "data": {"变电": [0, 2, 2], "电力": [0, 18, 4]}}, {
        "title": "四平东",
        "data": {"变电": [0, 0, 0], "电力": [0, 8, 0]}
    }, {"title": "延吉西", "data": {"变电": [0, 3, 0], "电力": [0, 18, 5]}}, {
        "title": "德惠西",
        "data": {"变电": [0, 0, 1], "电力": [0, 8, 0]}
    }, {"title": "电力维修队", "data": {"变电": [0, 0, 0], "电力": [0, 0, 0]}}, {
        "title": "铁岭西",
        "data": {"变电": [2, 0, 0], "电力": [0, 6, 2]}
    }, {"title": "长春", "data": {"变电": [0, 1, 1], "电力": [0, 23, 1]}}, {
        "title": "长白山",
        "data": {"变电": [0, 1, 0], "电力": [0, 5, 2]}
    }]

async function init() {
    // mapbox threejs
    // run(demoData)
    let labelData
    window.addEventListener('message', (res) => {
        labelData = res.data.data
    })
    const ivl = setInterval(() => {
        if (labelData) {
            run(labelData)
            clearInterval(ivl)
        }
    }, 100)


}

function run(labelData) {
    setTimeout(() => {
        console.log('done')
        let Map = libPresets.Tools._ThreeMap.GetInstance()
        document.querySelector('#actions').style.display = 'block'
        document.querySelector('#gongqu').addEventListener('change',(evt) => {
            const checked = evt.target.checked
            console.log('checked',checked)
            Map.gongquGroup.visible = checked
            Map.labelGroup.traverse(label => {
                if(label.renderType === 0){
                    label.visible = checked
                }
            })
        })
        document.querySelector('#biandian').addEventListener('change',(evt) => {
            const checked = evt.target.checked
            console.log('checked',checked)
            Map.biandianGroup.visible = checked
            Map.labelGroup.traverse(label => {
                if(label.renderType === 2){
                    label.visible = checked
                }
            })
        })
        document.querySelector('#peidian').addEventListener('change',(evt) => {
            const checked = evt.target.checked
            console.log('checked',checked)
            Map.peidianGroup.visible = checked
            Map.labelGroup.traverse(label => {
                if(label.renderType === 1){
                    label.visible = checked
                }
            })
        })

        Map.Bootstrap('#container', 'map').then(async () => {
            const data = await loopFreshData()
            Map.markerList = Object.values(data.points).map(point => {
                const position = data.lnglat[point.name]
                return {
                    name: point.name,
                    text: point.name,
                    position: position,
                    style: point.style,
                    className: point.className,
                    showRGB: point.showRGB,
                    ident: point.ident,
                    event: point.event
                }
            })
            // Map.LineData = data.lines.map(item => {
            //     return item;
            // })
            if (Map.scene) {
                Map.initThreeCityMarkers();

                await Map.initThreeGeoJSON();
                // Map.initThreeUserSprites()

                data.lines.forEach(item => {
                    let points = []

                    let nameArr = []
                    if (item.pathPoints) {
                        item.pathPoints.forEach((pointName) => {
                            if (data.lnglat[pointName]) {
                                nameArr.push(pointName)
                                points.push(data.lnglat[pointName])
                            }
                        })
                    }
                    if (points?.length > 0) {
                        item.options = item.options || {}
                        Map.initThreeTubeLayer(item.options.name || nameArr.join('-'), points, item.options)
                    }
                })

                const objs = [
                    Map.tubeGroup.getObjectByName('Line1'),
                    Map.tubeGroup.getObjectByName('Line2'),
                    Map.tubeGroup.getObjectByName('ShadowLine'),
                    ...Map.flyLineGroup.children,
                    ...Map.scene.getObjectByName('boundaryGroup').children
                ]
                const group = new Map.THREE.Group();
                group.name = 'jl_road_group'
                Map.tubeMirrorGroup.add(group)
                objs.forEach(obj => {

                    const newObj = obj.clone();
                    newObj.name = 'TubeMirror@' + obj.name || Math.random()
                    if (newObj.layers) {
                        // newObj.layers.enable(0)
                    }
                    if (obj.material) {
                        newObj.material = obj.material.clone()
                        newObj.material.opacity = 0.1
                        newObj.material.transparent = true
                        newObj.material.color.set('rgb(20, 207, 246)')
                        newObj.material.depthTest = false;
                        newObj.material.depthWrite = false;
                        newObj.renderOrder = 10
                        // newObj.material.depthTest = false;
                        // newObj.material.depthWrite = false;
                        // newObj.position.renderOrder = 10
                    }
                    if (['TubeMirror@ShadowLine', 'TubeMirror@Line1', 'TubeMirror@Line2'].includes(newObj.name)) {
                        newObj.material.color.set('rgb(35,77,231)')
                        newObj.material.opacity = 0.2
                        newObj.position.z = Map.modelTopZ - 0.00002


                    }
                    if (['TubeMirror@DashLine1', 'TubeMirror@DashLine2', 'TubeMirror@DashLine3'].includes(newObj.name)) {
                        newObj.material.color.set('rgb(20, 207, 246)')
                        newObj.material.opacity = 0.1
                        newObj.position.z = Map.modelTopZ
                    }

                    Map.tubeMirrorGroup.add(newObj)


                    if (newObj.name.includes('TubeMirror@jl_bount_road')) {
                        group.position.z = 0.00045
                        group.add(newObj)
                        newObj.material.color.set('rgb(0, 0, 0)')
                        newObj.material.opacity = 0.10
                        newObj.material.depthTest = false;
                        newObj.material.depthWrite = false;
                        newObj.renderOrder = 10
                        // newObj.layers.enable(Map.bloomRenderLayer.currentLayerNum)
                    }
                })

                Map.tubeMirrorGroup.getObjectByName('TubeMirror@ShadowLine').visible = true
                // Map.scene.getObjectByName('faceMeshMiddle_吉林省').material.opacity = 0.8
                // Map.tubeMirrorGroup.applyMatrix4(Map.flipMatrix());
                // Map.tubeMirrorGroup.position.z = Map.modelHigherZ - 0.0002

                Map.mirrorGroup.add(Map.scene.getObjectByName('faceMesh_吉林省').clone())
                Map.mirrorGroup.add(Map.scene.getObjectByName('faceMeshBottom_吉林省').clone())
                Map.mirrorGroup.add(Map.scene.getObjectByName('active_area_吉林省').clone())

                Map.mirrorGroup.add(Map.scene.getObjectByName('faceMesh_铁岭市').clone())
                Map.mirrorGroup.add(Map.scene.getObjectByName('faceMeshBottom_铁岭市').clone())
                Map.mirrorGroup.add(Map.scene.getObjectByName('active_area_铁岭市').clone())
                Map.mirrorGroup.add(Map.scene.getObjectByName('ShadowHiddenLine').clone())
                Map.mirrorGroup.traverse(obj => {
                    if (obj.type === 'Group') {
                        return;
                    }
                    if (obj.name) {
                        obj.name = 'Mirror@' + obj.name
                    }
                    if (obj.material) {
                        obj.material = obj.material.clone()
                    }
                })
                // Map.mirrorGroup.add(Map.scene.getObjectByName('CityMarker_Group').clone())
                Map.mirrorGroup.applyMatrix4(Map.flipMatrix())
                Map.mirrorGroup.traverse(obj => {
                    if (["Mirror@faceMeshBottom_吉林省", "Mirror@faceMeshBottom_铁岭市"].includes(obj.name)) {
                        obj.material.opacity = 0.2
                        obj.material.color.set('rgb(1, 15, 37)')
                        obj.material.transparent = true
                    }
                    if (['Mirror@faceMesh_吉林省', 'Mirror@faceMesh_铁岭市'].includes(obj.name)) {
                        obj.material.opacity = 0.2
                    }
                    if (['Mirror@ShadowHiddenLine'].includes(obj.name)) {
                        obj.material.opacity = 0.2
                        obj.material.transparent = true
                        obj.position.z = Map.modelTopZ
                    }
                })
                Map.mirrorGroup.getObjectByName('Mirror@active_area_吉林省').material.uniforms.opacity.value = 0.1
                Map.mirrorGroup.getObjectByName('Mirror@active_area_铁岭市').material.uniforms.opacity.value = 0.1
            }
            Map.renderSiteTag(labelData);


            // Map.initThreeFlyLineLayer();
        })
    }, 0)

    // setInterval((e) => {
    //     loopFreshData(Map)
    // }, 5000)

    // let Map = libPresets.Tools._Earth.GetInstance()
    // Map.Bootstrap('container')


    // dxf.js

    // let dxfRender = libPresets.Tools._DxfRender.GetInstance()
    // dxfRender.fetchDxfFile()

    // let Map = libPresets.Tools._Earth.GetInstance()
    // Map.Bootstrap('container')
}

function loopFreshData() {
    return new Promise(re => {
        fetch('/gis/static/threeMap/set.json').then(res => res.json()).then(res => {
            re(res)
        })
    })
    // return new Promise((re, je) => {
    //     const base = {
    //         "url": "dashboard/api/ics/dcMaps",
    //         "type": "POST",
    //         "datasourceId": 139,
    //         "body": {},
    //         "urlParam": {},
    //         "header": {}
    //     }
    //     fetch('http://localhost:900/insight/api/v1/http-request', {
    //         method: 'post',
    //         body: JSON.stringify(base),
    //         headers: {
    //             'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIzOWE1M2I3ZDIwYzA1N2YxZTk5OWY1YTBlMWE5NmI5OTE4ZDA4IiwidWlkIjoxMDE2NDAsIm9yZ0lkIjo4OCwidXNlckNvZGUiOiJ6aGFuZ3lzMzYiLCJpYXQiOjE2NTEwNTAzMTh9.Qx0aPpQs5eZ9ZfrpP8efCYpObevUfBHDBmJG8tQlAXDU-7dvC9HcFTMeAj0sFX7iNEv2rx6wzbeM5jTbi1JsCg',
    //             'Content-Type': 'application/json'
    //         }
    //     }).then(res => res.json())
    //         .then(function (res) {
    //             if (res && res.data.code === 200) {
    //                 re(res.data.data)
    //             } else {
    //                 je(false)
    //             }
    //
    //         })
    // })

}

function xhrFetch(store, marker, storeKey, url, cb) {
    // console.log('xhrFetch=>', marker, storeKey, url)
    return new Promise(async (r, j) => {
        let ret = await store.Load(storeKey)
        if (ret) {
            window.baseEnv[storeKey] = ret
            r(ret)
        } else {
            $.ajax({
                type: 'get',
                url: url,
                data: {},
                dataType: 'json',
                async: true,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    // Handle progress
                    //Upload progress
                    xhr.addEventListener("progress", function (evt) {

                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            if (cb) {
                                cb(marker, percentComplete)
                            }
                        }
                    }, false);
                    return xhr;
                },
                cache: false,
                error: function (xhr, ajaxOptions, thrownError) {
                    j(xhr.responseText);
                },
                beforeSend: function () {
                },
                success: function (json) {
                },
                complete: async function (res) {
                    // console.log('complete')
                    window.baseEnv[storeKey] = res.responseJSON
                    if (storeKey === 'export') {
                        await libPresets.Tools._Localforage.GetInstance().Import(res.responseJSON, store.store, importProgressCb, false)
                    }
                    await store.Save(storeKey, res.responseJSON)
                    // await store.Save(storeKey, true)

                    r(res.responseJSON)
                }

            })
        }

    })

}

async function clearAllCache() {
    try {
        let result = await libPresets.Tools._Localforage.GetInstance().Bootstrap().store.clear()
        alert('清空成功')
    } catch (e) {
        alert('清空失败')
    }

}

async function removeListener() {
}

async function bindListener() {

}