From bf9ae048b9006d58f29674b9d70ee01d8e3c0b59 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 04 Dec 2023 17:10:18 +0800
Subject: [PATCH] 移动端，不同校区的逻辑适配
---
src/components/mobilemap/index.vue | 124 +++++++++++++++++++++++++++++--
src/components/mobileCortrolButtom/index.vue | 74 ++----------------
src/components/mobileLeftNav/index.vue | 23 +++++
src/components/map/index.vue | 1
4 files changed, 146 insertions(+), 76 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 47e1069..90b5bea 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -44,7 +44,6 @@
let architecturePolygon = null
let select = null
-
let campusLayers = [
{
key: 1,
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index 9d5a97d..88dffdb 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/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)
})
}
},
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index fb13256..c37027b 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/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
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 7ed28b2..b5675ce 100644
--- a/src/components/mobilemap/index.vue
+++ b/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>
--
Gitblit v1.9.3