<template>
|
<div id="viewer-container" @click="mapClick($event)">
|
<calender v-if="calenderShow" />
|
|
<left-nav ref="leftNav"></left-nav>
|
|
<mapPopup />
|
|
<campusBuildingSearch ref="campusBuildingSearch" />
|
|
<campusNav ref="campusNavRoute" v-show="campusNavFlag" />
|
|
<search-details v-if="searchPopupFlag"></search-details>
|
<org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
|
<arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
import campusBuildingSearch from './components/campusBuildingSearch'
|
import mapPopup from './components/mapPopup'
|
import { mapGetters } from 'vuex'
|
import { getDetail } from '@/api/pc/public/arc'
|
|
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 campusLayers = [
|
{
|
key: 1,
|
tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksdhjzxq/MapServer/tile/{z}/{y}/{x}",
|
center: [112.605918275550715, -0.0457081387615907618595],
|
resolution: 0.00003807137609328448,
|
origin: [-400.0, 399.9999999999998],
|
resolutions: [
|
0.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
|
0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
|
],
|
fullExtent: [
|
112.51303616638316, -0.103420786429659, 112.67880038471827,
|
0.000004508906477476281
|
],
|
polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp'
|
},
|
|
{
|
key: 2,
|
tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksdflxq/MapServer/tile/{z}/{y}/{x}",
|
center: [112.6102242373625, -0.0741745423945008147645],
|
resolution: 0.00003807137609328448,
|
origin: [-400.0, 399.9999999999998],
|
resolutions: [
|
0.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
|
0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
|
],
|
fullExtent: [
|
112.51302551881798, -0.16235359398493399, 112.72742295590702, 0.000004509195932360471
|
],
|
polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/fllkarcgisapp'
|
}
|
]
|
|
let campusLoadLayer
|
|
export default {
|
name: 'mapBox',
|
|
components: {
|
campusBuildingSearch,
|
mapPopup
|
},
|
|
data () {
|
return {
|
map2D: this.$store.state.openlayerData.openlayers.map2D
|
}
|
},
|
|
inject: ["layoutElement"],
|
|
watch: {
|
searchPopupFlag: {
|
immediate: true,
|
handler (newVal, oldVal) {
|
if (newVal == true) {
|
if (this.$route.path.indexOf('/pcLayout/default/service') != -1) {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
}
|
|
if (this.$route.path.indexOf('/orgnav') != -1) {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
this.$store.commit('SET_ORGNAVBARTITLE', '')
|
this.$store.commit('SET_ORGNAVBARLIST', [])
|
this.$store.commit('SET_ORGNAVBARFLAG', false)
|
}
|
|
if (this.orgNavBarFlag == true) {
|
this.$store.commit('SET_ORGNAVBARTITLE', '')
|
this.$store.commit('SET_ORGNAVBARLIST', [])
|
this.$store.commit('SET_ORGNAVBARFLAG', false)
|
}
|
|
if (this.$route.path.indexOf('/arc') != -1) {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
this.$store.commit('SET_ARCNAVBARTITLE', '')
|
this.$store.commit('SET_ARCNAVBARCODE', '')
|
this.$store.commit('SET_ARCNAVBARFLAG', false)
|
}
|
|
if (this.arcNavBarFlag == true) {
|
this.$store.commit('SET_ARCNAVBARTITLE', '')
|
this.$store.commit('SET_ARCNAVBARCODE', '')
|
this.$store.commit('SET_ARCNAVBARFLAG', false)
|
}
|
}
|
}
|
},
|
|
orgNavBarFlag: {
|
immediate: true,
|
handler (newVal, oldVal) {
|
if (newVal == true) {
|
this.$store.commit('SET_SEARCHPOPUPFLAG', false)
|
}
|
}
|
},
|
|
arcNavBarFlag: {
|
immediate: true,
|
handler (newVal, oldVal) {
|
if (newVal == true) {
|
this.$store.commit('SET_SEARCHPOPUPFLAG', false)
|
}
|
}
|
},
|
|
'layoutElement.campusValue': {
|
handler (newData) {
|
this.campusCut(newData)
|
|
this.$nextTick(() => {
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
|
this.$store.dispatch('delVisitedViews', this.$route)
|
|
this.$store.commit('SET_ARCNAVBARFLAG', false)
|
this.$store.commit('SET_SEARCHPOPUPFLAG', false)
|
|
this.$router.push('/pcLayout/default')
|
|
this.$refs.leftNav.initialize(newData)
|
|
this.$refs.campusNavRoute.closeModel()
|
|
this.createdLayers(newData)
|
})
|
}
|
}
|
},
|
|
computed: {
|
...mapGetters([
|
'popupBgUrl',
|
'pupupQRUrl',
|
// 终点
|
'terminus',
|
// 起点
|
'startingPoint',
|
// 点信息
|
'pointPosition',
|
// 点名称
|
'stateName',
|
// 地址
|
'siteName',
|
// 介绍
|
'introduceText',
|
// 全景地址
|
'panoramaUrl',
|
// 详情弹框显示关闭
|
'detailsPopup',
|
// 全景弹框显示关闭
|
'panoramaPopup',
|
// 校园内导航的显示关闭
|
'campusNavFlag',
|
'orgNavBarFlag',
|
'arcNavBarFlag',
|
'searchPopupFlag',
|
'calenderShow',
|
'closeMapClick'
|
])
|
},
|
|
mounted () {
|
const that = this
|
this.$nextTick(() => {
|
this.map2D.setTarget('viewer-container')
|
|
that.map2D.on('pointermove', that.mouseMoveEvent)
|
|
this.map2D.on("singleclick", function (event) {
|
if (that.closeMapClick) return
|
|
let flag = true
|
|
that.map2D.forEachFeatureAtPixel(
|
[event.originalEvent.offsetX, event.originalEvent.offsetY],
|
(feature) => {
|
if (flag == false) {
|
return
|
}
|
if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
|
flag = false
|
}
|
|
feature.dispatchEvent && feature.dispatchEvent({ type: 'click', event: event })
|
}
|
)
|
})
|
})
|
},
|
|
methods: {
|
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(),
|
})
|
|
this.map2D.addLayer(architecturePolygon)
|
|
axios
|
.get(
|
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) => {
|
var polygonFeature = new Feature({
|
id: 'DefaultAreaLayer',
|
type: 'polygon',
|
geometry: new Polygon(item.geometry.rings),
|
attributes: item.attributes
|
})
|
|
polygonFeature.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
|
polygonFeature.on('click', that.polygonFeatureEvent)
|
|
architecturePolygon.getSource().addFeature(polygonFeature)
|
})
|
})
|
},
|
|
mouseMoveEvent (event) {
|
let flag = true
|
var that = this
|
|
if (that.closeMapClick) return
|
|
if (select != null && select.values_.type == 'polygon') {
|
select.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
}
|
|
select = null
|
|
that.map2D.forEachFeatureAtPixel(
|
[event.originalEvent.offsetX, event.originalEvent.offsetY],
|
(feature) => {
|
if (flag == false) {
|
return
|
}
|
|
if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
|
flag = false
|
return
|
}
|
|
if (feature.values_.type == 'polygon') {
|
if (select != null && feature != select) {
|
select.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
|
select = null
|
}
|
|
if (select == null) {
|
select = feature
|
|
select.setStyle(
|
new Style({
|
|
fill: new Fill({
|
color: 'rgba(108, 245, 113, 0.6)'
|
}),
|
|
stroke: new Stroke({
|
color: 'rgba(3, 255, 13, 1)',
|
width: 1,
|
}),
|
|
})
|
)
|
}
|
}
|
|
}
|
)
|
},
|
|
polygonFeatureEvent (event) {
|
const that = this
|
that.$store.commit('SET_DETAILSPOPUP', false)
|
|
this.$store.commit('CLEAR_ALL', null)
|
|
getDetail({ mechanismname: event.target.values_.attributes['楼栋号'], campus: this.layoutElement.campusValue }).then((res) => {
|
if (JSON.stringify(res.data.data) == '{}') return
|
let result = res.data.data
|
|
let curLngLat = this.map2D.getCoordinateFromPixel([event.event.originalEvent.offsetX, event.event.originalEvent.offsetY])
|
|
this.$store.dispatch('setOurDataInPoput', {
|
item: result,
|
lng: curLngLat[0],
|
lat: curLngLat[1]
|
})
|
|
this.openPopups({
|
lng: Number(curLngLat[0]),
|
lat: Number(curLngLat[1]),
|
item: result,
|
event
|
})
|
})
|
},
|
|
openPopups (value) {
|
this.map2D.getView().setCenter([value.lng, value.lat])
|
|
if (value.type == 'scene') {
|
this.$EventBus.$emit('openSceneInfoWindowHtml', value)
|
} else {
|
this.$EventBus.$emit('openInfoWindowHtml', value)
|
}
|
},
|
|
mapClick (e) {
|
this.$refs.campusNavRoute.shortcutShow(e)
|
this.$refs.campusBuildingSearch.shortcutShow(e)
|
},
|
|
campusCut (campusKey) {
|
if (campusLoadLayer) this.map2D.removeLayer(campusLoadLayer)
|
let curCampus = campusLayers.find(item => item.key == campusKey)
|
|
let tileGrid = new TilegridTileGrid({
|
tileSize: 256,
|
origin: curCampus.origin,
|
extent: curCampus.fullExtent,
|
resolutions: curCampus.resolutions,
|
})
|
// 瓦片数据源
|
let 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,
|
}))
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scope>
|
#viewer-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.base-map-tab {
|
padding: 0;
|
border-radius: 5px;
|
position: absolute;
|
right: 10px;
|
top: 130px;
|
background-color: rgba(255, 255, 255, 0.4);
|
|
pointer-events: auto;
|
user-select: none;
|
z-index: 98;
|
cursor: pointer;
|
|
button {
|
position: relative;
|
display: block;
|
margin: 1px;
|
padding: 0;
|
width: 30px;
|
height: 30px;
|
background: #fff;
|
color: #666;
|
|
box-shadow: 0px 0px 4px 1px #ccc;
|
border-radius: 5px;
|
border: none;
|
cursor: pointer;
|
|
img {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
|
.base-map-tab button:focus {
|
outline: none;
|
}
|
|
.base-map-options {
|
padding: 6px;
|
position: absolute;
|
top: 3em;
|
right: 3em;
|
z-index: 98;
|
max-height: 811px;
|
max-width: 320px;
|
width: auto;
|
overflow: auto;
|
color: #677788;
|
border-radius: 10px;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 4px 1px #ccc;
|
|
.base-map-type {
|
display: block;
|
font-size: 16px;
|
text-align: left;
|
margin-bottom: 4px;
|
}
|
|
.map-options-select {
|
display: block;
|
border: 1px dashed #677788;
|
border-radius: 5px;
|
padding: 5px 0;
|
|
&>div {
|
display: inline-block;
|
vertical-align: top;
|
margin: 2px 5px;
|
width: 64px;
|
text-align: center;
|
cursor: pointer;
|
|
&:hover {
|
img {
|
box-shadow: 0 0 8px #fff, 0 0 8px #677788;
|
}
|
}
|
|
img {
|
display: inline-block;
|
position: relative;
|
width: inherit;
|
height: auto;
|
background-size: 100% 100%;
|
margin: 0;
|
padding: 0;
|
cursor: pointer;
|
box-sizing: border-box;
|
border-radius: 9px;
|
border: double 4px #677788;
|
}
|
|
div {
|
display: block;
|
font-size: 8px;
|
text-align: center;
|
cursor: pointer;
|
word-wrap: break-word;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
