From 30e36368e54581fcc0c581a004f1f68873c1e819 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 10 五月 2022 08:37:34 +0800
Subject: [PATCH] 地图
---
src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue | 277 -------------------------------------------------------
1 files changed, 1 insertions(+), 276 deletions(-)
diff --git a/src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue b/src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue
index 5ec579a..9e73e6b 100644
--- a/src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue
+++ b/src/views/doublePreventAction/riskLevelManage/fourColorMap/index.vue
@@ -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>
--
Gitblit v1.9.2