school-web.git - Gitblit

			@@ -1,211 +1,168 @@
			/* eslint-disable camelcase */
			<template>
			<div id="viewer-container"
			style="height: 100%; width: 100%;">
			<div id="viewer-container" style="height: 100%; width: 100%" @click="mapClick($event)">
			<video
			id="video"
			style="position: fixed; visibility: hidden"
			muted
			autoplay
			loop
			crossorigin
			controls
			>
			<source src="http://dc.dvgis.cn/examples/data/demo.mp4" type="video/mp4" />
			</video>

			<div v-show='popupFlag'
			id="modelPopup"
			style="width: 366px;
			height: 240px;
			background: url(/img/bg/nav-bg.jpeg) no-repeat;
			background-size: 100% 100%;">
			<div class="header">
			<div class="logo">
			<img src="/img/navicon/map.png"
			alt="">
			</div>
			<div class="title">
			明德楼
			</div>
			<div class="close">
			<img src="/img/navicon/close.png"
			alt="">
			</div>
			</div>
			<div class="content">
			<div class="img">
			<div
			style="
			position: fixed;
			left: 4px;
			bottom: 4px;
			width: 80px;
			line-height: 24px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			border-radius: 4px;
			background: #2196f3ed;
			z-index: 11;
			"
			>智慧校区</div>

			</div>
			<div class="meau">

			</div>
			</div>
			</div>

			<div id="map_popup_content">
			</div>

			<div ref="mapContentContent"
			v-show="false"
			id="map_content_content">
			<div id="mapChildContent">
			<div class="arc-bcg">
			<img :src="popupBgUrl"
			alt="">
			</div>
			<div class="popup-nav">
			<ul>
			<li class="come-here-fun">
			<i class="popup-icon come-nav deblurring"></i>
			到这
			</li>
			<li class="get-to-fun">
			<i class="popup-icon start-nav deblurring"></i>
			出发
			</li>
			<li class="qr-code-fun">
			<i class="popup-icon qr-code-nav deblurring"></i>
			二维码
			</li>
			<li class="imgs-fun">
			<i class="popup-icon atlas-nav deblurring"></i>
			图集
			</li>
			<li>
			<i class="popup-icon live-action-nav deblurring"></i>
			实景
			</li>
			</ul>
			</div>
			<div class="arc-box">
			<ul class="tab-btn">
			<li class="on">教学科研行政</li>
			<li>生活服务</li>
			</ul>
			<div class="btm-content">
			<div class="on">
			<ul>
			<li>
			<i class="popup-icon location-icon deblurring"></i>
			教学楼
			</li>
			<li>
			<i class="popup-icon location-icon deblurring"></i>
			教学楼
			</li>
			</ul>
			</div>
			<div>
			<ul>
			<li>
			<i class="popup-icon location-icon deblurring"></i>
			生活楼
			</li>
			<li>
			<i class="popup-icon location-icon deblurring"></i>
			生活楼
			</li>
			</ul>
			</div>
			</div>
			</div>
			<div class="btm-box"></div>
			</div>
			</div>

			<!-- 二维码弹框相关 -->
			<el-dialog title="场景二维码"
			:visible.sync="QRCodeFlag"
			width='44%'
			:before-close="handleClose">
			<div style="margin: 0; position: relative; width: 100%; height: 352px;">
			<img width="260"
			:src="pupupQRUrl"
			alt=""
			style="position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto">
			<div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
			(右键另存为图片)
			</div>
			</div>
			</el-dialog>
			<dimension :areaLayer="areaLayer" />

			<left-nav ref="leftNav"></left-nav>

			<campusNav :comeName="comeName"
			:getToName="getToName"
			v-show="campusNavFlag" />
			<mapPopup />

			<el-image v-show="false"
			style="width: 100px; height: 100px"
			:src="url"
			:preview-src-list="srcList"
			ref="popupImgs">
			</el-image>
			<campusBuildingSearch ref="campusBuildingSearch" />

			<campusNav ref="campusNavRoute" v-show="campusNavFlag" />

			<search-details v-if="searchPopupFlag"></search-details>
			<org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
			<arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>

			<div
			id="eagleEyeMap"
			@mouseover="samllMapFlag = true"
			@mouseleave="samllMapFlag = false"
			class="eagle-eye-map"
			></div>
			</div>
			</template>
			<script>

			import { mapGetters } from 'vuex'

			var $ = window.$
			import mapPopup from './components/mapPopup.vue'
			import campusBuildingSearch from './components/campusBuildingSearch.vue'
			import dimension from './components/dimension.vue'

			export default {
			name: 'mapBox',
			components: {
			mapPopup,
			campusBuildingSearch,
			dimension
			},
			data () {
			return {
			popupFlag: false,
			campusNavFlag: false,
			comeName: '',
			getToName: '',
			QRCodeFlag: false,
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			srcList: [
			'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
			'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
			]
			areaLayer: null,
			samllMapFlag: false
			}
			},
			watch: {
			searchPopupFlag: {
			immediate: true,
			handler (newVal, oldVal) {
			if (newVal == true) {
			if (this.$route.path.indexOf('/pcLayout/default/service') != -1) {
			this.$store.dispatch('delVisitedViews', this.$route)
			this.$router.push('/pcLayout/default')
			}

			if (this.$route.path.indexOf('/orgnav') != -1) {
			this.$store.dispatch('delVisitedViews', this.$route)
			this.$router.push('/pcLayout/default')
			this.$store.commit('SET_ORGNAVBARTITLE', '')
			this.$store.commit('SET_ORGNAVBARLIST', [])
			this.$store.commit('SET_ORGNAVBARFLAG', false)
			}

			if (this.orgNavBarFlag == true) {
			this.$store.commit('SET_ORGNAVBARTITLE', '')
			this.$store.commit('SET_ORGNAVBARLIST', [])
			this.$store.commit('SET_ORGNAVBARFLAG', false)
			}

			if (this.$route.path.indexOf('/arc') != -1) {
			this.$store.dispatch('delVisitedViews', this.$route)
			this.$router.push('/pcLayout/default')
			this.$store.commit('SET_ARCNAVBARTITLE', '')
			this.$store.commit('SET_ARCNAVBARCODE', '')
			this.$store.commit('SET_ARCNAVBARFLAG', false)
			}

			if (this.arcNavBarFlag == true) {
			this.$store.commit('SET_ARCNAVBARTITLE', '')
			this.$store.commit('SET_ARCNAVBARCODE', '')
			this.$store.commit('SET_ARCNAVBARFLAG', false)
			}
			}
			}
			},

			orgNavBarFlag: {
			immediate: true,
			handler (newVal, oldVal) {
			if (newVal == true) {
			this.$store.commit('SET_SEARCHPOPUPFLAG', false)
			}
			}
			},

			arcNavBarFlag: {
			immediate: true,
			handler (newVal, oldVal) {
			if (newVal == true) {
			this.$store.commit('SET_SEARCHPOPUPFLAG', false)
			}
			}
			}
			},
			computed: {
			...mapGetters([
			'viewer',
			'popupBgUrl',
			'pupupQRUrl'
			'pupupQRUrl',
			// 终点
			'terminus',
			// 起点
			'startingPoint',
			// 点信息
			'pointPosition',
			// 点名称
			'stateName',
			// 地址
			'siteName',
			// 介绍
			'introduceText',
			// 全景地址
			'panoramaUrl',
			// 详情弹框显示关闭
			'detailsPopup',
			// 全景弹框显示关闭
			'panoramaPopup',
			// 校区内导航的显示关闭
			'campusNavFlag',
			'orgNavBarFlag',
			'arcNavBarFlag',
			'searchPopupFlag'
			])
			},
			mounted () {
			var that = this

			this.$nextTick(() => {
			// 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
			$('#map_popup_content').on('click', '.arc-bcg', function () {
			alert(1)
			})

			$('#map_popup_content').on('click', '.tab-btn li', function (e) {
			$(this).addClass('on').siblings().removeClass('on')

			$(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
			})

			$('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) {
			that.comeName = '成交楼'
			if (that.campusNavFlag == false) that.campusNavFlag = true
			})

			$('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
			that.getToName = '活动中心'
			if (that.campusNavFlag == false) that.campusNavFlag = true
			})

			$('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) {
			that.QRCodeFlag = true
			})

			$('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) {
			console.log(that.$refs.popupImgs)
			that.$refs.popupImgs.clickHandler()
			})
			})

			var DC = global.DC

			let viewer
			let viewer, eagleViewer

			function distanceSurface () {
			viewer.measure.distanceSurface()
			@@ -261,12 +218,8 @@
			viewer.measure.deactivate()
			}

			function gotoModel () {
			viewer.flyTo(tileset)
			}

			function initViewer () {
			viewer = new DC.Viewer('viewer-container', {
			viewer = new global.DC.Viewer('viewer-container', {
			contextOptions: {
			webgl: {
			stencil: true,
			@@ -275,120 +228,336 @@
			}
			})

			eagleViewer = new global.DC.Viewer('eagleEyeMap', {
			animation: false,
			baseLayerPicker: false,
			imageryProvider: false,
			fullscreenButton: false,
			geocoder: false,
			homeButton: false,
			infoBox: false,
			sceneModePicker: false,
			selectionIndicator: false,
			timeline: false,
			navigationHelpButton: false,
			navigationInstructionsInitiallyVisible: false,
			creditContainer: undefined
			// sceneMode: global.DC.Namespace.Cesium.SceneMode.SCENE2D
			})

			eagleViewer.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=9ae78c51a0a28f06444d541148496e36',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			format: 'image/jpeg',
			show: true,
			maximumLevel: 18
			})
			)

			eagleViewer.imageryLayers.addImageryProvider(
			new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
			url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			format: 'image/jpeg',
			show: true,
			maximumLevel: 18
			})
			)

			var sceneL = viewer.scene
			var sceneR = eagleViewer.scene

			var handlerL = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(sceneL.canvas)
			var handlerR = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(sceneR.canvas)

			var isLeftTrigger = false

			var isRightTrigger = false

			handlerL.setInputAction(function (movement) {
			isLeftTrigger = true
			isRightTrigger = false
			}, global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)

			handlerR.setInputAction(function (movement) {
			if (that.samllMapFlag) {
			isLeftTrigger = false
			isRightTrigger = true
			}
			}, global.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)

			var syncviewer = function () {
			if (isLeftTrigger) {
			const position = global.DC.Transform.transformCartesianToWGS84(viewer.camera.position)

			eagleViewer.camera.flyTo({

			destination: global.DC.Transform.transformWGS84ToCartesian(new global.DC.Position(position.lng, position.lat, position.alt + 1000)),

			orientation: {

			heading: viewer.camera.heading,

			pitch: viewer.camera.pitch,

			roll: viewer.camera.roll

			},

			duration: 0.0

			})
			}
			}

			viewer.camera.changed.addEventListener(syncviewer)

			viewer.scene.preRender.addEventListener(syncviewer)

			var synceagleViewer = function () {
			if (isRightTrigger && that.samllMapFlag) {
			viewer.camera.flyTo({

			destination: eagleViewer.camera.position,

			orientation: {

			heading: eagleViewer.camera.heading,

			pitch: eagleViewer.camera.pitch,

			roll: eagleViewer.camera.roll

			},

			duration: 0.0

			})
			}
			}

			eagleViewer.camera.setView({
			// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
			// fromDegrees()方法，将经纬度和高程转换为世界坐标
			destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
			115.871863, 28.743861, 1400.0
			),
			orientation: {
			// 指向
			heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
			// 视角
			pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
			roll: 0.0
			}
			})

			eagleViewer.camera.changed.addEventListener(synceagleViewer)

			eagleViewer.scene.preRender.addEventListener(synceagleViewer)

			// viewer.camera.percentageChanged = 0.01
			// eagleViewer.camera.percentageChanged = 0.01

			// viewer.camera.changed.addEventListener((e) => {
			// eagleViewer.camera.flyTo({
			// destination: viewer.camera.position,
			// orientation: {
			// heading: viewer.camera.heading + 5000,
			// pitch: viewer.camera.pitch,
			// roll: viewer.camera.roll
			// },
			// duration: 0.0
			// })
			// })

			// eagleViewer.camera.changed.addEventListener((e) => {
			// viewer.camera.flyTo({
			// destination: eagleViewer.camera.position,
			// orientation: {
			// heading: eagleViewer.camera.heading - 5000,
			// pitch: eagleViewer.camera.pitch,
			// roll: eagleViewer.camera.roll
			// },
			// duration: 0.0
			// })
			// })

			that.createdLayers(viewer)

			that.$store.commit('SET_VIEWER', viewer)

			that.$refs.leftNav.initialize(viewer)

			const popup = viewer.popup
			// const key = '0f7c1d161d7352116a21aacf0e9f44c1'
			// const vec = global.DC.ImageryLayerFactory.createTdtImageryLayer({
			// key
			// })
			// const cva = global.DC.ImageryLayerFactory.createTdtImageryLayer({
			// key,
			// style: 'cva'
			// })
			// viewer.addBaseLayer([vec, cva])

			popup.hide()
			// const areaLayer = new global.DC.VectorLayer('areaLayer')

			const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
			url:
			'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
			})
			viewer.addBaseLayer(baselayer, {
			iconUrl: 'examples/images/icon/img.png',
			name: '影像'
			})
			// viewer.addLayer(areaLayer)

			// eslint-disable-next-line camelcase
			const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
			url:
			'http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
			})
			viewer.addBaseLayer(baselayer_shaded, {
			iconUrl: 'examples/images/icon/elec.png',
			name: '电子'
			})
			// axios.get('http://59.55.128.156:6080/arcgis/rest/services/xiajiangfhgc/MapServer/4/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
			// resultData.data.features.forEach(item => {
			// item.geometry.rings[0].forEach(it => {
			// it = it.join(',')
			// })

			// eslint-disable-next-line camelcase
			const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
			url:
			'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
			})
			viewer.addBaseLayer(baselayer_street, {
			iconUrl: 'examples/images/icon/ter.png',
			name: '地形'
			})
			// item.geometry.rings[0] = item.geometry.rings[0].join(';')

			// eslint-disable-next-line camelcase
			const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
			url:
			'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
			})
			viewer.addBaseLayer(baselayer_ter, {
			iconUrl: 'examples/images/icon/ter.png',
			name: '地形'
			})
			// const polygon = new global.DC.Polygon(item.geometry.rings[0])

			const layer = new DC.TilesetLayer('layer')
			viewer.addLayer(layer)
			const tileset = new DC.Tileset(
			'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
			)
			const style = new DC.TilesetStyle()
			style.color = {
			conditions: [
			['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
			['${Height} >= 200', 'rgb(102, 71, 151)'],
			['${Height} >= 100', 'rgb(170, 162, 204)'],
			['${Height} >= 50', 'rgb(224, 226, 238)'],
			['${Height} >= 25', 'rgb(252, 230, 200)'],
			['${Height} >= 10', 'rgb(248, 176, 87)'],
			['${Height} >= 5', 'rgb(198, 106, 11)'],
			['true', 'rgb(127, 59, 8)']
			]
			}
			// polygon.setStyle({

			viewer.use(new DC.Measure())
			// material: global.DC.Namespace.Cesium.Color.fromBytes(255, 255, 255, 0)

			tileset.setStyle(style)
			layer.addOverlay(tileset)
			viewer.flyTo(tileset)
			// })

			tileset.on(DC.MouseEventType.CLICK, e => {
			// that.popupFlag = true
			// areaLayer.addOverlay(polygon)
			// })
			// })

			console.log(e.position)
			// var select = {
			// overlay: undefined,
			// color: undefined
			// }

			viewer.scene.globe.depthTestAgainstTerrain = false
			// viewer.on(global.DC.MouseEventType.MOUSE_MOVE, e => {
			// if (e.overlay != undefined) {
			// if (select.overlay != undefined) {
			// if (e.overlay != select.overlay) {
			// select.overlay.setStyle({
			// material: select.color
			// })

			// 定制化窗体
			var divForms = new DC.divForms(viewer, {
			domId: 'div1',
			title: '成教楼 ',
			className: 'divForms-dom',
			content: document.getElementById('mapChildContent'),
			position: [
			e.position
			]
			})
			// select.overlay = undefined
			// select.color = undefined
			// }
			// }

			// popup.setWrapper('<div></div>')
			// if (select.overlay == undefined) {
			// select.overlay = e.overlay

			// popup.showAt(e.position, document.getElementById('modelPopup'))
			})
			// select.color = e.overlay._style.material
			// select.overlay.setStyle({

			// viewer.zoomToPosition(
			// new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
			// material: global.DC.Namespace.Cesium.Color.fromBytes(32, 108, 247, 158)

			// })
			// }
			// } else {
			// if (select.overlay != undefined) {
			// select.overlay.setStyle({
			// material: select.color
			// })

			// select.overlay = undefined
			// select.color = undefined
			// }
			// }
			// })

			// viewer.on(global.DC.MouseEventType.CLICK, e => {
			// if (e.overlay != undefined) {
			// console.log(e.overlay.attr)
			// }
			// })

			// viewer.addBaseLayer(baselayer, {
			// iconUrl: 'examples/images/icon/img.png',
			// name: '影像'
			// })

			// viewer.addBaseLayer(wmtslayer, {
			// iconUrl: 'examples/images/icon/img.png',
			// name: '影像'
			// })

			// // eslint-disable-next-line camelcase
			// const baselayer_shaded = global.DC.ImageryLayerFactory.createArcGisImageryLayer({
			// url:
			// 'http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
			// })
			// viewer.addBaseLayer(baselayer_shaded, {
			// iconUrl: 'examples/images/icon/elec.png',
			// name: '电子'
			// })

			// // eslint-disable-next-line camelcase
			// const baselayer_street = global.DC.ImageryLayerFactory.createArcGisImageryLayer({
			// url:
			// 'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
			// })
			// viewer.addBaseLayer(baselayer_street, {
			// iconUrl: 'examples/images/icon/ter.png',
			// name: '地形'
			// })

			// // eslint-disable-next-line camelcase
			// const baselayer_ter = global.DC.ImageryLayerFactory.createArcGisImageryLayer({
			// url:
			// 'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
			// })
			// viewer.addBaseLayer(baselayer_ter, {
			// iconUrl: 'examples/images/icon/ter.png',
			// name: '地形'
			// })

			viewer.use(new global.DC.Measure())

			// viewer.flyToPosition(
			// new global.DC.Position(117.08489820, 31.65413916, 1500, 0, -90, 45)
			// )

			viewer.compass.enable = true
			viewer.zoomController.enable = true
			viewer.locationBar.enable = true
			viewer.distanceLegend.enable = true

			// DC的鹰眼地图
			// viewer.hawkeyeMap.enable = true
			// viewer.hawkeyeMap.addBaseLayer(
			// global.DC.ImageryLayerFactory.createAmapImageryLayer({
			// crs: 'WGS84'
			// })
			// )
			// viewer.distanceLegend.enable = true
			}

			DC.ready(initViewer)
			global.DC.ready(initViewer)
			},
			methods: {
			closeCampusNav () {
			this.campusNavFlag = false
			mapClick (e) {
			this.$refs.campusNavRoute.shortcutShow(e)
			this.$refs.campusBuildingSearch.shortcutShow(e)
			},

			createdLayers (viewer) {
			const layerGroup = new global.DC.LayerGroup('modelBox')
			viewer.addLayerGroup(layerGroup)

			this.areaLayer = new global.DC.VectorLayer('areaLayer')
			layerGroup.addLayer(this.areaLayer)
			}
			}
			}
			</script>

			<style lang='scss' scope>
			<style lang="scss" scope>
			.eagle-eye-map {
			position: fixed;
			right: 10px;
			bottom: 10px;
			border: 5px solid orange;
			border-radius: 50%;
			width: 200px;
			height: 200px;
			z-index: 99;
			overflow: hidden;
			}
			</style>