school-web.git - Gitblit

			@@ -1,211 +1,95 @@
			/* eslint-disable camelcase */
			<template>
			<div id="viewer-container"
			style="height: 100%; width: 100%;">
			style="height: 100%; width: 100%;"
			@click="mapClick($event)">

			<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>
			<div class="meau">

			</div>
			</div>
			<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 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 />

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

			<campusNav :comeName="comeName"
			:getToName="getToName"
			<mapPopup />

			<campusBuildingSearch ref="campusBuildingSearch" />

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

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

			<org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
			<arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>
			</div>
			</template>
			<script>

			import axios from 'axios'
			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'
			]
			DC: null
			}
			},
			computed: {
			...mapGetters([
			'viewer',
			'popupBgUrl',
			'pupupQRUrl'
			'pupupQRUrl',
			// 终点
			'terminus',
			// 起点
			'startingPoint',
			// 点信息
			'pointPosition',
			// 点名称
			'stateName',
			// 地址
			'siteName',
			// 介绍
			'introduceText',
			// 全景地址
			'panoramaUrl',
			// 详情弹框显示关闭
			'detailsPopup',
			// 全景弹框显示关闭
			'panoramaPopup',
			// 社区内导航的显示关闭
			'campusNavFlag',
			'orgNavBarFlag',
			'arcNavBarFlag'
			])
			},
			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

			that.DC = global.DC

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

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

			function initViewer () {
			viewer = new DC.Viewer('viewer-container', {
			viewer = new that.DC.Viewer('viewer-container', {
			contextOptions: {
			webgl: {
			stencil: true,
			@@ -279,112 +159,152 @@

			that.$refs.leftNav.initialize(viewer)

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

			popup.hide()
			// const areaLayer = new that.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 that.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: that.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(that.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: that.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(that.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 = that.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 = that.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 = that.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 that.DC.Measure())

			// viewer.flyToPosition(
			// new that.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
			viewer.hawkeyeMap.enable = true
			viewer.hawkeyeMap.addBaseLayer(
			that.DC.ImageryLayerFactory.createAmapImageryLayer(
			{
			crs: 'WGS84'
			}
			)
			)
			// viewer.distanceLegend.enable = true
			}

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