<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-06-21 16:37:19
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2025-01-08 15:02:26
|
* @FilePath: \srs-police-affairs\src\components\map\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
|
<slot ref="mainContent" name="mainContent"></slot>
|
|
<slot name="copyrightText"></slot>
|
|
<slot name="showButton"></slot>
|
|
<slot name="resetPopup"></slot>
|
|
<div class="compass-btn">
|
<el-tooltip content="指北针" placement="top" effect="dark">
|
<i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer"
|
:style="{ transform: compassBtnTranslate }" @click="compassBtnClick"></i>
|
</el-tooltip>
|
</div>
|
|
<div class="over-look-btn">
|
<el-tooltip content="一键俯视" placement="top" effect="dark">
|
<i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
|
</el-tooltip>
|
</div>
|
<!-- 全屏控制按钮 -->
|
<div class="screen-full-btn">
|
<el-tooltip v-if="!isShowHomeContentBtn && isFullscreen" content="缩放" placement="top" effect="dark">
|
<i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
|
</el-tooltip>
|
|
<el-tooltip v-if="!isShowHomeContentBtn && !isFullscreen" content="全屏" placement="top" effect="dark">
|
<i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
|
</el-tooltip>
|
<el-tooltip v-if="isShowHomeContentBtn" content="显示/隐藏" placement="top" effect="dark">
|
<i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i>
|
</el-tooltip>
|
</div>
|
<!-- 切换矢量图按钮 -->
|
<div class="image-switch-icon-btn">
|
<el-tooltip content="图层、模型、视角" placement="top" effect="dark">
|
<div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
|
<img src="/img/base_map.png" alt />
|
</div>
|
</el-tooltip>
|
|
<div class="image-switch-img-btn" v-show="showImgBtn" @click.stop>
|
<div class="layer-change-box">
|
<div class="title">
|
底图
|
<div class="close" @click.stop="showImgBtn = false">
|
<img src="/img/icon/close.png" alt />
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="img" @click.stop="switchImg">
|
<span :class="{ on: imgtype == 0 }">影像</span>
|
</div>
|
<div class="elec" @click.stop="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.stop="highOrLightChange('light')">
|
<span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
|
</div>
|
<div class="elec high" @click.stop="highOrLightChange('high')">
|
<span :class="{ on: tilesetLayerType == 'high' }">高精</span>
|
</div>
|
</div>
|
</div>
|
<div class="angle-btn">
|
是否锁定视角：
|
<el-checkbox v-model="angleCheck" @change="angleChange"></el-checkbox>
|
</div>
|
</div>
|
</div>
|
|
<map-popup></map-popup>
|
|
<architecture-popup></architecture-popup>
|
|
<place-base-popup></place-base-popup>
|
|
<activity-police-popup></activity-police-popup>
|
|
<multip-map-popup></multip-map-popup>
|
|
<video-list-popup></video-list-popup>
|
|
<map-search-popup></map-search-popup>
|
|
<house-deep-data-popup></house-deep-data-popup>
|
|
<business-data-popup></business-data-popup>
|
|
<dialog-detail-popup></dialog-detail-popup>
|
|
<hotel-popup></hotel-popup>
|
|
<y-tool-tip></y-tool-tip>
|
|
<assemble-box></assemble-box>
|
|
<video-row-click-popup></video-row-click-popup>
|
</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 projectTerrain = null
|
|
var siteEntitylayers = null
|
|
let layersObjcect = {
|
housingEstateLayer: null,
|
patrolWagonLayer: null,
|
handMachineLayer: null,
|
monitoringLayer: null,
|
panoramaLayer: null,
|
}
|
let polygonObj = {}
|
|
let tilesetLayer = null
|
|
let baseLayers = []
|
|
let tilesetObject = {
|
sdTilesetLayer: null,
|
}
|
|
let curPolygon = 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"
|
import architecturePopup from "./components/architecturePopup.vue"
|
import activityPolicePopup from "./components/activityPolicePopup.vue"
|
import placeBasePopup from "./components/placeBasePopup.vue"
|
import multipMapPopup from "./components/multipMapPopup.vue"
|
import videoListPopup from "./components/videoListPopup.vue"
|
import videoRowClickPopup from "./components/videoRowClickPopup.vue"
|
import mapSearchPopup from "./components/mapSearchPopup.vue"
|
import houseDeepDataPopup from "./components/houseDeepDataPopup.vue"
|
import hotelPopup from "./components/hotelPopup.vue"
|
import businessDataPopup from "./components/businessDataPopup.vue"
|
import dialogDetailPopup from "./components/dialogDetailPopup.vue"
|
import yToolTip from "./components/yToolTip.vue"
|
import createTools from "@/utils/tools/index"
|
import { mapGetters } from "vuex"
|
import { getLineSpeed } from "@/utils/turfPolygon"
|
|
export default {
|
name: "mapBox",
|
|
components: {
|
mapPopup,
|
architecturePopup,
|
activityPolicePopup,
|
placeBasePopup,
|
multipMapPopup,
|
videoListPopup,
|
mapSearchPopup,
|
houseDeepDataPopup,
|
hotelPopup,
|
businessDataPopup,
|
dialogDetailPopup,
|
yToolTip,
|
videoRowClickPopup,
|
},
|
|
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: "",
|
angleCheck: true,
|
compassBtnTranslate: "rotate(0deg)",
|
}
|
},
|
|
computed: {
|
...mapGetters(["isShowHomeContentBtn"]),
|
},
|
|
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.scene.postRender.addEventListener(function () {
|
var heading = global.viewer.scene.camera.heading
|
var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading)
|
that.compassBtnTranslate = "rotate(" + x + "deg)"
|
})
|
|
const curTools = createTools()
|
|
Object.keys(curTools).forEach((key) => {
|
curTools[key].install(global.viewer)
|
})
|
|
// let curTilesetLayer = new global.DC.TilesetLayer('curTilesetLayer')
|
// global.viewer.addLayer(curTilesetLayer)
|
// let curTileset = new global.DC.Tileset(
|
// '/mx/tileset.json'
|
// )
|
// // curTileset.setHeight(20)
|
// curTileset.setHeight(0)
|
// curTilesetLayer.addOverlay(curTileset)
|
|
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()
|
// that.highOrLightChange('light')
|
|
// 地形数据添加
|
// that.addTerrain()
|
|
// 外网
|
// 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=d083e4cf30bfc438ef93436c10c2c20a',
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
// maximumLevel: 18
|
// })
|
// )
|
|
// 设置地图初始位置，角度等
|
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 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("mapRemoveSiteLayer", (params) => {
|
that.mapRemoveSiteLayer(params.layerName, params.siteId)
|
})
|
|
this.$EventBus.$on("mapRemovePolygonLayer", (params) => {
|
that.mapRemovePolygonLayer(
|
params.layerName,
|
params.polygonName,
|
params.type
|
)
|
})
|
|
this.$EventBus.$on("mapRemovePolygon", (params) => {
|
that.mapRemovePolygon(params.layerName, params.overlay, 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,
|
params.mouseOverIncident,
|
params.mouseOutIncident,
|
params.pointMouseMove
|
)
|
})
|
|
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,
|
params.mouseOverIncident,
|
params.mouseOutIncident,
|
params.setStyle
|
)
|
} else {
|
that.layerPolygonAdd(
|
params.layerName,
|
params.positions,
|
params.material,
|
params.distanceDisplayCondition,
|
"polygon",
|
params.params,
|
params.incident,
|
params.mouseOverIncident,
|
params.mouseOutIncident,
|
params.setStyle
|
)
|
}
|
})
|
|
this.$EventBus.$on("layerPolygonArrowsAdd", (params) => {
|
that.layerPolygonArrowsAdd(
|
params.layerName,
|
params.positions,
|
params.material,
|
params.polygonName,
|
params.params,
|
params.incident,
|
params.mouseOverIncident,
|
params.mouseOutIncident,
|
params.setStyle
|
)
|
})
|
|
this.$EventBus.$on("layerPolylineAdd", (params) => {
|
that.layerPolylineAdd(
|
params.layerName,
|
params.positions,
|
params.material,
|
params.width,
|
params.params,
|
params.incident
|
)
|
})
|
|
this.$EventBus.$on("layerWallAdd", (params) => {
|
that.layerWallAdd(params.layerName, params.positions)
|
})
|
|
this.$EventBus.$on("rowLayerWallAdd", (params) => {
|
that.rowLayerWallAdd(params.layerName, params.positions)
|
})
|
|
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("highOrLightChange", (type, status) => {
|
// eslint-disable-next-line no-unused-vars
|
that.highOrLightChange(type, status)
|
})
|
|
this.$EventBus.$on("addMxTileset", (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.addMxTileset(params.titlesetName, params.titlesetUrl, params)
|
})
|
|
this.$EventBus.$on("closeMxTileset", () => {
|
// eslint-disable-next-line no-unused-vars
|
that.closeMxTileset()
|
})
|
|
this.$EventBus.$on("tilesetLayerFlag", (type, cb) => {
|
// eslint-disable-next-line no-unused-vars
|
that.tilesetLayerFlag(type, cb)
|
})
|
|
this.$EventBus.$on("removeMxTileset", (params) => {
|
// eslint-disable-next-line no-unused-vars
|
that.removeMxTileset(params.titlesetName)
|
})
|
|
this.$EventBus.$on("flytoLayer", (params) => {
|
that.flytoLayer(params.polygonName, params.duration)
|
})
|
|
this.$EventBus.$on("showThreeDimensions", (params) => {
|
that.showThreeDimensions(
|
params.positions,
|
params.minHeight,
|
params.maxHeight
|
)
|
})
|
|
this.$EventBus.$on("switchThreeDimensions", (params) => {
|
that.switchThreeDimensions(params)
|
})
|
|
this.$EventBus.$on("clearHouse3D", () => {
|
that.clearHouse3D()
|
})
|
|
this.$EventBus.$on("registerMxClick", (event) => {
|
that.registerMxClick(event)
|
})
|
|
this.$EventBus.$on("unbindMxClick", (event) => {
|
that.unbindMxClick(event)
|
})
|
|
// 重写定位方法
|
const homeCenter = [117.99311892441567, 28.46938164123123]
|
this.$nextTick(() => {
|
// console.log('dc-zoom-controller', document.querySelector('.dc-zoom-controller'))
|
// if (document.querySelector('.dc-zoom-controller') == null) return
|
// 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
|
// })
|
// }
|
// document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置'
|
})
|
},
|
|
methods: {
|
// 获取当前地图中心的经纬度
|
getSceneCenterPosition (viewer) {
|
let centerResult = viewer.camera.pickEllipsoid(
|
new global.DC.Namespace.Cesium.Cartesian2(
|
viewer.canvas.clientWidth / 2,
|
viewer.canvas.clientHeight / 2
|
)
|
)
|
let curPosition =
|
global.DC.Namespace.Cesium.Ellipsoid.WGS84.cartesianToCartographic(
|
centerResult
|
)
|
let curLongitude = (curPosition.longitude * 180) / Math.PI
|
let curLatitude = (curPosition.latitude * 180) / Math.PI
|
return {
|
lon: curLongitude,
|
lat: curLatitude,
|
}
|
},
|
compassBtnClick () {
|
const degrees = global.viewer.camera.heading * (180 / Math.PI)
|
if (degrees == 360) {
|
return
|
}
|
const position = global.DC.Transform.transformCartesianToWGS84(
|
global.viewer.camera.position
|
)
|
|
global.viewer.camera.flyTo({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
position.lng,
|
position.lat,
|
position.alt + 1000
|
)
|
),
|
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.viewer.camera.pitch,
|
roll: global.viewer.camera.roll,
|
},
|
duration: 3,
|
})
|
},
|
|
overLookClick () {
|
const degrees = global.viewer.camera.pitch * (180 / Math.PI)
|
|
if (degrees == -90) {
|
return
|
}
|
|
const position = this.getSceneCenterPosition(global.viewer)
|
|
global.viewer.camera.flyTo({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
position.lon,
|
position.lat,
|
global.viewer.camera.positionCartographic.height * 1.5
|
),
|
orientation: {
|
// 指向
|
heading: global.viewer.camera.heading,
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: global.viewer.camera.roll,
|
},
|
duration: 3,
|
})
|
},
|
|
angleChange (e) {
|
if (e) {
|
global.viewer.camera.flyTo({
|
destination: global.viewer.camera.position,
|
orientation: {
|
heading: global.viewer.camera.heading,
|
pitch: -45,
|
roll: global.viewer.camera.roll,
|
},
|
duration: 0.0,
|
})
|
|
global.viewer.setPitchRange(-90, -45)
|
} else {
|
global.viewer.setPitchRange(-90, 0)
|
}
|
},
|
|
closeMxTileset () {
|
window.TILESET_LABEL.forEach((item) => {
|
this.removeMxTileset(`sdTilesetLayer${item.name}`)
|
})
|
|
this.tilesetLayerType = ""
|
},
|
|
/**
|
* @description: 高精度模型和轻量模型切换
|
* @param {*} type
|
* @return {*}
|
*/
|
highOrLightChange (type, status = "") {
|
this.$EventBus.$emit("showHouseingTileset", {
|
type: "remove",
|
})
|
|
window.TILESET_LABEL.forEach((item) => {
|
this.removeMxTileset(`sdTilesetLayer${item.name}`)
|
})
|
|
// this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`)
|
// this.addMxTileset('sdTilesetLayer02', `https://tuan-gis.sit.fengtu.com.cn/361102/wanda/tileset.json`)
|
// this.addMxTileset('sdTilesetLayer', `/mx/01/tileset.json`)
|
|
if (this.tilesetLayerType == type && status == "") {
|
this.tilesetLayerType = ""
|
} else {
|
this.tilesetLayerType = type
|
|
type == "light"
|
? window.TILESET_LABEL.forEach((item) => {
|
this.addMxTileset(
|
`sdTilesetLayer${item.name}`,
|
`${tile3DUrl}/sf3d/361102/model/all/${item.name}/tileset.json`,
|
item
|
)
|
})
|
: window.TILESET_LABEL.forEach((item) => {
|
this.addMxTileset(
|
`sdTilesetLayer${item.name}`,
|
`${tile3DUrl}/sf3d/361102/model/all1/${item.name}/tileset.json`,
|
item
|
)
|
})
|
|
if (this.$route.path == "/layout/house") {
|
this.$EventBus.$emit("showHouseingTileset", {
|
type: "add",
|
})
|
}
|
}
|
},
|
|
// 模型的点击事件
|
tilesetClick (e) {
|
if (this.$route.path != "/layout/house") {
|
this.$router.push({
|
path: "/layout/house",
|
query: { searchName: "xxx小区" },
|
})
|
}
|
},
|
|
switchImg () {
|
// 天地图 影像
|
this.imgtype = 0
|
baseLayers.length &&
|
baseLayers.forEach((item) => {
|
item && global.viewer.imageryLayers.remove(item)
|
})
|
|
baseLayers = []
|
|
// const layer = global.viewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{reverseY}.png`,
|
// minimumLevel: 0,
|
// maximumLevel: 25,
|
// tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
|
// })
|
// )
|
|
// layer.contrast = 0.8
|
|
// baseLayers.push(layer)
|
|
const qp = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: `/qp/{AZ}/{y}/{x}.png`,
|
customTags: {
|
AZ (imageryProvider, x, y, level) {
|
return "Z" + level
|
},
|
},
|
minimumLevel: 0,
|
maximumLevel: 25,
|
})
|
)
|
|
qp.contrast = 0.8
|
|
baseLayers.push(qp)
|
|
window.YX_LAYER_CONFIG.forEach((item) => {
|
let rectangle = {}
|
|
if (
|
item.west != 0 &&
|
item.south != 0 &&
|
item.east != 0 &&
|
item.north != 0
|
) {
|
rectangle = {
|
rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(
|
Number(item.west),
|
Number(item.south),
|
Number(item.east),
|
Number(item.north)
|
),
|
}
|
} else {
|
return
|
}
|
|
const layer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/${item.name}/{AZ}/{y}/{x}.png`,
|
customTags: {
|
AZ (imageryProvider, x, y, level) {
|
return "Z" + level
|
},
|
},
|
minimumLevel: 0,
|
maximumLevel: 25,
|
...rectangle,
|
})
|
)
|
|
layer.contrast = 0.8
|
|
baseLayers.push(layer)
|
})
|
|
if (window.ADD_NEW_YX_LAYER_CONFIG.length > 0) {
|
window.ADD_NEW_YX_LAYER_CONFIG.forEach((item) => {
|
const layer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/addlayer/${item.name}/{AZ}/{y}/{x}.png`,
|
customTags: {
|
AZ (imageryProvider, x, y, level) {
|
return "Z" + level
|
},
|
},
|
minimumLevel: 0,
|
maximumLevel: 25,
|
})
|
)
|
|
layer.contrast = 0.8
|
|
baseLayers.push(layer)
|
})
|
}
|
|
// 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(),
|
// })
|
// )
|
},
|
|
switchElec () {
|
// 天地图 矢量
|
this.imgtype = 1
|
|
baseLayers.length &&
|
baseLayers.forEach((item) => {
|
item && global.viewer.imageryLayers.remove(item)
|
})
|
|
baseLayers = []
|
|
baseLayers.push(
|
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(20).fill(0).map((v, i) => i + 1),
|
tilingScheme:
|
new global.DC.Namespace.Cesium.GeographicTilingScheme(),
|
})
|
)
|
)
|
|
baseLayers.contrast = 1.0
|
},
|
|
addTerrain () {
|
projectTerrain = global.DC.TerrainFactory.createUrlTerrain({
|
// url: `http://data.marsgis.cn/terrain`
|
url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_DX}`,
|
})
|
|
global.viewer.addTerrain(projectTerrain)
|
},
|
|
removeTerrain () {
|
global.viewer.removeTerrain(projectTerrain)
|
},
|
|
/**
|
* @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
|
}
|
},
|
|
// 切换首页显示隐藏
|
switchShowHomeContent () {
|
this.$store.commit(
|
"SET_ISSHOWHOMECONTENT",
|
!this.$store.state.popupParams.isShowHomeContent
|
)
|
if (this.$store.state.popupParams.isShowHomeContent) {
|
// if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
|
document
|
.querySelector(".dc-container .dc-zoom-controller")
|
.classList.add("homebottom")
|
document.querySelector(".screen-full-btn").classList.add("homebottom")
|
document.querySelector(".over-look-btn").classList.add("homebottom")
|
document.querySelector(".compass-btn").classList.add("homebottom")
|
document
|
.querySelector(".image-switch-icon-btn")
|
.classList.add("iconbottom")
|
} else {
|
// if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
|
document
|
.querySelector(".dc-container .dc-zoom-controller")
|
.classList.remove("homebottom")
|
document
|
.querySelector(".screen-full-btn")
|
.classList.remove("homebottom")
|
document.querySelector(".over-look-btn").classList.remove("homebottom")
|
document.querySelector(".compass-btn").classList.remove("homebottom")
|
document
|
.querySelector(".image-switch-icon-btn")
|
.classList.remove("iconbottom")
|
}
|
},
|
|
/**
|
* 在图层中添加实体(点)
|
* @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, ClusterLayerType) {
|
if (!layersObjcect[layerName]) {
|
this.mapRemoveLayer(layerName, type)
|
layersObjcect[layerName] = null
|
}
|
|
if (type == "VectorLayer") {
|
layersObjcect[layerName] = new global.DC.VectorLayer(layerName)
|
} else if (type == "ClusterLayer") {
|
layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
|
pixelRange: 40,
|
style: ClusterLayerType,
|
})
|
} else if (type == "HeatLayer") {
|
layersObjcect[layerName] = new global.DC.HeatLayer(layerName, {
|
gradient: {
|
0.5: "green",
|
0.6: "orange",
|
0.95: "red",
|
}, //颜色设置
|
height: 0, // 高度
|
radius: 100, // 半径
|
useGround: false, //是否使用贴地模式
|
classificationType: 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者。贴地模式下生效
|
})
|
}
|
|
global.viewer.addLayer(layersObjcect[layerName])
|
},
|
|
/**
|
* 删除图层
|
* @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])
|
}
|
}
|
},
|
|
mapRemovePolygon (layerName, overlay, type) {
|
if (type == "VectorLayer") {
|
if (layersObjcect[layerName] && layersObjcect[layerName] != null) {
|
layersObjcect[layerName].removeOverlay(overlay)
|
}
|
}
|
},
|
|
/**
|
* 清空图层
|
* @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) => { },
|
mouseOverIncident = (e) => { },
|
mouseOutIncident = (e) => { },
|
pointMouseMove = (e) => { }
|
) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, layerType, params.ClusterLayerType)
|
}
|
|
let pointElement
|
let labelElement
|
|
if (type == "billboard") {
|
// pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
|
pointElement = new global.DC.Billboard(
|
new global.DC.Position(Number(params.lng), Number(params.lat), 0),
|
params.url
|
)
|
pointElement.setStyle(params.setStyle)
|
pointElement.size = params.size || [32, 32]
|
pointElement.style = "clustering"
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
|
} else if (type == "label") {
|
// labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
|
labelElement = new global.DC.Label(
|
new global.DC.Position(Number(params.lng), Number(params.lat), 0),
|
params.text
|
)
|
let fontColor =
|
"fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON
|
let style =
|
"fontColor" in params
|
? global.DC.Namespace.Cesium.LabelStyle.FILL
|
: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
|
labelElement.setStyle({
|
style: style,
|
fillColor: fontColor,
|
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") {
|
let allSite = layersObjcect[layerName].getOverlays()
|
|
let flag = allSite.filter((item) => item.attrParams.id == params.id)
|
|
if (flag == true) {
|
return
|
}
|
|
// pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
|
pointElement = new global.DC.Billboard(
|
new global.DC.Position(Number(params.lng), Number(params.lat), 0),
|
params.url
|
)
|
pointElement.setStyle(params.setStyle)
|
pointElement.size = params.size || [32, 32]
|
pointElement.style = "clustering"
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
|
|
// labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
|
labelElement = new global.DC.Label(
|
new global.DC.Position(Number(params.lng), Number(params.lat), 0),
|
String(params.text)
|
)
|
let fontColor =
|
"fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON
|
let style =
|
"fontColor" in params
|
? global.DC.Namespace.Cesium.LabelStyle.FILL
|
: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
|
labelElement.setStyle({
|
style: style,
|
fillColor: fontColor,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: params.outW || 4, // 边框大小，
|
font: "16px sans-serif",
|
pixelOffset: { x: 0, y: -30 },
|
distanceDisplayCondition: distanceDisplayCondition,
|
...params.setStyle,
|
})
|
labelElement.attrParams = params
|
layersObjcect[layerName].addOverlay(labelElement)
|
labelElement.on(global.DC.MouseEventType.CLICK, incident)
|
} else if (type == "HeatPoint") {
|
layersObjcect[layerName].setPositions(params.positions)
|
} else if (type == "newBillboard") {
|
// pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
|
pointElement = new global.DC.Billboard(
|
new global.DC.Position(Number(params.lng), Number(params.lat), 0),
|
params.url
|
)
|
pointElement.setStyle(params.setStyle)
|
pointElement.size = params.size || [32, 32]
|
pointElement.style = "clustering"
|
pointElement.attrParams = params
|
layersObjcect[layerName].addOverlay(pointElement)
|
pointElement.on(global.DC.MouseEventType.CLICK, incident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
|
pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
|
}
|
},
|
|
/**
|
* 删除图层指定点
|
* @param {*} layerName 图层名称
|
* @param {*} siteId 点ID
|
*/
|
mapRemoveSiteLayer (layerName, siteId) {
|
if (layersObjcect[layerName]) {
|
let allSite = layersObjcect[layerName].getOverlays()
|
|
allSite
|
.filter((item) => item.attrParams.id == siteId)
|
.forEach((item) => layersObjcect[layerName].removeOverlay(item))
|
}
|
},
|
|
/**
|
* 图层面添加
|
* @param {*} layerName 图层名称
|
* @param {*} positions 图层位置数据
|
* @param {*} material 颜色
|
* @param {*} distanceDisplayCondition 可见距离
|
*/
|
layerPolygonAdd (
|
layerName,
|
positions,
|
material,
|
distanceDisplayCondition,
|
polygonName,
|
params,
|
incident = (e) => { },
|
mouseOverIncident = (e) => { },
|
mouseOutIncident = (e) => { },
|
setStyle = {}
|
) {
|
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,
|
...setStyle,
|
})
|
// layersObjcect[layerName].addOverlay(polygon)
|
polygonObj[polygonName].attrParams = params
|
polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident)
|
polygonObj[polygonName].on(
|
global.DC.MouseEventType.MOUSE_OVER,
|
mouseOverIncident
|
)
|
polygonObj[polygonName].on(
|
global.DC.MouseEventType.MOUSE_OUT,
|
mouseOutIncident
|
)
|
layersObjcect[layerName].addOverlay(polygonObj[polygonName])
|
},
|
|
/**
|
* 图层面添加
|
* @param {*} layerName 图层名称
|
* @param {*} positions 图层位置数据
|
* @param {*} material 颜色
|
* @param {*} distanceDisplayCondition 可见距离
|
*/
|
layerPolygonArrowsAdd (
|
layerName,
|
positions,
|
material,
|
polygonName = "",
|
params,
|
incident = (e) => { },
|
mouseOverIncident = (e) => { },
|
mouseOutIncident = (e) => { },
|
setStyle = {}
|
) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, "VectorLayer")
|
|
layersObjcect[layerName].allowDrillPicking = true
|
}
|
|
if (polygonName == "") {
|
polygonName = layerName + params.id
|
}
|
|
polygonObj[polygonName] = new global.DC.Polyline(positions)
|
|
let positionData = positions
|
.split(";")
|
.map((item) => {
|
return [Number(item.split(",")[0]), Number(item.split(",")[1])]
|
})
|
.filter((item) => {
|
return !item.some((it) => it == 0)
|
})
|
|
console.log(params.width, 15)
|
|
polygonObj[polygonName].setStyle({
|
width: params.width,
|
material: new global.DC.PolylineImageTrailMaterialProperty({
|
color: new global.DC.Color(255, 255, 255),
|
speed: 20,
|
image: "/images/arrows.png",
|
repeat: {
|
x: getLineSpeed(positionData) / 2,
|
y: 1,
|
},
|
}),
|
distanceDisplayCondition: {
|
near: 0, //最近距离
|
far: 2000, //最远距离
|
},
|
clampToGround: false,
|
...setStyle,
|
})
|
|
polygonObj[polygonName].attrParams = params
|
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)
|
},
|
|
layerWallAdd (layerName, positions) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, "VectorLayer")
|
}
|
|
let wall = new global.DC.Wall(positions)
|
wall.setStyle({
|
material: new global.DC.WallTrailMaterialProperty({
|
color: global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 180),
|
speed: 10,
|
}),
|
})
|
layersObjcect[layerName].addOverlay(wall)
|
},
|
|
rowLayerWallAdd (layerName, positions) {
|
if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
|
this.mapAddLayer(layerName, "VectorLayer")
|
}
|
|
let wall = new global.DC.Wall(positions)
|
wall.setStyle({
|
material: new global.DC.WallImageTrailMaterialProperty({
|
image: "/images/jjx.png",
|
color: global.DC.Namespace.Cesium.Color.fromBytes(255, 255, 0, 180),
|
repeat: { x: 20, y: 1 },
|
speed: 10,
|
}),
|
})
|
layersObjcect[layerName].addOverlay(wall)
|
},
|
|
/**
|
* @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) {
|
if (layersObjcect[layerName]) 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, conf) {
|
if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null
|
|
tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
|
luminanceAtZenith: 0.4,
|
// cullWithChildrenBounds: false,
|
// cullRequestsWhileMoving: false,
|
// skipLevelOfDetail: false,
|
maximumScreenSpaceError: conf.maximumScreenSpaceError || 16,
|
shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED,
|
})
|
|
// 地形数据添加
|
tilesetObject[titlesetName].setHeight(-73)
|
|
tilesetLayer.addOverlay(tilesetObject[titlesetName])
|
|
// global.viewer.flyTo(tilesetObject[titlesetName])removeMxTileset
|
},
|
|
tilesetLayerFlag (type, cb) {
|
if (type == 1) {
|
if (this.tilesetLayerType != "") {
|
this.$message({
|
message: "请关闭模型再开始绘制",
|
type: "warning",
|
})
|
|
cb(false)
|
return
|
}
|
} else {
|
if (this.tilesetLayerType == "") {
|
this.$message({
|
message: "请打开模型再开始绘制",
|
type: "warning",
|
})
|
|
cb(false)
|
return
|
}
|
}
|
|
cb(true)
|
},
|
|
/**
|
* 删除模型
|
* @param {*} titlesetName 图层名称
|
* @param {*} incident 模型点击事件
|
*/
|
removeMxTileset (titlesetName) {
|
if (tilesetObject[titlesetName] && tilesetObject[titlesetName] != null) {
|
tilesetLayer.removeOverlay(tilesetObject[titlesetName])
|
tilesetObject[titlesetName] = null
|
}
|
},
|
|
/**
|
* 建筑高亮显示
|
* @param {*} positions 建筑范围坐标
|
* @param {*}
|
*/
|
showThreeDimensions (positions, minHeight, maxHeight) {
|
console.log("showThreeDimensions--map")
|
if (curPolygon != null) {
|
global.viewer.scene.primitives.remove(curPolygon)
|
curPolygon = null
|
}
|
|
let housePositions = JSON.parse(positions).coordinates[0]
|
|
let floorPositions = housePositions.reduce((prev, curr) => {
|
prev.push(curr[0])
|
prev.push(curr[1])
|
|
return prev
|
}, [])
|
|
curPolygon = new global.DC.Namespace.Cesium.ClassificationPrimitive({
|
geometryInstances: new global.DC.Namespace.Cesium.GeometryInstance({
|
geometry: new global.DC.Namespace.Cesium.PolygonGeometry({
|
polygonHierarchy: new global.DC.Namespace.Cesium.PolygonHierarchy(
|
global.DC.Namespace.Cesium.Cartesian3.fromDegreesArray(
|
floorPositions
|
)
|
),
|
extrudedHeight: maxHeight - 73, //分层顶部海拔
|
height: minHeight - 73, //分层底部海拔
|
}),
|
|
attributes: {
|
color:
|
global.DC.Namespace.Cesium.ColorGeometryInstanceAttribute.fromColor(
|
global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5)
|
),
|
show: new global.DC.Namespace.Cesium.ShowGeometryInstanceAttribute(
|
true
|
),
|
},
|
}),
|
|
classificationType:
|
global.DC.Namespace.Cesium.ClassificationType.CESIUM_3D_TILE,
|
})
|
|
global.viewer.scene.primitives.add(curPolygon)
|
},
|
|
// 建筑高亮切换显示隐藏
|
switchThreeDimensions (boolean) {
|
if (!curPolygon) return
|
curPolygon.show = boolean
|
},
|
|
// 清除建筑3D
|
clearHouse3D () {
|
global.viewer.scene.primitives.remove(curPolygon)
|
|
curPolygon = null
|
},
|
|
registerMxClick (event) {
|
this.unbindMxClick()
|
window.TILESET_LABEL.forEach((item) => {
|
if (
|
tilesetObject[`sdTilesetLayer${item.name}`] &&
|
tilesetObject[`sdTilesetLayer${item.name}`] != null
|
) {
|
tilesetObject[`sdTilesetLayer${item.name}`].on(
|
global.DC.MouseEventType.CLICK,
|
event
|
)
|
}
|
})
|
},
|
|
unbindMxClick (event) {
|
window.TILESET_LABEL.forEach((item) => {
|
if (
|
tilesetObject[`sdTilesetLayer${item.name}`] &&
|
tilesetObject[`sdTilesetLayer${item.name}`] != null
|
) {
|
tilesetObject[`sdTilesetLayer${item.name}`].off(
|
global.DC.MouseEventType.CLICK,
|
event
|
)
|
}
|
})
|
},
|
},
|
|
destroyed () {
|
this.$EventBus.$off("mapAddLayer")
|
this.$EventBus.$off("mapRemoveLayer")
|
this.$EventBus.$off("mapRemovePolygonLayer")
|
this.$EventBus.$off("mapRemoveSiteLayer")
|
this.$EventBus.$off("mapRemovePolygon")
|
this.$EventBus.$off("mapClearLayer")
|
this.$EventBus.$off("layerPointAdd")
|
this.$EventBus.$off("layerPolygonAdd")
|
this.$EventBus.$off("layerPolygonArrowsAdd")
|
this.$EventBus.$off("layerPolylineAdd")
|
this.$EventBus.$off("layerWallAdd")
|
this.$EventBus.$off("rowLayerWallAdd")
|
this.$EventBus.$off("getOverLayerID")
|
this.$EventBus.$off("layerShow")
|
this.$EventBus.$off("toPosition")
|
this.$EventBus.$off("highOrLightChange")
|
this.$EventBus.$off("addMxTileset")
|
this.$EventBus.$off("closeMxTileset")
|
this.$EventBus.$off("tilesetLayerFlag")
|
this.$EventBus.$off("removeMxTileset")
|
this.$EventBus.$off("flytoLayer")
|
this.$EventBus.$off("showThreeDimensions")
|
this.$EventBus.$off("switchThreeDimensions")
|
this.$EventBus.$off("clearHouse3D")
|
this.$EventBus.$off("registerMxClick")
|
this.$EventBus.$off("unbindMxClick")
|
},
|
}
|
</script>
|
|
<style lang="scss" scope>
|
.viewer-box {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
