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 | 357 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 265 insertions(+), 92 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index a5c89a5..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-08 16:49:29
+ * @LastEditTime: 2023-02-28 14:16:16
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -22,28 +22,97 @@
</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
@@ -66,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 {
@@ -87,6 +182,7 @@
carTotal: 0,
showImgBtn: false,
imgtype: 0,
+ tilesetLayerType: ''
}
},
@@ -112,6 +208,8 @@
}
}
})
+
+ global.viewer.setPitchRange(-90, -45)
// global.viewer.scene.globe.depthTestAgainstTerrain = false
@@ -173,53 +271,25 @@
// })
// 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
- // })
- // )
+ // 内网
+ that.switchImg()
-
- // 上饶部署，内网使用的
+ // 外网
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(),
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ format: 'image/jpeg',
+ show: true,
+ maximumLevel: 18
})
)
global.viewer.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts/{z}/{y}/{x}.png',
+ url: '/sryx/{z}/{x}/{y}.png',
})
)
-
- // 影像图层
- // const ysWmts = global.viewer.imageryLayers.addImageryProvider(
- // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- // url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
- // layer: "test",
- // style: "",
- // format: "image/png",
- // 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(),
- // })
- // )
// 设置地图初始位置，角度等
global.viewer.camera.setView({
@@ -237,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
@@ -287,9 +340,6 @@
// material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
// }
// })
-
-
-
// console.log(floorPositions)
@@ -375,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)
})
@@ -394,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) => {
@@ -443,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") {
@@ -453,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
},
@@ -542,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') {
@@ -564,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])
}
}
},
@@ -597,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)
@@ -605,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)
}
@@ -677,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)
+
},
/**
@@ -740,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