From abd285e6d013128aa57c9e30e851b2aa76d60ec5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 10 Feb 2026 16:45:17 +0800
Subject: [PATCH] feat:独栋显示调整
---
src/components/map/index.vue | 3233 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 1,745 insertions(+), 1,488 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 8bf0272..3acc1be 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -2,129 +2,130 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-06-21 16:37:19
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-07-19 15:14:02
+ * @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>
+ <div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
+ <slot ref="mainContent" name="mainContent"></slot>
- <slot name="copyrightText"></slot>
+ <slot name="copyrightText"></slot>
- <slot name="showButton"></slot>
+ <slot name="showButton"></slot>
- <slot name="resetPopup"></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>
-
- <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 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 = ''
+let tile3DUrl = ""
-if (process.env.NODE_ENV == 'development') {
- // 开发
- tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL
+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
+ // 部署
+ tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
}
let projectTerrain = null
@@ -132,11 +133,11 @@
var siteEntitylayers = null
let layersObjcect = {
- housingEstateLayer: null,
- patrolWagonLayer: null,
- handMachineLayer: null,
- monitoringLayer: null,
- panoramaLayer: null
+ housingEstateLayer: null,
+ patrolWagonLayer: null,
+ handMachineLayer: null,
+ monitoringLayer: null,
+ panoramaLayer: null,
}
let polygonObj = {}
@@ -145,1398 +146,1654 @@
let baseLayers = []
let tilesetObject = {
- sdTilesetLayer: null
+ 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',
+ "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 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'
+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',
+ name: "mapBox",
- components: { mapPopup, architecturePopup, activityPolicePopup, multipMapPopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, hotelPopup, businessDataPopup, dialogDetailPopup, yToolTip, videoRowClickPopup },
+ 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.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)
- })
-
- 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}`)
- })
-
- this.tilesetLayerType = ''
- },
-
- /**
- * @description: 高精度模型和轻量模型切换
- * @param {*} type
- * @return {*}
- */
- highOrLightChange (type, status = '') {
- this.$EventBus.$emit('showHouseingTileset', {
- type: 'remove'
- })
-
- window.TILESET_LABEL.forEach(item => {
- this.removeMxTileset(`sdTilesetLayer${item}`)
- })
-
- // 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}`, `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`)
- }) :
- window.TILESET_LABEL.forEach(item => {
- this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`)
- })
-
- 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: `/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) {
- 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(-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}`] && tilesetObject[`sdTilesetLayer${item}`] != null) {
- tilesetObject[`sdTilesetLayer${item}`].on(global.DC.MouseEventType.CLICK, event)
- }
- })
- },
-
- unbindMxClick (event) {
- window.TILESET_LABEL.forEach(item => {
- if (tilesetObject[`sdTilesetLayer${item}`] && tilesetObject[`sdTilesetLayer${item}`] != null) {
- tilesetObject[`sdTilesetLayer${item}`].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')
+ 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%;
+ position: relative;
+ width: 100%;
+ height: 100%;
}
</style>
--
Gitblit v1.9.3