移动端，不同校区的逻辑适配

shuishen

2023-12-04 bf9ae048b9006d58f29674b9d70ee01d8e3c0b59

移动端，不同校区的逻辑适配

 src/components/map/index.vue

@@ -44,7 +44,6 @@
let architecturePolygon = null
let select = null


let campusLayers = [
    {
        key: 1,

 src/components/mobileCortrolButtom/index.vue

@@ -4,15 +4,16 @@
mobileCortrolButtom
        -->
        <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
        <div class="m-l-inbut" v-show="false">
        <div class="m-l-inbut" v-show="true">
            <!-- <i class="el-icon-s-flag"></i> -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link icons">
                    <i class="el-icon-s-flag icon"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in tabTable" :key="index" :command="item">{{ item.title
                    }}</el-dropdown-item>
                    <el-dropdown-item v-for="(item, index) in tabTable" :key="index" :command="item">
                        {{ item.dictValue }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
@@ -81,7 +82,7 @@
        ])
    },
    created () {
        // this.getStreet();
        this.getStreet()
    },
    mounted () {
        // eslint-disable-next-line no-undef
@@ -220,44 +221,7 @@
            // 测试fllyTo
        },
        handleCommand (command) {
            const that = this
            const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450]
            // 定位
            // this.$store.commit("MSETCC_SETCC", {
            //   lntLat: position,
            // });
            // this.$store.dispatch("mapFlyTo", {
            //   //飞入
            //   lntLat: [...position, 450],
            //   heading: 0,
            //   pitch: -90,
            //   roll: 0,
            //   noOpen: true,
            // });
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                // eslint-disable-next-line new-cap
                destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    // 114.0351,
                    // 27.6314,
                    // 200.0
                    position[0],
                    position[1],
                    position[2]
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(
                        that.dimensionData.heading
                    ),
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(
                        that.dimensionData.pitch
                    ),
                    // heading: data.heading,
                    // pitch: data.pitch,
                    roll: that.dimensionData.roll
                }
            })
            this.$parent.setCampusValue(command.dictKey)
        },
        openBigPopupAfter () {
            this.$store.commit('MSET_BIGPOPUPAFTER', true)
@@ -274,30 +238,10 @@
            // });
        },
        getStreet () {
            const that = this
            getListarc().then((res) => {
                const title = []
                const data = res.data.data
                for (let k = 0; k < data.length; k++) {
                    title.push({
                        title: data[k].dictValue,
                        flag: false,
                        key: data[k].dictKey,
                        child: [],
                        lnt: that.ccData[k].lnt,
                        lat: that.ccData[k].lat
                    })
                }
                // res.data.data.forEach((item) => {
                //   title.push({
                //     title: item.dictValue,
                //     flag: false,
                //     key: item.dictKey,
                //     child: [],
                //   });
                // });
                this.tabTable = title
                this.$store.commit('MSET_POPUPTABLENAME', title)
                this.tabTable = res.data.data

                this.$parent.setCampusValue(res.data.data[0].dictKey)
            })
        }
    },

 src/components/mobileLeftNav/index.vue

