<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 17:00:30
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-02-28 14:16:16
|
* @FilePath: \srs-police-affairs\src\components\map\index.vue
|
* @Description: 公用地图组件
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="viewer-box" id="viewer-container">
|
<slot ref="mainContent" name="mainContent"></slot>
|
<slot name="showButton"></slot>
|
<!-- 全屏控制按钮 -->
|
<div class="screen-full-btn">
|
<el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
|
<i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
|
</el-tooltip>
|
<el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
|
<i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
|
</el-tooltip>
|
</div>
|
<!-- 切换矢量图按钮 -->
|
<div class="image-switch-icon-btn">
|
<div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
|
<img src="/img/base_map.png" alt />
|
</div>
|
|
<div class="image-switch-img-btn" v-show="showImgBtn">
|
<div class="layer-change-box">
|
<div class="title">
|
底图
|
<div class="close" @click.stop="showImgBtn = false" title="关闭"></div>
|
</div>
|
<div class="content">
|
<div class="img" @click="switchImg">
|
<span :class="{ on: imgtype == 0 }">影像</span>
|
</div>
|
<div class="elec" @click="switchElec">
|
<span :class="{ on: imgtype == 1 }">矢量</span>
|
</div>
|
</div>
|
</div>
|
<div class="layer-change-box">
|
<div class="title">
|
模型
|
</div>
|
<div class="content">
|
<div class="img light" @click="highOrLightChange('light')">
|
<span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
|
</div>
|
<div class="elec high" @click="highOrLightChange('high')">
|
<span :class="{ on: tilesetLayerType == 'high' }">高精</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<map-popup></map-popup>
|
|
<assemble-box></assemble-box>
|
</div>
|
</template>
|
|
<script>
|
|
|
let tile3DUrl = ''
|
|
if (process.env.NODE_ENV == 'development') {
|
// 开发
|
tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL
|
} else {
|
// 部署
|
tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
|
}
|
|
let label = [
|
'01',
|
'02',
|
'03',
|
'04',
|
'05',
|
'06',
|
'07',
|
'08',
|
'09',
|
'10',
|
'11',
|
'12',
|
'13',
|
'14',
|
'15',
|
'16',
|
'17',
|
'18',
|
'19',
|
'20',
|
'21',
|
'22',
|
'23',
|
'24',
|
'25',
|
'26',
|
'27',
|
'28',
|
'29',
|
'30',
|
'31',
|
'32',
|
'33',
|
'34'
|
]
|
|
var siteEntitylayers = null
|
|
let layersObjcect = {
|
housingEstateLayer: null,
|
patrolWagonLayer: null,
|
handMachineLayer: null,
|
monitoringLayer: null,
|
panoramaLayer: null
|
}
|
let polygonObj = {}
|
|
let tilesetLayer = null
|
|
let baseLayers = null
|
|
let tilesetObject = {
|
sdTilesetLayer: null
|
}
|
|
let flootEntitysEntites = null
|
|
const ysLabels = [
|
'EPSG:4490_test:0',
|
'EPSG:4490_test:1',
|
'EPSG:4490_test:2',
|
'EPSG:4490_test:3',
|
'EPSG:4490_test:4',
|
'EPSG:4490_test:5',
|
'EPSG:4490_test:6',
|
'EPSG:4490_test:7',
|
'EPSG:4490_test:8',
|
'EPSG:4490_test:9',
|
'EPSG:4490_test:10',
|
'EPSG:4490_test:11',
|
'EPSG:4490_test:12',
|
'EPSG:4490_test:13',
|
'EPSG:4490_test:14',
|
'EPSG:4490_test:15',
|
'EPSG:4490_test:16',
|
'EPSG:4490_test:17',
|
'EPSG:4490_test:18',
|
'EPSG:4490_test:19',
|
'EPSG:4490_test:20',
|
'EPSG:4490_test:21',
|
'EPSG:4490_test:22',
|
]
|
|
import mapPopup from './components/mapPopup.vue'
|
|
export default {
|
name: 'mapBox',
|
|
components: { mapPopup },
|
|
data () {
|
return {
|
fullscreen: false,
|
isFullscreen: false,
|
dialogVisible: false,
|
dialogTitle: "",
|
searchInput: '',
|
loading: false,
|
searchDetailsShow: false,
|
videoExist: true,
|
videoTotal: 0,
|
carTotal: 0,
|
showImgBtn: false,
|
imgtype: 0,
|
tilesetLayerType: ''
|
}
|
},
|
|
computed: {
|
|
},
|
mounted () {
|
if (global.viewer != null) {
|
global.viewer = null
|
}
|
|
const that = this
|
|
// 初始化地图
|
function initViewer () {
|
// new Viewer(new 地图)
|
global.viewer = new global.DC.Viewer('viewer-container', {
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
})
|
|
global.viewer.setPitchRange(-90, -45)
|
|
// global.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
// 去除logo
|
let primitiveArr = global.viewer.scene.primitives._primitives
|
global.viewer.scene.primitives.remove(primitiveArr[0])
|
|
|
// 已声明的图层添加到地图上
|
siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
|
global.viewer.addLayer(siteEntitylayers)
|
|
// 图层加入地图
|
layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
|
global.viewer.addLayer(layersObjcect.housingEstateLayer)
|
layersObjcect.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
|
global.viewer.addLayer(layersObjcect.patrolWagonLayer)
|
layersObjcect.handMachineLayer = new global.DC.VectorLayer('handMachineLayer')
|
global.viewer.addLayer(layersObjcect.handMachineLayer)
|
layersObjcect.monitoringLayer = new global.DC.VectorLayer('monitoringLayer')
|
global.viewer.addLayer(layersObjcect.monitoringLayer)
|
layersObjcect.panoramaLayer = new global.DC.VectorLayer('panoramaLayer')
|
global.viewer.addLayer(layersObjcect.panoramaLayer)
|
|
// 模型图层添加
|
tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
|
global.viewer.addLayer(tilesetLayer)
|
|
// 加载围栏
|
// let layer = new global.DC.VectorLayer('layer')
|
// global.viewer.addLayer(layer)
|
|
// let wall = new global.DC.Wall(
|
// '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0'
|
// )
|
|
// wall.setStyle({
|
// material: new global.DC.WallTrailMaterialProperty({
|
// color: global.DC.Namespace.Cesium.Color.fromBytes(
|
// 33, 150, 243,
|
// 200
|
// ),
|
// speed: 8
|
// })
|
// })
|
// layer.addOverlay(wall)
|
|
|
|
// 判断是否支持图像渲染像素化处理
|
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
global.viewer.setOptions({
|
resolutionScale: window.devicePixelRatio
|
})
|
}
|
|
// let terrain = global.DC.TerrainFactory.createUrlTerrain({
|
// url: 'http://data.marsgis.cn/terrain'
|
// })
|
// global.viewer.addTerrain(terrain)
|
|
// 内网
|
that.switchImg()
|
|
// 外网
|
global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'http://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
|
})
|
)
|
|
global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: '/sryx/{z}/{x}/{y}.png',
|
})
|
)
|
|
// 设置地图初始位置，角度等
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
117.951478782, 28.447896798, 20000
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
|
let positions = [[117.951478782, 28.447896798, 0], [117.951469798, 28.447894686, 0], [117.951397357, 28.447698099, 0], [117.951505114, 28.447674695, 0], [117.951485465, 28.447619271, 0], [117.951706955, 28.447558541, 0], [117.951722755, 28.447611995, 0], [117.951834021, 28.447588427, 0], [117.951896863, 28.447789523, 0], [117.951478782, 28.447896798, 0]]
|
let MIN_F_H = positions.map(item => {
|
item[2] = 70
|
return item
|
})
|
|
let MAN_F_H = positions.map(item => {
|
item[2] = 80
|
return item
|
})
|
|
// 原生Cesium加载多边体
|
let floorEntitysLayers = new global.DC.Namespace.Cesium.CustomDataSource("floorEntitysLayers")
|
global.viewer.dataSources.add(floorEntitysLayers)
|
flootEntitysEntites = floorEntitysLayers.entities
|
|
// let floorPositions = positions.reduce((prev, curr, index, arr) => {
|
// curr.forEach(item => {
|
// prev.push(item)
|
// })
|
// return prev
|
// }, [])
|
|
// flootEntitysEntites.add({
|
// polygon: {
|
// hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
|
// heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
|
// extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
|
// height: 70,
|
// extrudedHeight: 80,
|
// material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
|
// }
|
// })
|
|
|
// console.log(floorPositions)
|
|
// let floorPositions = MIN_F_H.concat(MAN_F_H)
|
|
// let floorPolygonlayer = new global.DC.VectorLayer('floorPolygonlayer')
|
// global.viewer.addLayer(floorPolygonlayer)
|
|
// let floorPolygon = new global.DC.Polygon(
|
// floorPositions
|
// )
|
|
// floorPolygon.setStyle({
|
// height: 70,
|
// extrudedHeight: 80,
|
// material: global.DC.Color.GREEN.withAlpha(0.5),
|
// heightReference: 2,
|
// perPositionHeight: true
|
// })
|
|
// floorPolygonlayer.addOverlay(floorPolygon)
|
|
// global.viewer.flyTo(floorPolygonlayer)
|
|
// global.viewer.flyTo(sqTileset)
|
|
global.viewer.use(new global.DC.Measure())
|
|
// global.viewer.locationBar.enable = true
|
// 缩放
|
global.viewer.zoomController.enable = true
|
// 比例尺
|
// global.viewer.distanceLegend.enable = true
|
|
// let arr1 = [[117.9552436, 28.44500025], [117.9557116, 28.44429919], [117.9574856, 28.44444285]]
|
|
// arr1.forEach(item => {
|
// console.log(global.DC.CoordTransform.GCJ02ToWGS84(item[0], item[1]), 2222)
|
// })
|
}
|
|
global.DC.ready(initViewer)
|
|
// global.viewer.scene.morphTo2D(1)
|
|
// 清除控制台
|
console.clear()
|
|
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.$EventBus.$emit('mapAddLayer', {
|
// layerName: 'housingEstateLayer',
|
// type: 'VectorLayer'
|
// })
|
|
|
this.$EventBus.$on('mapAddLayer', (params) => {
|
that.mapAddLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('mapRemoveLayer', (params) => {
|
that.mapRemoveLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('mapRemovePolygonLayer', (params) => {
|
that.mapRemovePolygonLayer(params.layerName, params.polygonName, params.type)
|
})
|
|
this.$EventBus.$on('mapClearLayer', (params) => {
|
that.mapClearLayer(params.layerName, params.type)
|
})
|
|
this.$EventBus.$on('layerPointAdd', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.layerPointAdd(params.layerName, params.type, params.layerType, params.params, params.distanceDisplayCondition, params.incident)
|
})
|
|
this.$EventBus.$on('layerPolygonAdd', (params) => {
|
if ('polygonName' in params) {
|
that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName, params.params, params.incident)
|
} else {
|
that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon', params.params, params.incident)
|
}
|
})
|
|
this.$EventBus.$on('layerPolylineAdd', (params) => {
|
that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width, params.params, params.incident)
|
})
|
|
this.$EventBus.$on('getOverLayerID', (params) => {
|
that.getOverLayerID(params.layerName, params.ids, params.cb)
|
})
|
|
this.$EventBus.$on('layerShow', (params) => {
|
that.layerShow(params.layerName, params.flag)
|
})
|
|
this.$EventBus.$on('toPosition', (params) => {
|
that.toPosition(params.siteJd, params.siteWd, params.siteGd, params.siteHeading, params.sitePitch, params.siteRoll, params.time)
|
})
|
|
this.$EventBus.$on('addMxTileset', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident)
|
})
|
|
this.$EventBus.$on('removeMxTileset', (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.removeMxTileset(params.titlesetName, params.incident)
|
})
|
|
this.$EventBus.$on('flytoLayer', (params) => {
|
that.flytoLayer(params.polygonName, params.duration)
|
})
|
|
this.$EventBus.$on('showHouse3D', (params) => {
|
that.showHouse3D(params.positions, params.minHeight, params.maxHeight)
|
})
|
|
this.$EventBus.$on('clearHouse3D', () => {
|
that.clearHouse3D()
|
})
|
|
// 重写定位方法
|
const homeCenter = [117.99311892441567, 28.46938164123123]
|
this.$nextTick(() => {
|
document.querySelector('.dc-zoom-controller').children[1].onclick =
|
function () {
|
that.$EventBus.$emit('toPosition', {
|
siteJd: homeCenter[0] + 0.046,
|
siteWd: homeCenter[1] - 0.36,
|
siteGd: 36000,
|
siteHeading: -3,
|
sitePitch: -45
|
})
|
}
|
})
|
},
|
|
methods: {
|
/**
|
* @description: 高精度模型和轻量模型切换
|
* @param {*} type
|
* @return {*}
|
*/
|
highOrLightChange (type) {
|
this.removeMxTileset('sdTilesetLayer', this.housingIndent)
|
|
// this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent)
|
|
|
if (this.tilesetLayerType == type) {
|
this.tilesetLayerType = ''
|
|
} else {
|
this.tilesetLayerType = type
|
|
type == 'light' ?
|
label.forEach(item => {
|
this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`, this.housingIndent)
|
}) :
|
label.forEach(item => {
|
this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`, this.housingIndent)
|
})
|
}
|
|
this.showImgBtn = false
|
},
|
|
/**
|
* @description: 社区感知下，模型的点击事件
|
* @param {*} e
|
* @return {*}
|
*/
|
housingIndent (e) {
|
if (this.$route.path == '/layout/house') {
|
this.$EventBus.$emit('housingIndent', e)
|
}
|
},
|
|
// 模型的点击事件
|
tilesetClick (e) {
|
if (this.$route.path != "/layout/house") {
|
this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } })
|
}
|
},
|
|
switchImg () {
|
// 天地图 影像
|
this.imgtype = 0
|
baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
|
baseLayers = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/geoserver/gwc/service/wmts`,
|
layer: "test",
|
style: "",
|
format: "image/png",
|
tileMatrixSetID: "EPSG:4490_test",
|
tileMatrixLabels: ysLabels,
|
tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
|
})
|
)
|
|
baseLayers.contrast = 0.8
|
|
this.showImgBtn = false
|
},
|
|
switchElec () {
|
// 天地图 矢量
|
this.imgtype = 1
|
baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
|
baseLayers = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_SL}/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326`,
|
layer: "wmts_4326_361100",
|
style: "default",
|
format: "image/png",
|
tileMatrixSetID: "c",
|
tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
|
tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
|
})
|
)
|
|
baseLayers.contrast = 1.0
|
|
this.showImgBtn = false
|
},
|
|
/**
|
* @description: 全屏控制
|
* @return {*} 无返回值
|
*/
|
fullscreenchange () {
|
// 最新写法
|
const isFullScreen = document.fullscreenElement
|
if (isFullScreen) {
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen()
|
}
|
this.isFullscreen = false
|
} else {
|
var fullscreen = document.body // 需要全屏的元素
|
if (fullscreen.requestFullscreen) {
|
fullscreen.requestFullscreen()
|
} else if (fullscreen.mozRequestFullScreen) {
|
fullscreen.mozRequestFullScreen()
|
} else if (fullscreen.webkitRequestFullscreen) {
|
fullscreen.webkitRequestFullscreen()
|
} else if (fullscreen.msRequestFullscreen) {
|
fullscreen.msRequestFullscreen()
|
}
|
this.isFullscreen = true
|
}
|
},
|
|
/**
|
* 在图层中添加实体(点)
|
* @param {*} item 图标
|
* @param {*} url 图标地址
|
*/
|
addSiteEntity (item, url) {
|
const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lng), Number(item.lat)), url)
|
billboard.size = [20, 28]
|
billboard.attrParams = item
|
siteEntitylayers.addOverlay(billboard)
|
},
|
|
/**
|
* 添加图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapAddLayer (layerName, type) {
|
if (type == 'VectorLayer') {
|
if (!layersObjcect[layerName]) layersObjcect[layerName] = null
|
|
layersObjcect[layerName] = new global.DC.VectorLayer(layerName)
|
|
layersObjcect[layerName].addTo(global.viewer)
|
} else if (type == 'ClusterLayer') {
|
if (!layersObjcect[layerName]) layersObjcect[layerName] = null
|
|
layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
|
pixelRange: 4
|
})
|
|
layersObjcect[layerName].addTo(global.viewer)
|
} else if (type == 'HeatLayer') {
|
if (!layersObjcect[layerName]) layersObjcect[layerName] = null
|
|
layersObjcect[layerName] = new global.DC.HeatLayer(layerName)
|
|
layersObjcect[layerName].addTo(global.viewer)
|
}
|
},
|
|
/**
|
* 删除图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapRemoveLayer (layerName, type) {
|
if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') {
|
if (layersObjcect[layerName] && layersObjcect[layerName] != null) {
|
layersObjcect[layerName].remove()
|
layersObjcect[layerName] = null
|
}
|
}
|
},
|
|
/**
|
* 删除图层指定面
|
* @param {*} layerName 图层名称
|
* @param {*} polygonName 面名称
|
* @param {*} type 图层类型
|
*/
|
mapRemovePolygonLayer (layerName, polygonName, type) {
|
if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') {
|
if (layersObjcect[layerName] && layersObjcect[layerName] != null && polygonObj[polygonName] && polygonObj[polygonName] != null) {
|
layersObjcect[layerName].removeOverlay(polygonObj[polygonName])
|
}
|
}
|
},
|
|
/**
|
* 清空图层
|
* @param {*} layerName 图层名称
|
* @param {*} type 图层类型
|
*/
|
mapClearLayer (layerName, type) {
|
if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') {
|
if (layersObjcect[layerName] && layersObjcect[layerName] != null)
|
layersObjcect[layerName].clear()
|
}
|
},
|
|
/**
|
* 图层点添加
|
* @param {*} layerName 图层名称
|
* @param {*} type 添加的点位类型
|
* @param {*} params 添加的点位参数（内容、详情）
|
* @param {*} incident 添加的点位事件
|
*/
|
|
layerPointAdd (layerName, type, layerType = 'VectorLayer', params, distanceDisplayCondition = {
|
near: 0, //最近距离
|
far: Number.MAX_VALUE //最远距离
|
}, incident = (e) => { }) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, layerType)
|
}
|
|
let pointElement
|
let labelElement
|
|
if (type == "billboard") {
|
pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
|
pointElement.size = [32, 32]
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
} else if (type == "label") {
|
labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
|
labelElement.setStyle({
|
fillColor: global.DC.Color.CRIMSON,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: params.outW || 4, // 边框大小，
|
font: '16px sans-serif',
|
pixelOffset: { x: 0, y: -30 },
|
distanceDisplayCondition: distanceDisplayCondition
|
})
|
labelElement.attrParams = params
|
layersObjcect[layerName].addOverlay(labelElement)
|
labelElement.on(global.DC.MouseEventType.CLICK, incident)
|
} else if (type == "billboardOrLabel") {
|
pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
|
pointElement.size = [32, 32]
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
|
labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
|
labelElement.setStyle({
|
fillColor: global.DC.Color.CRIMSON,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 4, // 边框大小，
|
font: '16px sans-serif',
|
pixelOffset: { x: 0, y: -30 }
|
})
|
labelElement.attrParams = params
|
layersObjcect[layerName].addOverlay(labelElement)
|
labelElement.on(global.DC.MouseEventType.CLICK, incident)
|
} else if (type == 'HeatPoint') {
|
layersObjcect[layerName].setPositions(params.positions)
|
}
|
|
},
|
|
/**
|
* 图层面添加
|
* @param {*} layerName 图层名称
|
* @param {*} positions 图层位置数据
|
* @param {*} material 颜色
|
* @param {*} distanceDisplayCondition 可见距离
|
*/
|
layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName, params, incident = (e) => { }) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, 'VectorLayer')
|
|
layersObjcect[layerName].allowDrillPicking = true
|
}
|
// let polygon = new global.DC.Polygon(positions)
|
// let polygonObj = {}//要在全局定义
|
polygonObj[polygonName] = new global.DC.Polygon(positions)
|
// polygon.setStyle({
|
polygonObj[polygonName].setStyle({
|
material: material,
|
distanceDisplayCondition: distanceDisplayCondition,
|
perPositionHeight: true,
|
})
|
// layersObjcect[layerName].addOverlay(polygon)
|
polygonObj[polygonName].attrParams = params
|
polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident)
|
layersObjcect[layerName].addOverlay(polygonObj[polygonName])
|
},
|
|
/**
|
* 图层线添加
|
* @param {*} layerName 图层名称
|
* @param {*} positions 图层位置数据
|
* @param {*} material 颜色
|
* @param {*} width 宽度
|
*/
|
layerPolylineAdd (layerName, positions, material, width, params, incident = (e) => { }) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, 'VectorLayer')
|
|
layersObjcect[layerName].allowDrillPicking = true
|
}
|
|
let polyline = new global.DC.Polyline(positions)
|
|
polyline.setStyle({
|
width: width,
|
material: material,
|
clampToGround: false
|
})
|
polyline.attrParams = params
|
polyline.on(global.DC.MouseEventType.CLICK, incident)
|
|
layersObjcect[layerName].addOverlay(polyline)
|
},
|
|
/**
|
* @description: 通过ID获取图层
|
* @return {*}
|
*/
|
getOverLayerID (layerName, ids = [], cb) {
|
|
const data = ids.reduce((pre, cur) => {
|
|
if (
|
layersObjcect[layerName].getOverlay(cur.overlayId)
|
&& layersObjcect[layerName].getOverlay(cur.overlayId) != undefined
|
&& layersObjcect[layerName].getOverlay(cur.overlayId) != null
|
&& layersObjcect[layerName].getOverlay(cur.overlayId) != ''
|
) {
|
pre.push(layersObjcect[layerName].getOverlay(cur.overlayId).attrParams)
|
} else {
|
layersObjcect[layerName].eachOverlay(item => {
|
if (item.overlayId == cur.overlayId)
|
pre.push(item.attrParams)
|
})
|
}
|
|
return pre
|
|
}, [])
|
|
cb(data)
|
|
},
|
|
/**
|
* 图层显示隐藏
|
* @param {*} layerName 图层名称
|
* @param {*} flag 显示隐藏
|
*/
|
layerShow (layerName, flag) {
|
layersObjcect[layerName].show = flag
|
},
|
|
/**
|
* 飞到指定位置
|
* @param {*} siteJd 经度
|
* @param {*} siteWd 纬度
|
* @param {*} siteGd 高度，默认0
|
* @param {*} siteHeading 偏航角度，默认0
|
* @param {*} sitePitch 俯仰角度，默认0
|
* @param {*} siteRoll 翻转角度，默认0
|
* @param {*} time 飞行时间，默认3秒
|
*/
|
toPosition (siteJd, siteWd, siteGd = 2000, siteHeading = 0, sitePitch = -90, siteRoll = 0, time = 3) {
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
Number(siteJd),
|
Number(siteWd),
|
Number(siteGd),
|
Number(siteHeading),
|
Number(sitePitch),
|
Number(siteRoll)
|
),
|
function () { },
|
time
|
)
|
},
|
// sdTilesetLayer
|
|
/**
|
* 飞到指定范围
|
* @param {*} polygonName 范围名称
|
* @param {*} duration 时间
|
*/
|
flytoLayer (polygonName, duration = 3) {
|
global.viewer.flyTo(polygonObj[polygonName], duration)
|
},
|
|
/**
|
* 添加模型
|
* @param {*} titlesetName 图层名称
|
* @param {*} titlesetUrl 模型地址
|
* @param {*} incident 模型点击事件
|
*/
|
addMxTileset (titlesetName, titlesetUrl, incident = (e) => { }) {
|
if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null
|
|
tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
|
luminanceAtZenith: 0.4,
|
// cullWithChildrenBounds: false,
|
// cullRequestsWhileMoving: false,
|
// skipLevelOfDetail: false,
|
shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
|
})
|
|
tilesetObject[titlesetName].setHeight(-72)
|
|
tilesetLayer.addOverlay(tilesetObject[titlesetName])
|
|
// global.viewer.flyTo(tilesetObject[titlesetName])
|
tilesetObject[titlesetName].on(global.DC.MouseEventType.CLICK, incident)
|
},
|
|
/**
|
* 删除模型
|
* @param {*} titlesetName 图层名称
|
* @param {*} incident 模型点击事件
|
*/
|
removeMxTileset (titlesetName, incident = (e) => { }) {
|
if (tilesetObject[titlesetName] && tilesetObject[titlesetName] != null) {
|
tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, incident)
|
tilesetLayer.removeOverlay(tilesetObject[titlesetName])
|
tilesetObject[titlesetName] = null
|
}
|
},
|
|
/**
|
* 建筑高亮显示
|
* @param {*} positions 建筑范围坐标
|
* @param {*}
|
*/
|
showHouse3D (positions, minHeight, maxHeight) {
|
flootEntitysEntites.removeAll()
|
let housePositions = JSON.parse(positions).coordinates[0]
|
|
let floorPositions = housePositions.reduce((prev, curr) => {
|
curr.forEach(item => {
|
prev.push(item)
|
})
|
return prev
|
}, [])
|
|
flootEntitysEntites.add({
|
polygon: {
|
hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
|
heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
|
extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
|
height: minHeight,
|
extrudedHeight: maxHeight,
|
material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
|
}
|
})
|
},
|
|
// 清除建筑3D
|
clearHouse3D () {
|
flootEntitysEntites.removeAll()
|
},
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scope>
|
.viewer-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
