<template>
|
<div class="mobile-map-container">
|
<div id="sceneview"></div>
|
<!-- 随地图改变图标弹窗↓ -->
|
<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>
|
<mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
|
<!-- 控制↑ -->
|
<!-- 控制大弹窗的弹窗 -->
|
<!-- v-if="mBigPopupAfter" -->
|
<mobilePopupOurAfter></mobilePopupOurAfter>
|
<!-- 大弹窗 -->
|
<mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
|
<!-- 测试-跳转位置 -->
|
<!-- <mobileGoTo></mobileGoTo> -->
|
<!-- 实景窗口 -->
|
<mobilePanorama></mobilePanorama>
|
<!-- 退出导航 -->
|
<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 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',
|
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,
|
campusValue: ''
|
}
|
},
|
|
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.campusCut(newData)
|
|
this.$refs.mobileLeftNav.initialize(newData)
|
|
this.createdLayers(newData)
|
})
|
}
|
}
|
},
|
|
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['楼栋号']
|
}).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({
|
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>
|
<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; */
|
}
|
|
.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>
|
