| | |
| | | * @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-09 14:52:36 |
| | | * @FilePath: \srs-police-affairs\src\components\map\index.vue |
| | | * @Description: 公用地图组件 |
| | | * |
| | |
| | | <!-- 全屏控制按钮 --> |
| | | <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="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false"> |
| | | <div class="icon-box"> |
| | | <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="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> |
| | |
| | | } |
| | | |
| | | 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:20', |
| | | 'EPSG:4490_test:21', |
| | | 'EPSG:4490_test:22', |
| | | ] |
| | | |
| | | import mapPopup from './components/mapPopup.vue' |
| | | |
| | |
| | | // }) |
| | | // 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', |
| | |
| | | // format: 'image/jpeg', |
| | | // show: true, |
| | | // maximumLevel: 18 |
| | | // }) |
| | | // ) |
| | | |
| | | |
| | | // 上饶部署,内网使用的 |
| | | // 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: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(), |
| | | // }) |
| | | // ) |
| | | |
| | |
| | | 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' |
| | | // 内网 |
| | | '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) |
| | |
| | | // material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5), |
| | | // } |
| | | // }) |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | // console.log(floorPositions) |
| | |
| | | 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: "http://10.141.11.11:80/ysapi/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: "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(), |
| | | }) |
| | | ) |
| | | |
| | | baseLayers.contrast = 1.0 |
| | | |
| | | this.showImgBtn = false |
| | | }, |
| | | |