<template>
|
<div class="mobile-map-container">
|
<div id="sceneview"></div>
|
|
<mobileCortrolSearch ref="mobileCortrolSearch">
|
<template slot="selectCampusBox">
|
<div class="select-campus-box" v-if="campusData.length > 1">
|
<el-dropdown trigger="click" @command="handleCommand">
|
<span class="el-dropdown-link icons">
|
{{ campusData.find(item => item.dictKey == campusValue).dictValue }} <i
|
class="el-icon-caret-bottom"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item v-for="(item, index) in campusData" :key="index" :command="item">
|
{{ item.dictValue }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</template>
|
</mobileCortrolSearch>
|
|
<!-- 随地图改变图标弹窗↓ -->
|
<div id="mobile-map_popup_content"></div>
|
<mobileWindow ref="MobileWindow"></mobileWindow>
|
<!-- 地图固定弹窗 -->
|
<!-- <mobileWindowFixed></mobileWindowFixed> -->
|
<!-- 地图图标弹窗↑ -->
|
<!-- 控制↓ -->
|
<mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
|
<mobileCortrol ref="mobileCortrol"></mobileCortrol>
|
<mobileCortrolButtom ref="mobileCortrolButtom" :mapCenter="mapCenter" :frislayertHeight="frislayertHeight">
|
</mobileCortrolButtom>
|
<!-- 控制↑ -->
|
<!-- 控制大弹窗的弹窗 -->
|
<!-- v-if="mBigPopupAfter" -->
|
<mobilePopupOurAfter ref="MobilePopupOurAfter"></mobilePopupOurAfter>
|
<!-- 大弹窗 -->
|
<mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
|
<!-- 测试-跳转位置 -->
|
<!-- <mobileGoTo></mobileGoTo> -->
|
<!-- 实景窗口 -->
|
<mobilePanorama></mobilePanorama>
|
<!-- 退出导航 -->
|
<mobileCloseRouter ref="MobileCloseRouter"></mobileCloseRouter>
|
<!-- 退出活动 -->
|
<mobileCloseRouterMany></mobileCloseRouterMany>
|
<!-- 活动窗口 -->
|
<mobileActivity></mobileActivity>
|
<!-- 指示器 -->
|
<!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> -->
|
</div>
|
</template>
|
<script>
|
import axios from 'axios'
|
import { mapGetters } from 'vuex'
|
import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情
|
import { getListarc } from '@/api/mobile/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 sitePositionLayer = null
|
|
let campusLayers = [
|
{
|
key: 1,
|
tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksdhjzxq/MapServer/tile/{z}/{y}/{x}",
|
center: [112.613918275550715, -0.0457081387615907618595],
|
resolution: 0.00001903568804664224,
|
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.6202242373625, -0.0781745423945008147645],
|
resolution: 0.00001903568804664224,
|
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: 'mobilemapBox',
|
components: {
|
},
|
|
// 将当前实例注入到子组件
|
provide () {
|
return {
|
mobileMapElement: this
|
}
|
},
|
|
computed: {
|
...mapGetters([
|
// "mviewer",
|
// "MobileWindowsHide",
|
'zoomRange',
|
'mBigPopup',
|
// "mBigPopupAfter",
|
'iconHide',
|
// "popupsDom",
|
'dimension',
|
'dimensionData',
|
// "areaLayer", // 绿布
|
// "areaLayerSelect", // 绿布颜色控制
|
'urlParameterData', // url 参数
|
'pinchFlag'
|
])
|
},
|
|
data () {
|
return {
|
bigPopup: {
|
width: 0,
|
height: 0
|
},
|
map2D: this.$store.state.openlayerData.openlayers.map2D,
|
campusData: [],
|
campusValue: 1
|
}
|
},
|
|
watch: {
|
mBigPopup () {
|
if (this.mBigPopup) {
|
this.bigPopup.width = '100%'
|
this.bigPopup.height = '100%'
|
this.bigPopup.display = 'inline-block'
|
} else {
|
this.bigPopup.width = '0'
|
this.bigPopup.height = '0'
|
this.bigPopup.display = 'none'
|
}
|
},
|
|
campusValue: {
|
handler (newData) {
|
this.$nextTick(() => {
|
this.$refs.MobileCloseRouter.mobileRouterClose()
|
|
this.campusCut(newData)
|
|
this.$refs.mobileLeftNav.initialize(newData)
|
|
this.createdLayers(newData)
|
})
|
}
|
}
|
},
|
|
created () {
|
this.getStreet()
|
},
|
|
mounted () {
|
const that = this
|
this.map2D.setTarget('sceneview')
|
|
this.$nextTick(() => {
|
sitePositionLayer = new VectorLayer({
|
// 图标图层
|
zIndex: 99,
|
source: new VectorSource(),
|
})
|
|
this.map2D.addLayer(sitePositionLayer)
|
|
|
this.map2D.on("singleclick", function (event) {
|
let flag = true
|
that.map2D.forEachFeatureAtPixel(
|
event.pixel,
|
(feature) => {
|
if (select != null && select.values_.type == 'polygon') {
|
select.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
}
|
select = null
|
|
if (flag == false) {
|
return
|
}
|
if (feature.values_.type == 'point') {
|
flag = false
|
|
const graphicAttributes = feature.values_.attributes
|
|
const d = {
|
name: graphicAttributes.data.mechanismname ||
|
graphicAttributes.data.roadname ||
|
graphicAttributes.data.vrname ||
|
(graphicAttributes.ourD.label == '监控' ? '监控' : '无显示名字'),
|
bgImg: graphicAttributes.data.tpurl,
|
video: graphicAttributes.ourD.label == '监控' ? graphicAttributes.data.vrurl : '',
|
from: 'labels',
|
introduce: graphicAttributes.data.introduce,
|
panoramaurl: graphicAttributes.ourD.label == '实景' ? graphicAttributes.data.vrurl : '',
|
lntLat: graphicAttributes.lntLat
|
}
|
|
that.$refs.MobileWindow.showPopupOrData(d)
|
|
return
|
}
|
feature.dispatchEvent && feature.dispatchEvent({ type: 'click', event: event })
|
}
|
)
|
})
|
})
|
|
that.$EventBus.$on('addSitePositionLayer', (params) => {
|
const iconFeature = new Feature({
|
geometry: new Point([Number(params.lntLat[0]), Number(params.lntLat[1])]),
|
type: 'point'
|
})
|
|
iconFeature.setStyle(new Style({
|
image: new Icon({
|
imgSize: [48, 48],
|
src: '/changjing/img/icon/site-position.png'
|
})
|
}))
|
|
sitePositionLayer.getSource().addFeature(iconFeature)
|
})
|
|
that.$EventBus.$on('removeSitePositionLayer', () => {
|
sitePositionLayer.getSource().clear()
|
})
|
},
|
|
methods: {
|
resetPolygonStyle () {
|
if (select != null && select.values_.type == 'polygon') {
|
select.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
}
|
select = null
|
},
|
|
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)
|
})
|
})
|
},
|
|
polygonFeatureEvent (event) {
|
const that = this
|
|
getBuildClock({
|
mechanismname: event.target.values_.attributes['楼栋号'],
|
campus: this.campusValue
|
}).then((res) => {
|
if (JSON.stringify(res.data.data) == '{}') return
|
const item = res.data.data
|
|
const useData = {
|
name: item.mechanismname,
|
bgImg: item.tpurl,
|
video: item.videourl,
|
panoramaurl: item.panoramaurl,
|
introduce: item.introduce,
|
lntLat: [event.event.coordinate[0], event.event.coordinate[1]],
|
}
|
|
that.$refs.MobileWindow.showPopupOrData(useData)
|
})
|
|
if (select != null) {
|
if (event.target != select) {
|
select.setStyle(new Style({
|
|
fill: new Fill({
|
color: 'rgba(255, 255, 255, 0)'
|
})
|
|
}))
|
|
select = null
|
}
|
}
|
|
if (select == null) {
|
select = event.target
|
|
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,
|
}),
|
|
})
|
)
|
}
|
},
|
|
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({
|
projection: "EPSG:4326",
|
tileGrid: tileGrid,
|
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({
|
// 初始化中心点坐标
|
projection: "EPSG:4326",
|
center: curCampus.center,
|
resolution: curCampus.resolution,
|
extent: curCampus.fullExtent,
|
}))
|
},
|
|
setCampusValue (val) {
|
this.campusValue = val
|
|
this.$store.commit('SET_CURRENTCAMPUS', val)
|
},
|
|
handleCommand (command) {
|
this.$refs.MobilePopupOurAfter.closeBigPopupAfter()
|
this.setCampusValue(command.dictKey)
|
},
|
|
getStreet () {
|
getListarc().then((res) => {
|
this.setCampusValue(res.data.data[0].dictKey)
|
this.campusData = res.data.data
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.mobile-map-container {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
}
|
|
#sceneview {
|
position: absolute;
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
/* overflow: hidden; */
|
}
|
|
.select-campus-box {
|
width: 28%;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
background: #f1f1f1;
|
border-right: 1px solid #C0C4CC;
|
box-sizing: border-box;
|
z-index: 299;
|
}
|
|
.esri-view-surface--inset-outline:focus::after {
|
outline: none !important;
|
}
|
|
.heights {
|
background-color: #fff;
|
font-size: 24px;
|
position: fixed;
|
top: 0;
|
right: 0;
|
z-index: 9999999;
|
}
|
</style>
|
