| | |
| | | |
| | | <script> |
| | | |
| | | import { getAEDkList, getParkList, getComeList, getSceneList, getTagList } from '@/api/pc/leftNav/index' |
| | | |
| | | export default { |
| | | name: 'leftNav', |
| | | computed: {}, |
| | |
| | | generatePosition (num) { |
| | | const list = [] |
| | | for (let i = 0; i < num; i++) { |
| | | const lng = 115.87186406 + Math.random() * 0.5 |
| | | const lat = 28.74449337 + Math.random() * 0.5 |
| | | const lng = 115.86271917 + Math.random() * 0.01 |
| | | const lat = 28.73615593 + Math.random() * 0.02 |
| | | list.push(new this.DC.Position(lng, lat, 0)) |
| | | } |
| | | return list |
| | |
| | | } |
| | | }, |
| | | initialize (viewer) { |
| | | var that = this |
| | | viewer.scene.globe.depthTestAgainstTerrain = false |
| | | this.viewer = viewer |
| | | this.tagLayer = new this.DC.HtmlLayer('tagLayer') |
| | |
| | | this.comeLayer = new this.DC.VectorLayer('comeLayer') |
| | | viewer.addLayer(this.comeLayer) |
| | | |
| | | const positions1 = this.generatePosition(50) |
| | | positions1.forEach((item, index) => { |
| | | const divIcon = new this.DC.DivIcon( |
| | | item, |
| | | ` |
| | | getTagList().then(res => { |
| | | res.data.data.forEach(item => { |
| | | const divIcon = new this.DC.DivIcon( |
| | | new that.DC.Position(Number(item.jd), Number(item.wd), 0), |
| | | ` |
| | | <div class="tag-entitys-box"> |
| | | <div class="tag-content"> |
| | | 南门口 |
| | | ${item.mechanismname} |
| | | </div> |
| | | <div class="tag-angle-content"> |
| | | <img src="https://map.hit.edu.cn/images/tarrow_xq.png"> |
| | | </div> |
| | | </div> |
| | | ` |
| | | ) |
| | | this.tagLayer.addOverlay(divIcon) |
| | | ) |
| | | this.tagLayer.addOverlay(divIcon) |
| | | }) |
| | | this.tagLayer.show = false |
| | | }) |
| | | |
| | | const positions2 = this.generatePosition(50) |
| | | const positions2 = this.generatePosition(5) |
| | | positions2.forEach((item, index) => { |
| | | const divIcon = new this.DC.DivIcon( |
| | | item, |
| | |
| | | this.wayLayer.addOverlay(divIcon) |
| | | }) |
| | | |
| | | const positions3 = this.generatePosition(50) |
| | | positions3.forEach(item => { |
| | | const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png') |
| | | billboard.size = [16, 16] |
| | | this.sceneLayer.addOverlay(billboard) |
| | | }) |
| | | |
| | | const positions4 = this.generatePosition(10) |
| | | positions4.forEach((item, index) => { |
| | | const label = new this.DC.Label(item, '建筑AED') |
| | | label.setStyle({ |
| | | fillColor: this.DC.Color.ORANGERED, |
| | | font: '10px sans-serif', |
| | | pixelOffset: { x: 0, y: -16 } |
| | | getSceneList().then(res => { |
| | | res.data.data.forEach(item => { |
| | | const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-panorama.png') |
| | | billboard.size = [20, 20] |
| | | this.sceneLayer.addOverlay(billboard) |
| | | }) |
| | | this.aedLayer.addOverlay(label) |
| | | |
| | | const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png') |
| | | billboard.size = [16, 16] |
| | | |
| | | this.aedLayer.addOverlay(billboard) |
| | | this.sceneLayer.show = false |
| | | }) |
| | | |
| | | const positions5 = this.generatePosition(120) |
| | | positions5.forEach((item, index) => { |
| | | const divIcon = new this.DC.DivIcon( |
| | | item, |
| | | ` |
| | | getAEDkList().then(res => { |
| | | res.data.data.forEach(item => { |
| | | const label = new this.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname) |
| | | label.setStyle({ |
| | | fillColor: this.DC.Color.CRIMSON, |
| | | style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | outlineColor: that.DC.Color.WHITE, // 边框颜色 |
| | | outlineWidth: 8, // 边框大小, |
| | | font: '14px sans-serif', |
| | | pixelOffset: { x: 0, y: -24 } |
| | | }) |
| | | this.aedLayer.addOverlay(label) |
| | | |
| | | const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-aed.png') |
| | | billboard.size = [20, 20] |
| | | |
| | | this.aedLayer.addOverlay(billboard) |
| | | }) |
| | | this.aedLayer.show = false |
| | | }) |
| | | |
| | | getParkList().then(res => { |
| | | res.data.data.forEach(item => { |
| | | const divIcon = new this.DC.DivIcon( |
| | | new that.DC.Position(Number(item.jd), Number(item.wd), 0), |
| | | ` |
| | | <div class="park-entitys-box"> |
| | | <div class="park-title" alt="校外街路侧停车场"> |
| | | <div class="park-title" alt="${item.mechanismname}"> |
| | | </div> |
| | | <div class="park-sign-box"> |
| | | <div> |
| | | <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场"> |
| | | <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}"> |
| | | </div> |
| | | <div> |
| | | <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21"> |
| | |
| | | </div> |
| | | </div> |
| | | ` |
| | | ) |
| | | this.parkLayer.addOverlay(divIcon) |
| | | ) |
| | | this.parkLayer.addOverlay(divIcon) |
| | | }) |
| | | this.parkLayer.show = false |
| | | }) |
| | | |
| | | const positions6 = this.generatePosition(10) |
| | | positions6.forEach((item, index) => { |
| | | const label = new this.DC.Label(item, '数字视觉') |
| | | label.setStyle({ |
| | | fillColor: this.DC.Color.PURPLE, |
| | | outlineColor: this.DC.Color.WHITE, // 边框颜色 |
| | | outlineWidth: 2, // 边框大小, |
| | | font: '10px sans-serif', |
| | | pixelOffset: { x: 0, y: -16 } |
| | | getComeList().then(res => { |
| | | res.data.data.forEach(item => { |
| | | const label = new that.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname) |
| | | label.setStyle({ |
| | | fillColor: that.DC.Color.FUCHSIA, |
| | | style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | outlineColor: that.DC.Color.WHITE, // 边框颜色 |
| | | outlineWidth: 8, // 边框大小, |
| | | font: '14px sans-serif', |
| | | pixelOffset: { x: 0, y: -24 } |
| | | }) |
| | | that.comeLayer.addOverlay(label) |
| | | |
| | | const billboard = new that.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-activity.png') |
| | | billboard.size = [20, 20] |
| | | |
| | | that.comeLayer.addOverlay(billboard) |
| | | }) |
| | | this.comeLayer.addOverlay(label) |
| | | |
| | | const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png') |
| | | billboard.size = [16, 16] |
| | | |
| | | this.comeLayer.addOverlay(billboard) |
| | | this.comeLayer.show = false |
| | | }) |
| | | |
| | | this.tagLayer.show = false |
| | | this.wayLayer.show = false |
| | | this.sceneLayer.show = false |
| | | this.aedLayer.show = false |
| | | this.parkLayer.show = false |
| | | this.comeLayer.show = false |
| | | } |
| | | } |
| | | } |