From a1c2fecb75c9c8fef3345dee6d071faae6d3dccd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 28 Feb 2023 14:19:37 +0800
Subject: [PATCH] 模型加载的更改
---
src/components/map/index.vue | 360 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 272 insertions(+), 88 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index f32d21a..9ed09b0 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: 2023-02-04 16:19:58
+ * @LastEditTime: 2023-02-28 14:16:16
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -15,52 +15,104 @@
<!-- 全屏控制按钮 -->
<div class="screen-full-btn">
<el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
- <i
- class="fa fa-compress"
- style="vertical-align: middle; cursor: pointer"
- @click="fullscreenchange"
- ></i>
+ <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
</el-tooltip>
<el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
- <i
- class="fa fa-expand"
- style="vertical-align: middle; cursor: pointer"
- @click="fullscreenchange"
- ></i>
+ <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
</el-tooltip>
</div>
<!-- 切换矢量图按钮 -->
- <div
- style="display: none !important;"
- class="image-switch-icon-btn"
- title="切换影像"
- @mouseover="showImgBtn = true"
- @mouseleave="showImgBtn = false"
- >
- <div class="icon-box">
+ <div class="image-switch-icon-btn">
+ <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
<img src="/img/base_map.png" alt />
</div>
- <div
- class="image-switch-img-btn"
- v-show="showImgBtn"
- @mouseover="showImgBtn = true"
- @mouseleave="showImgBtn = false"
- >
- <div class="img" @click="switchImg">
- <span :class="{ on: imgtype == 0 }">影像</span>
+ <div class="image-switch-img-btn" v-show="showImgBtn">
+ <div class="layer-change-box">
+ <div class="title">
+ 底图
+ <div class="close" @click.stop="showImgBtn = false" title="关闭"></div>
+ </div>
+ <div class="content">
+ <div class="img" @click="switchImg">
+ <span :class="{ on: imgtype == 0 }">影像</span>
+ </div>
+ <div class="elec" @click="switchElec">
+ <span :class="{ on: imgtype == 1 }">矢量</span>
+ </div>
+ </div>
</div>
- <div class="elec" @click="switchElec">
- <span :class="{ on: imgtype == 1 }">矢量</span>
+ <div class="layer-change-box">
+ <div class="title">
+ 模型
+ </div>
+ <div class="content">
+ <div class="img light" @click="highOrLightChange('light')">
+ <span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
+ </div>
+ <div class="elec high" @click="highOrLightChange('high')">
+ <span :class="{ on: tilesetLayerType == 'high' }">高精</span>
+ </div>
+ </div>
</div>
</div>
</div>
<map-popup></map-popup>
+
+ <assemble-box></assemble-box>
</div>
</template>
<script>
+
+
+let tile3DUrl = ''
+
+if (process.env.NODE_ENV == 'development') {
+ // 开发
+ tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL
+} else {
+ // 部署
+ tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
+}
+
+let label = [
+ '01',
+ '02',
+ '03',
+ '04',
+ '05',
+ '06',
+ '07',
+ '08',
+ '09',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19',
+ '20',
+ '21',
+ '22',
+ '23',
+ '24',
+ '25',
+ '26',
+ '27',
+ '28',
+ '29',
+ '30',
+ '31',
+ '32',
+ '33',
+ '34'
+]
var siteEntitylayers = null
@@ -83,6 +135,32 @@
let flootEntitysEntites = null
+const ysLabels = [
+ 'EPSG:4490_test:0',
+ 'EPSG:4490_test:1',
+ 'EPSG:4490_test:2',
+ 'EPSG:4490_test:3',
+ 'EPSG:4490_test:4',
+ 'EPSG:4490_test:5',
+ 'EPSG:4490_test:6',
+ 'EPSG:4490_test:7',
+ 'EPSG:4490_test:8',
+ 'EPSG:4490_test:9',
+ 'EPSG:4490_test:10',
+ 'EPSG:4490_test:11',
+ 'EPSG:4490_test:12',
+ 'EPSG:4490_test:13',
+ 'EPSG:4490_test:14',
+ 'EPSG:4490_test:15',
+ 'EPSG:4490_test:16',
+ 'EPSG:4490_test:17',
+ 'EPSG:4490_test:18',
+ 'EPSG:4490_test:19',
+ 'EPSG:4490_test:20',
+ 'EPSG:4490_test:21',
+ 'EPSG:4490_test:22',
+]
+
import mapPopup from './components/mapPopup.vue'
export default {
@@ -104,6 +182,7 @@
carTotal: 0,
showImgBtn: false,
imgtype: 0,
+ tilesetLayerType: ''
}
},
@@ -129,6 +208,8 @@
}
}
})
+
+ global.viewer.setPitchRange(-90, -45)
// global.viewer.scene.globe.depthTestAgainstTerrain = false
@@ -190,10 +271,13 @@
// })
// global.viewer.addTerrain(terrain)
- // 天地图 影像
+ // 内网
+ that.switchImg()
+
+ // 外网
global.viewer.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
format: 'image/jpeg',
show: true,
@@ -201,19 +285,11 @@
})
)
-
- // 上饶部署，内网使用的
- // 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: '/sryx/{z}/{x}/{y}.png',
+ })
+ )
// 设置地图初始位置，角度等
global.viewer.camera.setView({
@@ -231,23 +307,6 @@
}
})
- 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://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
- )
-
- sqTileset.setHeight(-72)
- sqTitleLayer.addOverlay(sqTileset)
-
- 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
@@ -283,9 +342,6 @@
// })
-
-
-
// console.log(floorPositions)
// let floorPositions = MIN_F_H.concat(MAN_F_H)
@@ -319,6 +375,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)
@@ -364,6 +425,10 @@
that.mapRemoveLayer(params.layerName, params.type)
})
+ this.$EventBus.$on('mapRemovePolygonLayer', (params) => {
+ that.mapRemovePolygonLayer(params.layerName, params.polygonName, params.type)
+ })
+
this.$EventBus.$on('mapClearLayer', (params) => {
that.mapClearLayer(params.layerName, params.type)
})
@@ -383,6 +448,10 @@
this.$EventBus.$on('layerPolylineAdd', (params) => {
that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width, params.params, params.incident)
+ })
+
+ this.$EventBus.$on('getOverLayerID', (params) => {
+ that.getOverLayerID(params.layerName, params.ids, params.cb)
})
this.$EventBus.$on('layerShow', (params) => {
@@ -432,6 +501,46 @@
},
methods: {
+ /**
+ * @description: 高精度模型和轻量模型切换
+ * @param {*} type
+ * @return {*}
+ */
+ highOrLightChange (type) {
+ this.removeMxTileset('sdTilesetLayer', this.housingIndent)
+
+ // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent)
+
+
+ if (this.tilesetLayerType == type) {
+ this.tilesetLayerType = ''
+
+ } else {
+ this.tilesetLayerType = type
+
+ type == 'light' ?
+ label.forEach(item => {
+ this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`, this.housingIndent)
+ }) :
+ label.forEach(item => {
+ this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`, this.housingIndent)
+ })
+ }
+
+ this.showImgBtn = false
+ },
+
+ /**
+ * @description: 社区感知下，模型的点击事件
+ * @param {*} e
+ * @return {*}
+ */
+ housingIndent (e) {
+ if (this.$route.path == '/layout/house') {
+ this.$EventBus.$emit('housingIndent', e)
+ }
+ },
+
// 模型的点击事件
tilesetClick (e) {
if (this.$route.path != "/layout/house") {
@@ -442,32 +551,42 @@
switchImg () {
// 天地图 影像
this.imgtype = 0
- global.viewer.imageryLayers.remove(baseLayers)
+ baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
baseLayers = 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
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/geoserver/gwc/service/wmts`,
+ layer: "test",
+ style: "",
+ format: "image/png",
+ tileMatrixSetID: "EPSG:4490_test",
+ tileMatrixLabels: ysLabels,
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
})
)
+
+ baseLayers.contrast = 0.8
+
this.showImgBtn = false
},
switchElec () {
// 天地图 矢量
this.imgtype = 1
- global.viewer.imageryLayers.remove(baseLayers)
+ baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
baseLayers = global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- format: 'image/jpeg',
- show: true,
- maximumLevel: 18
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_SL}/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326`,
+ layer: "wmts_4326_361100",
+ style: "default",
+ format: "image/png",
+ tileMatrixSetID: "c",
+ tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
})
)
+
+ baseLayers.contrast = 1.0
+
this.showImgBtn = false
},
@@ -531,7 +650,9 @@
} else if (type == 'ClusterLayer') {
if (!layersObjcect[layerName]) layersObjcect[layerName] = null
- layersObjcect[layerName] = new global.DC.ClusterLayer(layerName)
+ layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
+ pixelRange: 4
+ })
layersObjcect[layerName].addTo(global.viewer)
} else if (type == 'HeatLayer') {
@@ -553,6 +674,20 @@
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])
}
}
},
@@ -586,6 +721,7 @@
}
let pointElement
+ let labelElement
if (type == "billboard") {
pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
@@ -594,19 +730,38 @@
layersObjcect[layerName].addOverlay(pointElement)
pointElement.on(global.DC.MouseEventType.CLICK, incident)
} else if (type == "label") {
- pointElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
- pointElement.setStyle({
+ labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
+ labelElement.setStyle({
+ fillColor: global.DC.Color.CRIMSON,
+ style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
+ outlineColor: global.DC.Color.WHITE, // 边框颜色
+ outlineWidth: params.outW || 4, // 边框大小，
+ font: '16px sans-serif',
+ pixelOffset: { x: 0, y: -30 },
+ distanceDisplayCondition: distanceDisplayCondition
+ })
+ labelElement.attrParams = params
+ layersObjcect[layerName].addOverlay(labelElement)
+ labelElement.on(global.DC.MouseEventType.CLICK, incident)
+ } else if (type == "billboardOrLabel") {
+ pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
+ pointElement.size = [32, 32]
+ pointElement.attrParams = params
+ layersObjcect[layerName].addOverlay(pointElement)
+ pointElement.on(global.DC.MouseEventType.CLICK, incident)
+
+ labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
+ labelElement.setStyle({
fillColor: global.DC.Color.CRIMSON,
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineColor: global.DC.Color.WHITE, // 边框颜色
outlineWidth: 4, // 边框大小，
font: '16px sans-serif',
- pixelOffset: { x: 0, y: -30 },
- distanceDisplayCondition: distanceDisplayCondition
+ pixelOffset: { x: 0, y: -30 }
})
- pointElement.attrParams = params
- layersObjcect[layerName].addOverlay(pointElement)
- pointElement.on(global.DC.MouseEventType.CLICK, incident)
+ labelElement.attrParams = params
+ layersObjcect[layerName].addOverlay(labelElement)
+ labelElement.on(global.DC.MouseEventType.CLICK, incident)
} else if (type == 'HeatPoint') {
layersObjcect[layerName].setPositions(params.positions)
}
@@ -666,6 +821,36 @@
polyline.on(global.DC.MouseEventType.CLICK, incident)
layersObjcect[layerName].addOverlay(polyline)
+ },
+
+ /**
+ * @description: 通过ID获取图层
+ * @return {*}
+ */
+ getOverLayerID (layerName, ids = [], cb) {
+
+ const data = ids.reduce((pre, cur) => {
+
+ if (
+ layersObjcect[layerName].getOverlay(cur.overlayId)
+ && layersObjcect[layerName].getOverlay(cur.overlayId) != undefined
+ && layersObjcect[layerName].getOverlay(cur.overlayId) != null
+ && layersObjcect[layerName].getOverlay(cur.overlayId) != ''
+ ) {
+ pre.push(layersObjcect[layerName].getOverlay(cur.overlayId).attrParams)
+ } else {
+ layersObjcect[layerName].eachOverlay(item => {
+ if (item.overlayId == cur.overlayId)
+ pre.push(item.attrParams)
+ })
+ }
+
+ return pre
+
+ }, [])
+
+ cb(data)
+
},
/**
@@ -729,8 +914,7 @@
shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
})
- tilesetObject[titlesetName].setHeight(5)
-
+ tilesetObject[titlesetName].setHeight(-72)
tilesetLayer.addOverlay(tilesetObject[titlesetName])
--
Gitblit v1.9.3