ztqt.git - Gitblit

			@@ -1,284 +1,9 @@
			<template>
			<div class="map-layout">
			<Map @init="init" :option="option" v-if="option" />
			<Tab v-if="loaded" />
			</div>
			<router-view />
			</template>

			<script>
			import Map from '../../../../components/Map';
			import Tab from '../../../../components/Tab';
			import { global } from '../../../../global';
			import {
			getCatesian3FromPX,
			Cartesian3_to_WGS84,
			} from '../../../../components/Map/libs/Point';

			export default {
			name: 'App',
			components: {
			Map,
			Tab,
			},
			data() {
			return {
			loaded: false,
			map: null,
			option: null,
			heatLayer: null,
			shineishiwai: true,
			};
			},
			mounted() {
			// 地图配置初始化
			this.option = {
			// 初始化视图中心点
			viewpoint: {
			y: 31.254992,
			x: 120.727592,
			z: 289.24,
			heading: 13.8,
			pitch: -37.3,
			roll: 360,
			},

			// 显示位置初始化按钮
			homeButton: true,

			// 当前时间
			currentTime: '08:30:00',

			// 影像底图
			imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
			url:
			'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
			layer: '',
			style: 'default',
			tileMatrixSetID: 'w',
			format: 'tiles',
			maximumLevel: 18,
			}),
			};
			window.sss = this;
			},
			methods: {
			init(map) {
			this.loaded = true;

			map.addModel({
			link: 'http://222.92.213.21:8006/zhongtaiweb/tileset.json',
			name: '商业园区',
			callback: tileset => {
			var boundingSphere = tileset.boundingSphere;
			var cartographic = Cesium.Cartographic.fromCartesian(
			boundingSphere.center
			);
			var surface = Cesium.Cartesian3.fromRadians(
			cartographic.longitude,
			cartographic.latitude,
			0.0
			);
			var offset = Cesium.Cartesian3.fromRadians(
			cartographic.longitude,
			cartographic.latitude,
			102
			);
			var translation = Cesium.Cartesian3.subtract(
			offset,
			surface,
			new Cesium.Cartesian3()
			);
			tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
			},
			});

			map.viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString(
			'#050F1F'
			);
			map.viewer.scene.logarithmicDepthBuffer = false;
			map.viewer.scene.globe.enableLighting = true;
			map.viewer.scene.sun.show = false;
			map.viewer.scene.moon.show = false;
			map.viewer.scene.fog.enabled = false;
			map.viewer.scene.skyBox = null;

			// 初始化事件
			this.initEvent(map);

			this.testLoadedData();
			},
			// 加载测试数据
			testLoadedData() {
			const map = global.map;
			if (!map) return;
			$.get('./public/data/plots_namisuo.geojson', res => {
			map.loadGeoJSON(res);
			});
			},
			initEvent(map) {
			let popup = null;
			const _this = this;
			map.on(
			'click',
			({
			position,
			cartesian3,
			latLngPositionGlobe,
			latLngPosition,
			entity,
			attr,
			}) => {
			if (popup) {
			popup.destroy();
			popup = null;
			}
			let type = entity && entity.attribute && entity.attribute.type;
			if (type) {
			popup = new wutu3d.DivPoint(map.viewer, {
			html:
			"<div class='popup-wrapper'>" +
			attr.name +
			'<br/><br/>XXXXXXXX</div>',
			position: cartesian3,
			anchor: [-170, -80],
			});
			popup.visible = true;
			}
			if (attr.name && attr.name === '含内景大楼') {
			_this.changeModel(!_this.shineishiwai);
			_this.shineishiwai = !_this.shineishiwai;
			}

			const pos = getCatesian3FromPX(position, map.viewer);
			const pos1 = Cartesian3_to_WGS84(pos);
			console.log(pos1);

			var pt = turf.point([Number(pos1.lng), Number(pos1.lat)]);
			var poly = turf.polygon([
			[
			[120.159277, 30.227512],
			[120.158919, 30.227569],
			[120.158777, 30.227431],
			[120.158904, 30.227151],
			[120.15911, 30.227119],
			[120.159339, 30.227347],
			[120.159277, 30.227512],
			],
			]);

			const inPoly = turf.booleanPointInPolygon(pt, poly);

			if (
			//自己测量对应建筑的空间范围
			inPoly &&
			pos1.alt > 0 && //20.562718744748462
			pos1.alt < 121.7
			) {
			_this.changeModel(!_this.shineishiwai);
			_this.shineishiwai = !_this.shineishiwai;
			}
			}
			);
			// map.on(
			// 'mousemove',
			// ({ cartesian3, latLngPositionGlobe, latLngPosition, entity, attr }) => {
			// if (popup) {
			// popup.destroy();
			// popup = null;
			// }
			// let type = entity && entity.attribute && entity.attribute.type;
			// if (type) {
			// popup = new wutu3d.DivPoint(map.viewer, {
			// html:
			// "<div class='popup-wrapper'>信息内容<br/><br/>XXXXXXXX</div>",
			// position: cartesian3,
			// anchor: [-170, -80],
			// });
			// popup.visible = true;
			// }
			// }
			// );
			},
			changeModel(val) {
			console.log(val);
			if (!val) {
			global.map.models.map(model => {
			if (model.name === '室内') {
			global.map.setModelVisible(model.id, true);
			global.map.flyToModel(model.id);
			} else {
			global.map.setModelVisible(model.id, false);
			}
			});

			let viewer = global.map.viewer;
			viewer.scene.skyBox = null;
			viewer.scene.sun.show = false;
			viewer.scene.moon.show = false;
			viewer.scene.globe.show = false;
			viewer.scene.logarithmicDepthBuffer = false;
			viewer.scene.skyAtmosphere.show = false;
			viewer.scene.backgroundColor = Cesium.Color.fromCssColorString(
			'rgba(0,0,0, 1)'
			);
			} else {
			global.map.models.map(model => {
			if (model.name === '室内') {
			global.map.setModelVisible(model.id, false);
			} else {
			global.map.setModelVisible(model.id, true);
			}
			});

			global.map.setViewpoint(
			{
			y: 30.231104,
			x: 120.157372,
			z: 298.45,
			heading: 173,
			pitch: -28.8,
			roll: 6.2,
			},
			{ duration: 1.5 }
			);

			let viewer = global.map.viewer;
			viewer.scene.skyBox = null;
			viewer.scene.sun.show = true;
			viewer.scene.moon.show = true;
			viewer.scene.globe.show = true;
			viewer.scene.logarithmicDepthBuffer = true;
			viewer.scene.skyAtmosphere.show = true;
			viewer.scene.backgroundColor = Cesium.Color.fromCssColorString(
			'rgba(0,0,0, 1)'
			);
			}
			},
			},
			};
			</script>

			<style scoped>
			.map-layout {
			height: 100%;
			position: relative;
			}

			.tool-btns {
			position: absolute;
			z-index: 999;
			top: 10px;
			left: 500px;
			}
			.sn-tool {
			position: absolute;
			bottom: 10px;
			right: 10px;
			z-index: 1;
			padding: 3px;
			background: #fff;
			}
			.left-switch {
			margin-right: 10px;
			}
			</style>