<template>
|
<div class="viewer-box" id="viewer-container">
|
<slot ref="mainContent" name="mainContent"></slot>
|
</div>
|
</template>
|
|
<script>
|
import { getResLgtdLttdInfo, getStLgtdLttdInfo } from '@/api/singleSk/'
|
import geoJSON from '@/assets/geoJSON.js'
|
let baseLayer = null
|
|
let siteAllLayer = {}
|
|
let skSiteAll = []
|
|
export default {
|
name: 'mapBox',
|
|
props: {
|
curMap: {
|
type: String,
|
default: '矢量'
|
}
|
},
|
|
watch: {
|
curMap: {
|
handler (newData) {
|
this.mapChanges(newData)
|
}
|
}
|
},
|
|
data () {
|
return {
|
publicPath: process.env.BASE_URL
|
}
|
},
|
|
computed: {
|
|
},
|
|
mounted () {
|
if (global.viewer != null) {
|
global.viewer = null
|
}
|
|
global.DC.baseUrl = '/bigScreen/libs/dc-sdk/resources/'
|
|
const that = this
|
|
// 初始化地图
|
function initViewer () {
|
// new Viewer(new 地图)
|
global.viewer = new global.DC.Viewer('viewer-container', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
let primitiveArr = global.viewer.scene.primitives._primitives
|
global.viewer.scene.primitives.remove(primitiveArr[0])
|
|
// 外网
|
that.mapChanges(that.curMap)
|
|
// 设置地图初始位置，角度等
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
112.90345419857786,
|
30.886750328577417,
|
1000000
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
}
|
|
global.DC.ready(initViewer)
|
|
function isEleFullScreen () {
|
const fullScreenEle =
|
document.fullscreenElement ||
|
document.msFullscreenElement ||
|
document.mozFullScreenElement ||
|
document.webkitFullscreenElement
|
if (fullScreenEle === null) {
|
|
that.isFullscreen = false
|
return false
|
} else {
|
return true
|
}
|
}
|
|
window.onresize = function () {
|
console.log(isEleFullScreen())
|
}
|
|
this.addRegionPolygon(geoJSON)
|
},
|
|
methods: {
|
mapChanges (name) {
|
global.viewer.imageryLayers.remove(baseLayer)
|
if (name == '矢量') {
|
baseLayer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
baseLayer.hue = 3
|
baseLayer.contrast = -1.2
|
} else {
|
baseLayer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'https://t{s}.tianditu.gov.cn/DataServer??T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
}
|
},
|
|
addRegionPolygon (geoJSON) {
|
let regionNameLayer = new global.DC.VectorLayer('regionNameLayer')
|
global.viewer.addLayer(regionNameLayer)
|
|
geoJSON.features.forEach(item => {
|
let label = new global.DC.Label(new global.DC.Position(Number(item.properties.center[0]), Number(item.properties.center[1])), item.properties.name)
|
label.setStyle({
|
fillColor: global.DC.Namespace.Cesium.Color.fromBytes(43, 179, 250, 255),
|
font: '20px'
|
})
|
|
regionNameLayer.addOverlay(label)
|
})
|
|
const geoJsonSource = global.DC.Namespace.Cesium.GeoJsonDataSource.load(geoJSON, {
|
stroke: global.DC.Namespace.Cesium.Color.fromBytes(2, 27, 121, 0),
|
fill: global.DC.Namespace.Cesium.Color.fromBytes(2, 27, 121, 0),
|
strokeWidth: 1,
|
})
|
|
global.viewer.dataSources.add(geoJsonSource).then(function (dataSource) {
|
let entities = dataSource.entities.values
|
//修改entity样式
|
for (let i = 0; i < entities.length; i++) {
|
let entity = entities[i]
|
entity.polygon.fill = false
|
|
entity.polyline = {
|
positions: entity.polygon.hierarchy._value.positions,
|
width: 1,
|
material: global.DC.Namespace.Cesium.Color.fromBytes(43, 179, 250, 255)
|
}
|
}
|
})
|
|
},
|
|
getSKSiteInfo (params) {
|
const iconUrl = params.iconActive
|
|
getResLgtdLttdInfo({ eng_scal: params.eng_scal }).then(res => {
|
res.data.resultList.forEach(item => {
|
this.addBuilboard({
|
layerName: `skSiteAllLayer${params.eng_scal}`,
|
attrParams: item,
|
lng: item.center_long,
|
lat: item.center_lat,
|
iconUrl,
|
size: [20, 20],
|
siteIncident: this.siteIncident
|
})
|
})
|
})
|
},
|
|
searchSK (value) {
|
getResLgtdLttdInfo({ res_nm: value }).then(res => {
|
this.$emit('getsearchSKValList', res.data.resultList)
|
})
|
},
|
|
sKValItemClick (item) {
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(item.center_long),
|
Number(item.center_lat),
|
Number(2000),
|
Number(0),
|
Number(-90),
|
Number(0)
|
)
|
)
|
},
|
|
getStLgtdLttdInfo (params) {
|
const iconUrl = params.iconActive
|
|
getStLgtdLttdInfo().then(res => {
|
res.data.resultList.forEach(item => {
|
this.addBuilboard({
|
layerName: `sySiteAllLayer`,
|
lng: item.station_longitude,
|
lat: item.station_latitude,
|
iconUrl,
|
size: [20, 20],
|
siteIncident: this.siteIncident
|
})
|
})
|
})
|
},
|
|
siteIncident (e) {
|
this.$router.push({ name: '水库详情', params: { ...e.overlay.attrParams } })
|
},
|
|
addSiteAllLayer (params) {
|
if (params.title == '水库') {
|
this.getSKSiteInfo(params.children, 'all')
|
}
|
},
|
|
removeSiteAllLayer (params) {
|
if (params.title == '水库') {
|
this.removeLayer('skSiteAllLayer')
|
}
|
},
|
|
addSiteLayer (params) {
|
console.log(params, 655333333)
|
|
if (params.parentTitle == '水库') {
|
this.getSKSiteInfo(params)
|
} else if (params.parentTitle == '水雨情监测') {
|
this.getStLgtdLttdInfo(params)
|
}
|
},
|
|
removeSiteLayer (params) {
|
if (params.parentTitle == '水库') {
|
this.removeLayer(`skSiteAllLayer${params.eng_scal}`)
|
} else if (params.parentTitle == '水雨情监测') {
|
this.removeLayer(`sySiteAllLayer`)
|
}
|
},
|
|
addLayer (layerName) {
|
siteAllLayer[layerName] = new global.DC.ClusterLayer(layerName, { style: 'clustering' })
|
global.viewer.addLayer(siteAllLayer[layerName])
|
},
|
|
removeLayer (layerName) {
|
global.viewer.removeLayer(siteAllLayer[layerName])
|
siteAllLayer[layerName] = null
|
},
|
|
addBuilboard ({
|
layerName,
|
lng,
|
lat,
|
iconUrl,
|
size,
|
attrParams,
|
siteIncident
|
}) {
|
if (!siteAllLayer[layerName]) {
|
this.addLayer(layerName)
|
}
|
|
let billboard = new global.DC.Billboard(
|
new global.DC.Position(Number(lng), Number(lat)),
|
iconUrl)
|
|
billboard.attrParams = attrParams
|
|
billboard.size = size
|
|
billboard.setStyle({
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
})
|
|
billboard.on(global.DC.MouseEventType.CLICK, siteIncident)
|
|
siteAllLayer[layerName].addOverlay(billboard)
|
}
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scope>
|
.viewer-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