@@ -271,12 +271,31 @@
        //   });
        // },

        initialize () {
        initialize (campus) {
            var that = this

            this.leftNavData[0].flag = true
            this.leftNavData[0].img = this.leftNavData[0].checked
            this.leftNavData[4].flag = true
            this.leftNavData[4].img = this.leftNavData[4].checked

            this.leftNavBQ.setVisible(true)
            this.leftNavCR.setVisible(true)

            this.leftNavBQ.getSource().clear()
            this.leftNavDL.getSource().clear()
            this.leftNavSJ.getSource().clear()
            this.leftNavHD.getSource().clear()
            this.leftNavTC.getSource().clear()
            this.leftNavCR.getSource().clear()

            var that = this
            const ourNum = that.leftNavData.length
            for (let n = 0; n < ourNum; n++) {
                const ourD = that.leftNavData[n]
                const d = ourD.type ? { lifetype: ourD.type } : {}
                const d = ourD.type ? { lifetype: ourD.type, campus } : {
                    campus
                }
                ourD.methods(d).then((res) => {
                    let imgUrl = null
                    let sateName = null

 src/components/mobilemap/index.vue

@@ -38,18 +38,62 @@
import { mapGetters } from 'vuex'
import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情

import OlView from "ol/View.js"

import OlLayerTile from "ol/layer/Tile.js"

import XYZ from "ol/source/XYZ"

import VectorLayer from "ol/layer/Vector"
import VectorSource from "ol/source/Vector"

import { OverviewMap, defaults } from "ol/control"
import { Polygon } from 'ol/geom'

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import { Icon, Style, Fill, Text, Stroke, Circle } from 'ol/style.js'
import TilegridTileGrid from "ol/tilegrid/TileGrid"

let architecturePolygon = null
let select = null
let sitePositionLayer = null

let campusLayers = [
    {
        key: 1,
        tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksd1/MapServer/tile/{z}/{y}/{x}",
        center: [112.63716735643777, -0.087080937773012637833],
        resolution: 0.00014276766034981682,
        origin: [-400.0, 399.9999999999998],
        resolutions: [
            0.00019035688046642243, 0.00014276766034981682, 0.00009517844023321122,
            0.00004758922011660561,
        ],
        fullExtent: [
            112.51302281804038, -0.17416638494176828, 112.76131189483516,
            0.000004509395743004334,
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp'
    },
    {
        key: 2,
        tileUrl: "https://dev.jxpskj.com:8023/arcgis156/rest/services/cc/MapServer/tile/{z}/{y}/{x}",
        center: [115.79624983, 28.6416099],
        resolution: 0.000007138383017490841,
        origin: [-400.0, 400.0],
        resolutions: [
            0.000014276766034981682, 0.000007138383017490841, 0.00000475892201166056,
            0.00000237946100583028,
        ],
        fullExtent: [
            115.76861782444642, 28.63584422760626, 115.82432471553928, 28.663308794331794,
        ],
        polygonUrl: ''
    }
]

let campusLoadLayer

export default {
    name: 'mobilemapBox',
@@ -87,7 +131,8 @@
                width: 0,
                height: 0
            },
            map2D: this.$store.state.openlayerData.openlayers.map2D
            map2D: this.$store.state.openlayerData.openlayers.map2D,
            campusValue: ''
        }
    },

@@ -102,18 +147,26 @@
                this.bigPopup.height = '0'
                this.bigPopup.display = 'none'
            }
        },

        campusValue: {
            handler (newData) {
                this.$nextTick(() => {
                    this.campusCut(newData)

                    this.$refs.mobileLeftNav.initialize(newData)

                    this.createdLayers(newData)
                })
            }
        }
    },


    mounted () {
        const that = this
        this.map2D.setTarget('sceneview')
        this.map2D.getView().setResolution(0.00009517844023321122)

        this.$nextTick(() => {
            that.$refs.mobileLeftNav.initialize()

            sitePositionLayer = new VectorLayer({
                // 图标图层
                zIndex: 99,
@@ -122,7 +175,6 @@

            this.map2D.addLayer(sitePositionLayer)

            this.createdLayers()

            this.map2D.on("singleclick", function (event) {
                let flag = true
@@ -206,9 +258,13 @@
            select = null
        },

        createdLayers () {
        createdLayers (campusKey) {
            const that = this
            let curCampus = campusLayers.find(item => item.key == campusKey)

            if (architecturePolygon) {
                this.map2D.removeLayer(architecturePolygon)
            }
            architecturePolygon = new VectorLayer({
                // 图标图层
                source: new VectorSource(),
@@ -218,7 +274,7 @@

            axios
                .get(
                    'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson'
                    curCampus.polygonUrl + '?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson'
                )
                .then((resultData) => {
                    resultData.data.features.forEach((item) => {
@@ -298,6 +354,58 @@
                )
            }
        },

        campusCut (campusKey) {
            if (campusLoadLayer) this.map2D.removeLayer(campusLoadLayer)
            let curCampus = campusLayers.find(item => item.key == campusKey)

            const tileGrid = new TilegridTileGrid({
                tileSize: 256,
                origin: curCampus.origin,
                extent: curCampus.fullExtent,
                resolutions: curCampus.resolutions,
            })
            // 瓦片数据源
            const tileArcGISXYZ = new XYZ({
                tileGrid: tileGrid,
                projection: "EPSG:4326",
                url: curCampus.tileUrl,
            })

            campusLoadLayer = new OlLayerTile({
                source: tileArcGISXYZ,
            })

            this.map2D.addLayer(campusLoadLayer)


            this.map2D.controls = defaults().extend([
                // 添加一个鹰眼控件
                new OverviewMap({
                    // 实例化一个OverviewMap类的对象，并加入到地图中
                    collapsed: false,
                    view: new OlView({
                        // 初始化中心点坐标
                        center: curCampus.center,
                    }),
                    layers: [
                        campusLoadLayer
                    ]
                })
            ])

            this.map2D.setView(new OlView({
                // 初始化中心点坐标
                center: curCampus.center,
                resolution: curCampus.resolution,
                projection: "EPSG:4326",
                extent: curCampus.fullExtent,
            }))
        },

        setCampusValue (val) {
            this.campusValue = val
        }
    }
}
</script>