forked from srs-police-affairs
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-03-17 08:55:29 * @LastEditTime: 2023-03-18 09:19:55 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -12,6 +12,11 @@ <div class="viewer-box" id="viewer-container"> <slot ref="mainContent" name="mainContent"></slot> <slot name="showButton"></slot> <div class="over-look-btn"> <el-tooltip content="一键俯视" placement="bottom" effect="dark"> <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i> </el-tooltip> </div> <!-- 全屏控制按钮 --> <div class="screen-full-btn"> <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark"> @@ -23,9 +28,12 @@ </div> <!-- 切换矢量图按钮 --> <div class="image-switch-icon-btn"> <div class="icon-box" @click.stop="showImgBtn = !showImgBtn"> <img src="/img/base_map.png" alt /> </div> <el-tooltip content="图层、模型、视角" placement="bottom" effect="dark"> <div class="icon-box" @click.stop="showImgBtn = !showImgBtn"> <img src="/img/base_map.png" alt /> </div> </el-tooltip> <div class="image-switch-img-btn" v-show="showImgBtn"> <div class="layer-change-box"> @@ -33,6 +41,7 @@ 底图 <div class="close" @click.stop="showImgBtn = false" title="关闭"></div> </div> <div class="content"> <div class="img" @click="switchImg"> <span :class="{ on: imgtype == 0 }">影像</span> @@ -304,21 +313,15 @@ that.switchImg() // 外网 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.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.camera.setView({ @@ -524,10 +527,30 @@ sitePitch: -45 }) } document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置' }) }, methods: { overLookClick () { global.viewer.camera.setView({ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 // fromDegrees()方法，将经纬度和高程转换为世界坐标 destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( 118.04, 28.46938164123123, 60000 ), orientation: { // 指向 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), // 视角 pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), roll: 0.0 } }) }, angleChange (e) { if (e) { global.viewer.camera.flyTo({ @@ -557,7 +580,7 @@ this.removeMxTileset(`sdTilesetLayer${item}`, this.housingIndent) }) this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent) // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent) if (this.tilesetLayerType == type) { this.tilesetLayerType = '' @@ -601,9 +624,10 @@ baseLayers = global.viewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{y}.png`, url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{reverseY}.png`, minimumLevel: 0, maximumLevel: 25 maximumLevel: 25, tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), }) ) @@ -778,8 +802,13 @@ let pointElement let labelElement let alt = params.alt || 2 if (type == "billboard") { pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url) // pointElement.setStyle({ // disableDepthTestDistance: 0 // }) pointElement.size = [32, 32] pointElement.attrParams = params layersObjcect[layerName].addOverlay(pointElement) @@ -787,7 +816,7 @@ pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident) pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident) } else if (type == "label") { labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement.setStyle({ fillColor: global.DC.Color.CRIMSON, style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE, @@ -803,13 +832,13 @@ 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 = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(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 = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement.setStyle({ fillColor: global.DC.Color.CRIMSON, style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
