From 8afb1cbbeeccc488b43d33da8ca83f4e3ff1f2b4 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 08 Feb 2023 16:50:20 +0800
Subject: [PATCH] 视频监控树结构更改，地图添加影像服务
---
src/components/map/index.vue | 215 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 156 insertions(+), 59 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 0cd4702..a5c89a5 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 17:00:30
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-12-30 13:59:43
+ * @LastEditTime: 2023-02-08 16:49:29
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -22,7 +22,8 @@
</el-tooltip>
</div>
<!-- 切换矢量图按钮 -->
- <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
+ <div style="display: none !important;" class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true"
+ @mouseleave="showImgBtn = false">
<div class="icon-box">
<img src="/img/base_map.png" alt />
</div>
@@ -62,6 +63,8 @@
let tilesetObject = {
sdTilesetLayer: null
}
+
+let flootEntitysEntites = null
import mapPopup from './components/mapPopup.vue'
@@ -138,23 +141,23 @@
global.viewer.addLayer(tilesetLayer)
// 加载围栏
- let layer = new global.DC.VectorLayer('layer')
- global.viewer.addLayer(layer)
+ // 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'
- )
+ // 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)
+ // wall.setStyle({
+ // material: new global.DC.WallTrailMaterialProperty({
+ // color: global.DC.Namespace.Cesium.Color.fromBytes(
+ // 33, 150, 243,
+ // 200
+ // ),
+ // speed: 8
+ // })
+ // })
+ // layer.addOverlay(wall)
@@ -171,27 +174,50 @@
// global.viewer.addTerrain(terrain)
// 天地图 影像
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- format: 'image/jpeg',
- show: true,
- maximumLevel: 18
- })
- )
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
// 上饶部署，内网使用的
- // global.viewer.imageryLayers.addImageryProvider(
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
+ layer: "wmts_4326_361100",
+ style: "default",
+ format: "image/png",
+ tileMatrixSetID: "c",
+ tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ })
+ )
+
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: 'http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts/{z}/{y}/{x}.png',
+ })
+ )
+
+ // 影像图层
+ // const ysWmts = global.viewer.imageryLayers.addImageryProvider(
// new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- // url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
- // layer: "wmts_4326_361100",
- // style: "default",
+ // url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
+ // layer: "test",
+ // style: "",
// format: "image/png",
- // tileMatrixSetID: "c",
- // tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
- // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // tileMatrixSetID: gridsetName,
+ // tileMatrixLabels: gridNames.map(item => {
+ // let arr = item.split(':')
+ // arr[2] = arr[2] - 1
+ // return arr.join(':')
+ // }),
+ // // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
// })
// )
@@ -200,7 +226,7 @@
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 117.951478782, 28.447896798, 5000
+ 117.951478782, 28.447896798, 20000
),
orientation: {
// 指向
@@ -214,17 +240,21 @@
let sqTitleLayer = new global.DC.TilesetLayer('sqTitleLayer')
global.viewer.addLayer(sqTitleLayer)
let sqTileset = new global.DC.Tileset(
- 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
+ // 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
+ 'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
)
- sqTileset.setHeight(12)
+
+ sqTileset.setHeight(-72)
sqTitleLayer.addOverlay(sqTileset)
- // sqTileset.on(global.DC.MouseEventType.CLICK, (e) => {
- // console.log(e)
- // })
+ sqTileset.on(global.DC.MouseEventType.CLICK, (e) => {
+ console.log(e, 989999)
+ })
+ // let positions = [[117.9514788, 28.4478968, 0], [117.9514698, 28.4478947, 0], [117.9513974, 28.4476981, 0], [117.9515047, 28.4476748, 0], [117.9515289, 28.4476939, 0], [117.9515508, 28.447755, 0], [117.9516278, 28.4477353, 0], [117.9516623, 28.4478497, 0], [117.9514788, 28.4478968, 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 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
@@ -238,25 +268,29 @@
// 原生Cesium加载多边体
let floorEntitysLayers = new global.DC.Namespace.Cesium.CustomDataSource("floorEntitysLayers")
global.viewer.dataSources.add(floorEntitysLayers)
- let flootEntitysEntites = floorEntitysLayers.entities
+ flootEntitysEntites = floorEntitysLayers.entities
- let floorPositions = positions.reduce((prev, curr, index, arr) => {
- curr.forEach(item => {
- prev.push(item)
- })
- return prev
- }, [])
+ // 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),
- }
- })
+ // 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)
@@ -291,6 +325,11 @@
// 比例尺
// 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)
@@ -379,6 +418,28 @@
that.flytoLayer(params.polygonName, params.duration)
})
+ this.$EventBus.$on('showHouse3D', (params) => {
+ that.showHouse3D(params.positions, params.minHeight, params.maxHeight)
+ })
+
+ this.$EventBus.$on('clearHouse3D', () => {
+ that.clearHouse3D()
+ })
+
+ // 重写定位方法
+ const homeCenter = [117.99311892441567, 28.46938164123123]
+ this.$nextTick(() => {
+ document.querySelector('.dc-zoom-controller').children[1].onclick =
+ function () {
+ that.$EventBus.$emit('toPosition', {
+ siteJd: homeCenter[0] + 0.046,
+ siteWd: homeCenter[1] - 0.36,
+ siteGd: 36000,
+ siteHeading: -3,
+ sitePitch: -45
+ })
+ }
+ })
},
methods: {
@@ -388,6 +449,7 @@
this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } })
}
},
+
switchImg () {
// 天地图 影像
this.imgtype = 0
@@ -403,6 +465,7 @@
)
this.showImgBtn = false
},
+
switchElec () {
// 天地图 矢量
this.imgtype = 1
@@ -418,6 +481,7 @@
)
this.showImgBtn = false
},
+
/**
* @description: 全屏控制
* @return {*} 无返回值
@@ -450,6 +514,7 @@
this.isFullscreen = true
}
},
+
/**
* 在图层中添加实体(点)
* @param {*} item 图标
@@ -547,7 +612,7 @@
outlineColor: global.DC.Color.WHITE, // 边框颜色
outlineWidth: 4, // 边框大小，
font: '16px sans-serif',
- pixelOffset: { x: 0, y: -24 },
+ pixelOffset: { x: 0, y: -30 },
distanceDisplayCondition: distanceDisplayCondition
})
pointElement.attrParams = params
@@ -556,7 +621,6 @@
} else if (type == 'HeatPoint') {
layersObjcect[layerName].setPositions(params.positions)
}
-
},
@@ -697,6 +761,39 @@
tilesetObject[titlesetName] = null
}
},
+
+ /**
+ * 建筑高亮显示
+ * @param {*} positions 建筑范围坐标
+ * @param {*}
+ */
+ showHouse3D (positions, minHeight, maxHeight) {
+ flootEntitysEntites.removeAll()
+ let housePositions = JSON.parse(positions).coordinates[0]
+
+ let floorPositions = housePositions.reduce((prev, curr) => {
+ curr.forEach(item => {
+ prev.push(item)
+ })
+ return prev
+ }, [])
+
+ flootEntitysEntites.add({
+ polygon: {
+ hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
+ heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
+ extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
+ height: minHeight,
+ extrudedHeight: maxHeight,
+ material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
+ }
+ })
+ },
+
+ // 清除建筑3D
+ clearHouse3D () {
+ flootEntitysEntites.removeAll()
+ },
},
}
--
Gitblit v1.9.3