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: 2022-12-30 13:59:43 * @LastEditTime: 2023-02-08 16:49:29 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -22,7 +22,8 @@ </el-tooltip> </div> <!-- 切换矢量图按钮 --> <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false"> <div style="display: none !important;" class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false"> <div class="icon-box"> <img src="/img/base_map.png" alt /> </div> @@ -62,6 +63,8 @@ let tilesetObject = { sdTilesetLayer: null } let flootEntitysEntites = null import mapPopup from './components/mapPopup.vue' @@ -138,23 +141,23 @@ global.viewer.addLayer(tilesetLayer) // 加载围栏 let layer = new global.DC.VectorLayer('layer') global.viewer.addLayer(layer) // let layer = new global.DC.VectorLayer('layer') // global.viewer.addLayer(layer) let wall = new global.DC.Wall( '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0' ) // let wall = new global.DC.Wall( // '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0' // ) wall.setStyle({ material: new global.DC.WallTrailMaterialProperty({ color: global.DC.Namespace.Cesium.Color.fromBytes( 33, 150, 243, 200 ), speed: 8 }) }) layer.addOverlay(wall) // wall.setStyle({ // material: new global.DC.WallTrailMaterialProperty({ // color: global.DC.Namespace.Cesium.Color.fromBytes( // 33, 150, 243, // 200 // ), // speed: 8 // }) // }) // layer.addOverlay(wall) @@ -171,27 +174,50 @@ // 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 }) ) // 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( 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:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326", // layer: "wmts_4326_361100", // style: "default", // url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts", // layer: "test", // style: "", // format: "image/png", // tileMatrixSetID: "c", // tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1), // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), // 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(), // }) // ) @@ -200,7 +226,7 @@ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 // fromDegrees()方法，将经纬度和高程转换为世界坐标 destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( 117.951478782, 28.447896798, 5000 117.951478782, 28.447896798, 20000 ), orientation: { // 指向 @@ -214,17 +240,21 @@ 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://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(12) sqTileset.setHeight(-72) sqTitleLayer.addOverlay(sqTileset) // sqTileset.on(global.DC.MouseEventType.CLICK, (e) => { // console.log(e) // }) 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 return item @@ -238,25 +268,29 @@ // 原生Cesium加载多边体 let floorEntitysLayers = new global.DC.Namespace.Cesium.CustomDataSource("floorEntitysLayers") global.viewer.dataSources.add(floorEntitysLayers) let flootEntitysEntites = floorEntitysLayers.entities flootEntitysEntites = floorEntitysLayers.entities let floorPositions = positions.reduce((prev, curr, index, arr) => { curr.forEach(item => { prev.push(item) }) return prev }, []) // let floorPositions = positions.reduce((prev, curr, index, arr) => { // curr.forEach(item => { // prev.push(item) // }) // return prev // }, []) flootEntitysEntites.add({ polygon: { hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions), heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, height: 70, extrudedHeight: 80, material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5), } }) // flootEntitysEntites.add({ // polygon: { // hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions), // heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, // extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, // height: 70, // extrudedHeight: 80, // material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5), // } // }) // console.log(floorPositions) @@ -291,6 +325,11 @@ // 比例尺 // global.viewer.distanceLegend.enable = true // let arr1 = [[117.9552436, 28.44500025], [117.9557116, 28.44429919], [117.9574856, 28.44444285]] // arr1.forEach(item => { // console.log(global.DC.CoordTransform.GCJ02ToWGS84(item[0], item[1]), 2222) // }) } global.DC.ready(initViewer) @@ -379,6 +418,28 @@ that.flytoLayer(params.polygonName, params.duration) }) this.$EventBus.$on('showHouse3D', (params) => { that.showHouse3D(params.positions, params.minHeight, params.maxHeight) }) this.$EventBus.$on('clearHouse3D', () => { that.clearHouse3D() }) // 重写定位方法 const homeCenter = [117.99311892441567, 28.46938164123123] this.$nextTick(() => { document.querySelector('.dc-zoom-controller').children[1].onclick = function () { that.$EventBus.$emit('toPosition', { siteJd: homeCenter[0] + 0.046, siteWd: homeCenter[1] - 0.36, siteGd: 36000, siteHeading: -3, sitePitch: -45 }) } }) }, methods: { @@ -388,6 +449,7 @@ this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } }) } }, switchImg () { // 天地图 影像 this.imgtype = 0 @@ -403,6 +465,7 @@ ) this.showImgBtn = false }, switchElec () { // 天地图 矢量 this.imgtype = 1 @@ -418,6 +481,7 @@ ) this.showImgBtn = false }, /** * @description: 全屏控制 * @return {*} 无返回值 @@ -450,6 +514,7 @@ this.isFullscreen = true } }, /** * 在图层中添加实体(点) * @param {*} item 图标 @@ -547,7 +612,7 @@ outlineColor: global.DC.Color.WHITE, // 边框颜色 outlineWidth: 4, // 边框大小， font: '16px sans-serif', pixelOffset: { x: 0, y: -24 }, pixelOffset: { x: 0, y: -30 }, distanceDisplayCondition: distanceDisplayCondition }) pointElement.attrParams = params @@ -556,7 +621,6 @@ } else if (type == 'HeatPoint') { layersObjcect[layerName].setPositions(params.positions) } }, @@ -697,6 +761,39 @@ tilesetObject[titlesetName] = null } }, /** * 建筑高亮显示 * @param {*} positions 建筑范围坐标 * @param {*} */ showHouse3D (positions, minHeight, maxHeight) { flootEntitysEntites.removeAll() let housePositions = JSON.parse(positions).coordinates[0] let floorPositions = housePositions.reduce((prev, curr) => { curr.forEach(item => { prev.push(item) }) return prev }, []) flootEntitysEntites.add({ polygon: { hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions), heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, height: minHeight, extrudedHeight: maxHeight, material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5), } }) }, // 清除建筑3D clearHouse3D () { flootEntitysEntites.removeAll() }, }, }
