| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 17:00:30 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-02-23 17:31:31 |
| | | * @LastEditTime: 2023-02-28 14:16:16 |
| | | * @FilePath: \srs-police-affairs\src\components\map\index.vue |
| | | * @Description: 公用地图组件 |
| | | * |
| | |
| | | </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> |
| | |
| | | </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 |
| | | |
| | |
| | | carTotal: 0, |
| | | showImgBtn: false, |
| | | imgtype: 0, |
| | | tilesetLayerType: '' |
| | | } |
| | | }, |
| | | |
| | |
| | | }) |
| | | |
| | | this.$EventBus.$on('mapRemovePolygonLayer', (params) => { |
| | | that.mapRemovePolygonLayer(params.layerName, params.polygonName,params.type) |
| | | that.mapRemovePolygonLayer(params.layerName, params.polygonName, params.type) |
| | | }) |
| | | |
| | | this.$EventBus.$on('mapClearLayer', (params) => { |
| | |
| | | }, |
| | | |
| | | 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") { |
| | |
| | | * @param {*} polygonName 面名称 |
| | | * @param {*} type 图层类型 |
| | | */ |
| | | mapRemovePolygonLayer (layerName,polygonName, type) { |
| | | mapRemovePolygonLayer (layerName, polygonName, type) { |
| | | if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') { |
| | | if (layersObjcect[layerName] && layersObjcect[layerName] != null&&polygonObj[polygonName]&&polygonObj[polygonName]!=null) { |
| | | if (layersObjcect[layerName] && layersObjcect[layerName] != null && polygonObj[polygonName] && polygonObj[polygonName] != null) { |
| | | layersObjcect[layerName].removeOverlay(polygonObj[polygonName]) |
| | | } |
| | | } |