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

shuishen

2023-12-04 bf9ae048b9006d58f29674b9d70ee01d8e3c0b59

 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>