From a05bd68fc0b6eac5793886a5c11f369dc5d795e6 Mon Sep 17 00:00:00 2001 From: Xu Zhimeng Date: Thu, 14 Dec 2023 18:30:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9C=A8=E7=BA=BF/?= =?UTF-8?q?=E7=A6=BB=E7=BA=BF=E5=9B=BE=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.production | 3 +- public/static/config.js | 4 +- .../station-operation/map-offline-active.png | Bin 0 -> 1360 bytes .../images/station-operation/map-offline.png | Bin 0 -> 1418 bytes .../station-operation/map-online-active.png | Bin 0 -> 1188 bytes .../images/station-operation/map-online.png | Bin 0 -> 1228 bytes src/views/stationOperation/components/Map.vue | 55 ++++++------ .../stationOperation/components/MapPane.vue | 81 ++++++++++++++++-- src/views/stationOperation/index.vue | 19 +++- 9 files changed, 125 insertions(+), 37 deletions(-) create mode 100644 src/assets/images/station-operation/map-offline-active.png create mode 100644 src/assets/images/station-operation/map-offline.png create mode 100644 src/assets/images/station-operation/map-online-active.png create mode 100644 src/assets/images/station-operation/map-online.png diff --git a/.env.production b/.env.production index 03071f2..6ea19d8 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,5 @@ NODE_ENV=production VUE_APP_API_BASE_URL=/armd VUE_APP_CAS_BASE_URL=http://localhost:8888/cas -VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview \ No newline at end of file +VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview +VUE_APP_MAP_BASE_URL=https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm \ No newline at end of file diff --git a/public/static/config.js b/public/static/config.js index 2222138..234085a 100644 --- a/public/static/config.js +++ b/public/static/config.js @@ -7,5 +7,7 @@ window._CONFIG = { //单点登录地址 VUE_APP_CAS_BASE_URL: '', //文件预览路径 - VUE_APP_ONLINE_BASE_URL: '' + VUE_APP_ONLINE_BASE_URL: '', + // 离线地图 + VUE_APP_MAP_BASE_URL_OFFLINE: 'http://localhost:8001/map/{z}/{x}{y}.jpg' } \ No newline at end of file diff --git a/src/assets/images/station-operation/map-offline-active.png b/src/assets/images/station-operation/map-offline-active.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba36c49e3e21b0034da805633edd2b6f1433c5d GIT binary patch literal 1360 zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S1|*9D%+3HQ$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@%*vS|5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP zs8ErclUHn2VXFi-*9yo63F|8hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83 zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0wAm%KD6=dz#jPkmR{`v2t4!Q( zalvUGRBsASw-~zO)TkoMZk1@g2kkffr0U` zr;B4q#jTzxz8WrpBFFE~cAPnh)ywD8#)+*d%G@HU$%^tPy?T4MsswlOCM~W>Sv+A= zve~Dpn?i$wC#Njdcv_uNbLB`+<-hV@_pN;2^DeJ@f5!6py#IUO@3X$XMdx%wXrs{t zW}gLO|7JDA`32=ASuot`cC@;FUp36|$P=2;oj$PL&@#RnTgO@Y)TNUVWc?O(V zW;eT2EpoQd&MMtykrOvh;BC)ckr4a#?KHXda;}RiWqP_S9x0R^t!k9We$l2lQzbSm z?eg<=A^Hw=XG16GAE~)^-;6`=z(%oZ(W7s-TrF+hUf*$U#m86j4}_N6`Mh7o-yl_x zlwvl0qS}(2nRUW%K7QBDU>24F%PHjvuS!&#e4>UE$N)2j^Y}1u#GI>DjRG zXxfH&j%ST`xBOZp_B-j&>4UHNX3JbtpZmi#H?I3@fm-wQ#13=MkPj!-N*%v(9ZW0W ek_!E!eSm?hUi^{T-(4p`Wt^w0pUXO@geCyNeDWRu literal 0 HcmV?d00001 diff --git a/src/assets/images/station-operation/map-offline.png b/src/assets/images/station-operation/map-offline.png new file mode 100644 index 0000000000000000000000000000000000000000..fbd0fac898588756ae025f925503b8c0b02434cb GIT binary patch literal 1418 zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S1|*9D%+3HQ$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@%*vS|5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP zs8ErclUHn2VXFi-*9yo63F|8hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83 zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0*(J3ovn(~mttdZN0qke1Ox$h( z#uYBNK=h{Ic8d{Cz4}1M=!0SwDW+jUz~lpB!qY8~15f#>dBEge1WecVXCxCD7#RP0 zx;TbZ+-jK;t&tWea{T=Fohs8io|v6f-Felga-x!J@~K>*rEWWyF8jE`WDk$(_9u=i zraSj}RyscEKGZ#FmdU3@9#5tnQ`NLPR$u#XdD-ockzcK|=kGoL^ZnNAx2kXVTvlfm z<6qQhzM=8|0d5@zbq^-P8u8Dpe-{YNY0kTl-h9K~WLMAiGA6qQ_X5X@27S3rCU1YU zS}i+v%EVXW--Cj_02sek53yG zbw0i5e{s9fCY@)+@kf|+j$E7aExqbwIHLti_ktF|wM_gMbXX?@)S7IJGT>4=I5BJr zhX7yS)PJ!P6egxN0ekX5}{4!~e_+Z4<5>0tbXbNkFbxZYm#>Rw6b&yC5G?4*Be zp38Nuas{v4Vi$weoj+$K`Ok{jdi2cPGs|Oa%@=r_TV(Xk#iMLrJvO*#S$1Ez9?wbsQc#$Djhvt{an^LB{Ts5zr_mZ literal 0 HcmV?d00001 diff --git a/src/assets/images/station-operation/map-online-active.png b/src/assets/images/station-operation/map-online-active.png new file mode 100644 index 0000000000000000000000000000000000000000..a7273a910c0772d5de0243f41cec7e058233e20c GIT binary patch literal 1188 zcmaJ>OKjU@9CuRas?ngTlQve$`pMPCCK|u;C^pHOCQcWNrGzxlOn`)Ae{D_U$Lz1f z%_*a;){SW@946R=*e=s{0mcQ;rd5SZfHW#`;W6N{6SoS9L#9nFpSz~xK(J(g5B+|> z|LZ58%8ecg?CjY|5JW)AhI!)8UDG7kgrMm-`7o(s zHV0Cs4MCJ*f(pZMV34QSXgC~Y1^~x!49!GnmJ6~`fe8!jAlQ0H9L-iIguFPi6$_u@ zd6~6i%o3CRa3-866s^$yFb5qb<3f7jz3p7NM=Z z4b>6b)WK%Wg4Q~hP)ofnuG%`6a7!+YlcBxI{%g|BD{LQcyX{+i*mgcNu-$F!>!p`} zyGRheJ(4(FaPO2F8yiDyPnL=LyR`=2wfxxKR}$s97voea(PNze zn_E8y)&uq3nYZe-M&vX#aQO)N>){>Jjerz;;*GvtZ3mcS=?n7OYfHbJ{`352d(pmA zA1%~Zhf71^&-1}EU)CDCxg9;9 z{_eZPynnK^hg zJK_lyFAePXU8DEiJD|>;eei7G?+fW=KXZF6 ulxx48`0?ZK5`0GXb^nxj@L_W94B_u2V%1`L!gW`?|Av$v6+cP7`OZJ3nTas~ literal 0 HcmV?d00001 diff --git a/src/assets/images/station-operation/map-online.png b/src/assets/images/station-operation/map-online.png new file mode 100644 index 0000000000000000000000000000000000000000..21f3f199be63e130a401bcb8b6238c11ef928b6a GIT binary patch literal 1228 zcmaJ>TWB0r7@p0>O-!2_t6)-;oXpmcLUwMOz08o!-exa@-LPyI6R5$??3`qWWGb=`NGd?mjE@d-)Cfn1!0v;iXr?^P75MaS zEOd(CW!pA5lB`rJM8!|&<_t-*EK5=h$uK^I@L3C*EmnP+C_sT7;whe3?7t@6yh8SIwtK!shdt**4cXm9 zzV2>FUJP?Z1wLM^{wT@SKhL{5C~O-Cryh|8!B}Vg;!F2CgI~TG-v5bf`&xLo)3ZHa z@2z|4{k1jsx6ys|&DvI*u+rPJnf{@E=307fz^ZMvFZ*hrJ|pCYJ{z3#^bKqrzp&-Y z&ZVUN-1+*=g!C)e=s);G`h{5I(dBp78&k2yzU9-a-)G%-{R!ePPyOPB`&#+ck20b5 z7yo$Wi^}`4j0e2)xA)2P@A(_9m59BH1=>G2_xR=bhp`6s#!uMY1K?`rt&V4xmST-A zVd_Zm<0+S<9$tBB{npP1dd|9OvgeLl${Y?nc0zFdg0myZSge0}#=SAvbGGfI|Iz@s zf<0Fm&by*dyWVT7f4zQd-SgTd42*T$J2aFz?qBV=?b=|jgVlSt{dv!gnE3Yf7@HMq hi@*7oJbkYAUhMRD$*(T2of&feFG6aZznVDl@;`cjkDCAh literal 0 HcmV?d00001 diff --git a/src/views/stationOperation/components/Map.vue b/src/views/stationOperation/components/Map.vue index f4ef585..b565283 100644 --- a/src/views/stationOperation/components/Map.vue +++ b/src/views/stationOperation/components/Map.vue @@ -12,38 +12,35 @@ import XYZ from 'ol/source/XYZ' import View from 'ol/View' import { fromLonLat } from 'ol/proj' +const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL export default { props: { - token: { - type: String, - required: true - }, zoom: { type: Number, - default: 1 + default: 1, }, maxZoom: { type: Number, - default: 16 + default: 16, }, minZoom: { type: Number, - default: 1 + default: 1, }, center: { type: Object, default() { return { longitude: 116, - latitude: 40 + latitude: 40, } - } - } + }, + }, }, data() { return { map: null, - stationList: [] + stationList: [], } }, mounted() { @@ -53,27 +50,28 @@ export default { // 初始化地图 initMap() { const { longitude, latitude } = this.center - const layers = [ - new TileLayer({ - source: new XYZ({ - url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.token}` - }) - }) - ] + + this.tileLayer = new TileLayer({ + source: new XYZ({ + url: mapSourceUrl, + }), + }) + + const layers = [this.tileLayer] const view = new View({ projection: 'EPSG:3857', // 使用这个坐标系 - center: fromLonLat([longitude, latitude]), + center: fromLonLat([longitude, latitude]), zoom: this.zoom, maxZoom: this.maxZoom, - minZoom: this.minZoom + minZoom: this.minZoom, }) this.map = new Map({ target: this.$refs.mapContainerRef, layers, view, - controls: [] + controls: [], }) }, @@ -109,10 +107,19 @@ export default { panTo(center, duration = 1000) { return this.map.getView().animate({ center: fromLonLat(center), - duration + duration, }) - } - } + }, + + // 修改地图来源 + changeSource(url) { + this.tileLayer.setSource( + new XYZ({ + url, + }) + ) + }, + }, }