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 | 291 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 225 insertions(+), 66 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 44e4bb1..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-09 14:52:36
+ * @LastEditTime: 2023-02-28 14:16:16
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -15,51 +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
- 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
@@ -102,6 +155,7 @@
'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',
@@ -128,6 +182,7 @@
carTotal: 0,
showImgBtn: false,
imgtype: 0,
+ tilesetLayerType: ''
}
},
@@ -153,6 +208,8 @@
}
}
})
+
+ global.viewer.setPitchRange(-90, -45)
// global.viewer.scene.globe.depthTestAgainstTerrain = false
@@ -218,15 +275,21 @@
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',
- // 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=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: '/sryx/{z}/{x}/{y}.png',
+ })
+ )
// 设置地图初始位置，角度等
global.viewer.camera.setView({
@@ -242,23 +305,6 @@
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
roll: 0.0
}
- })
-
- 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, e.wgs84Position.alt, 989999)
- that.$EventBus.$emit('stdgetAoiByPt', { lng: e.wgs84Position.lng, lat: e.wgs84Position.lat, height: e.wgs84Position.alt })
})
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]]
@@ -379,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)
})
@@ -398,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) => {
@@ -447,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") {
@@ -460,7 +554,7 @@
baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
baseLayers = global.viewer.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
+ url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/geoserver/gwc/service/wmts`,
layer: "test",
style: "",
format: "image/png",
@@ -481,7 +575,7 @@
baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
baseLayers = global.viewer.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
+ 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",
@@ -556,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') {
@@ -578,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])
}
}
},
@@ -611,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)
@@ -619,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)
}
@@ -691,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)
+
},
/**
@@ -754,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