1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/store/modules/popupParams.js

@@ -1,4 +1,8 @@
import leftNavsData from './pc/leftNavsData'
window.labelLayer = null
window.divIcon = null
window.divIcononces = null

const popupParams = {
    state: {
        ...leftNavsData.state,
@@ -23,7 +27,7 @@
        addTagPopup: false,
        addTagPosition: null,

        labelLayer: null, // 自定义标签图层
        // labelLayer: null, // 自定义标签图层
        addSignList: true,
        myviewer: null,
        nowlabelLayerData: {},
@@ -97,16 +101,16 @@
            state.addTagPosition = addTagPosition
        },
        initLabelLayer (state, val) {
            if (!state.labelLayer) {
                state.labelLayer = new global.DC.HtmlLayer('labelLayer')
                val.addLayer(state.labelLayer)
            if (!window.labelLayer) {
                window.labelLayer = new global.DC.HtmlLayer('labelLayer')
                val.addLayer(window.labelLayer)
            }
            state.myviewer = val
        },

        clearLabelLayerIcon (state, val) {
            if (state.labelLayer) {
                state.labelLayer.clear()
            if (window.labelLayer) {
                window.labelLayer.clear()
            }
        },
        openLabelLayer (state, val) {
@@ -149,7 +153,7 @@
            //       item: item,
            //     });
            //   });
            var popup = new global.DC.DivForms(state.viewer, {
            var box = new global.DC.DivForms(state.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
@@ -203,13 +207,13 @@
            commit,
            dispatch
        }, val) {
            val.viewer.camera.setView({
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    +val.jd,
                    +val.wd,
                    400.0
                    300.0
                ),
                orientation: {
                    // 指向
@@ -238,15 +242,15 @@
        }, val) {
            const list = val.list
            if (val.clear) {
                //     state.labelLayer.remove();
                state.labelLayer.clear()
                //     window.labelLayer.remove();
                window.labelLayer.clear()
            }
            if (val.add) { // 刷新列表
                state.addSignList = !state.addSignList
                return
            }
            for (const i in list) {
                const divIcon = new global.DC.DivIcon(
                window.divIcononces = new global.DC.DivIcon(
                    new global.DC.Position(
                        Number(list[i].jd),
                        Number(list[i].wd),
@@ -264,14 +268,18 @@
                          `
                )
                // 订阅事件
                divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                window.divIcononces.on(global.DC.MouseEventType.CLICK, (e) => {
                    if (state.pinchFlag == true) {
                        return
                    }

                    // console.log(e);
                    // return;
                    // 定制化窗体
                    const position = e.position
                    // const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    // console.log(position, lntLat, list[i], state.myviewer, "see")
                    new global.DC.DivForms(state.myviewer, {
                    var box = new global.DC.DivForms(global.viewer, {
                        domId: 'labelLayerid',
                        position: [
                            global.DC.Transform.transformWGS84ToCartesian(
@@ -283,13 +291,13 @@
                            )
                        ]
                    })
                    state.myviewer.camera.setView({
                    global.viewer.camera.setView({
                        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                        // fromDegrees()方法，将经纬度和高程转换为世界坐标
                        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                            lntLat[0],
                            lntLat[1],
                            400.0
                            950.0
                        ),
                        orientation: {
                            // 指向
@@ -304,7 +312,7 @@
                        data: list[i]
                    })
                })
                state.labelLayer.addOverlay(divIcon)
                window.labelLayer.addOverlay(window.divIcononces)
            }
        },
        addLabelLayerIconMobelUse ({
@@ -313,46 +321,57 @@
            dispatch
        }, val) {
            const list = val.list
            if (!state.labelLayer) {
                state.labelLayer = new global.DC.HtmlLayer('labelLayer')
                val.mviewer.addLayer(state.labelLayer)
                state.myviewer = val.mviewer
            if (!window.labelLayer) {
                window.labelLayer = new global.DC.VectorLayer('labelLayer')
                global.viewer.addLayer(window.labelLayer)
                // state.myviewer = val.mviewer
            }
            if (val.clear) {
                //     state.labelLayer.remove();
                state.labelLayer.clear()
                //     window.labelLayer.remove();
                window.labelLayer.clear()
            }
            if (val.add) { // 刷新列表
                state.addSignList = !state.addSignList
                return
            }
            for (const i in list) {
                const divIcon = new global.DC.DivIcon(
                const billboard = new global.DC.Billboard(
                    new global.DC.Position(
                        Number(list[i].jd),
                        Number(list[i].wd),
                        0
                    ), 'https://map.hit.edu.cn/images/tarrow_xq.png')

                const label = new global.DC.Label(
                    new global.DC.Position(
                        Number(list[i].jd),
                        Number(list[i].wd),
                        0
                    ),
                    `
                              <div class="tag-entitys-box">
                                  <div class="tag-content">
                                      ${list[i].name}
                                  </div>
                                  <div class="tag-angle-content">
                                      <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                                  </div>
                              </div>
                          `
                    list[i].name
                )

                label.setStyle({
                    fillColor: global.DC.Color.RED,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 8, // 边框大小，
                    font: '12px sans-serif',
                    pixelOffset: { x: 0, y: -24 }
                })

                // 订阅事件
                divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                    if (state.pinchFlag == true) {
                        return
                    }
                    // console.log(e);
                    // return;
                    // 定制化窗体
                    const position = e.position
                    // const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    // console.log(position, lntLat, list[i], state.myviewer, "see")
                    new global.DC.DivForms(state.myviewer, {
                    var box = new global.DC.DivForms(global.viewer, {
                        domId: 'labelLayerid',
                        position: [
                            global.DC.Transform.transformWGS84ToCartesian(
@@ -364,13 +383,13 @@
                            )
                        ]
                    })
                    state.myviewer.camera.setView({
                    global.viewer.camera.setView({
                        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                        // fromDegrees()方法，将经纬度和高程转换为世界坐标
                        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                            lntLat[0],
                            lntLat[1],
                            400.0
                            950.0
                        ),
                        orientation: {
                            // 指向
@@ -385,7 +404,53 @@
                        data: list[i]
                    })
                })
                state.labelLayer.addOverlay(divIcon)

                label.on(global.DC.MouseEventType.CLICK, (e) => {
                    if (state.pinchFlag == true) {
                        return
                    }
                    // console.log(e);
                    // return;
                    // 定制化窗体
                    // const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    // console.log(position, lntLat, list[i], state.myviewer, "see")
                    var box = new global.DC.DivForms(global.viewer, {
                        domId: 'labelLayerid',
                        position: [
                            global.DC.Transform.transformWGS84ToCartesian(
                                new global.DC.Position(
                                    Number(lntLat[0]),
                                    Number(lntLat[1]),
                                    Number(0)
                                )
                            )
                        ]
                    })
                    global.viewer.camera.setView({
                        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                        // fromDegrees()方法，将经纬度和高程转换为世界坐标
                        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                            lntLat[0],
                            lntLat[1],
                            950.0
                        ),
                        orientation: {
                            // 指向
                            heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                            // 视角
                            pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                            roll: 0.0
                        }
                    })
                    commit('openLabelLayer', {
                        show: true,
                        data: list[i]
                    })
                })

                window.labelLayer.addOverlay(billboard) // 加入图标
                window.labelLayer.addOverlay(label)
            }
        }
    }