From f521ebc2551d468c4c478783a18d4b0714394d61 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期一, 14 十月 2024 15:00:13 +0800
Subject: [PATCH] 配网大屏功能优化
---
src/views/visualization/data.js | 4
src/views/visualization/bottomMenu.vue | 18
src/views/visualization/road.js | 463 +++++++++++++++++++++++++
src/views/visualization/msgList.vue | 174 +++++++++
src/assets/images/treeClose.png | 0
src/components/mapOl/index.vue | 46 +-
src/store/mapStore.js | 26 +
src/components/RuoYi/Msgger/index.vue | 17
src/views/visualization/list/mapWeather.js | 90 +++++
src/main.js | 2
public/config/config.js | 2
src/views/visualization/leftMenu.vue | 10
src/views/visualization/mapView.vue | 38 +
src/store/modules/mapLayers.js | 2
src/App.vue | 31 +
src/views/visualization/index.vue | 71 +++
src/views/visualization/list/chart.vue | 55 ++
17 files changed, 964 insertions(+), 85 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index 74f1134..4099b48 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -17,7 +17,7 @@
//rag绔彛
const ragHost = isWeb ? isUrl + ":9036" : "192.168.11.24:8103";
// 鏈湴鏁版嵁鍦板潃
-const pwythHost = "http://192.168.11.95:8888/pwyth";
+const pwythHost = "http://localhost/pwyth";
//閰嶇疆
const config = {
// server鏈嶅姟
diff --git a/src/App.vue b/src/App.vue
index 055b6a9..6181d2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,14 +24,39 @@
},
data() {
return {
-
+
}
},
mounted() {
-
+ this.createSocket();
+ setTimeout(() => {
+ this.$store.state.mapLayers.msgList.push({
+ msg: "鍙樺帇鍣ㄦ晠闅�",
+ point: "POINT (112.56978672907 37.8558881392881)"
+ })
+
+ }, 10000);
},
methods: {
-
+ createSocket() {
+ this.wsSocket = new WebSocket(config.pySocket);
+ this.wsSocket.onopen = (event) => {
+ console.log('WebSocket杩炴帴鎴愬姛');
+ };
+ this.wsSocket.onmessage = (event) => {
+ // console.log('Received message:', event.data);
+
+ if (event.data != "杩炴帴鎴愬姛") {
+ const obj = JSON.parse(event.data)
+
+
+ this.leftChartData = {
+ type: 'left1',
+ val: obj
+ }
+ }
+ };
+ }
}
};
</script>
diff --git a/src/assets/images/treeClose.png b/src/assets/images/treeClose.png
new file mode 100644
index 0000000..fb2d4ff
--- /dev/null
+++ b/src/assets/images/treeClose.png
Binary files differ
diff --git a/src/components/RuoYi/Msgger/index.vue b/src/components/RuoYi/Msgger/index.vue
index dfe2880..fe4e66a 100644
--- a/src/components/RuoYi/Msgger/index.vue
+++ b/src/components/RuoYi/Msgger/index.vue
@@ -2,10 +2,10 @@
<div class="msgBox" @click.stop="setShowMenuClick(true)">
<i style="font-size: 20px;" class="el-icon-chat-line-round"></i>
- <el-badge v-show="msgCount > 0" :value="msgCount" class="item">
+ <el-badge v-show="$store.state.mapLayers.msgList.length > 0" :value="$store.state.mapLayers.msgList.length" class="item">
</el-badge>
- <el-dialog title="寮傚父淇℃伅" :visible.sync="dialogVisible" width="30%" :show-close="false">
- <el-table :data="msgData" style="width: 100%">
+ <el-dialog title="鏁呴殰淇℃伅" :visible.sync="dialogVisible" width="30%" :show-close="false">
+ <el-table :data="$store.state.mapLayers.msgList" style="width: 100%">
<el-table-column prop="msg" label="璁惧鍚嶇О">
</el-table-column>
<el-table-column prop="point" label="璁惧浣嶇疆">
@@ -46,10 +46,7 @@
dialogFlag: false,
wsSocket: null,
innerVisible: false,
- msgData: [{
- msg: "鍙樺帇鍣ㄦ晠闅�",
- point: "POINT (112.56978672907 37.8558881392881)"
- }],
+ msgData: [],
parentData: null,
}
},
@@ -108,9 +105,9 @@
},
},
mounted() {
- if (!this.wsSocket) {
- this.createSocket();
- }
+ // if (!this.wsSocket) {
+ // this.createSocket();
+ // }
},
}
diff --git a/src/components/mapOl/index.vue b/src/components/mapOl/index.vue
index a510f9e..ae520c5 100644
--- a/src/components/mapOl/index.vue
+++ b/src/components/mapOl/index.vue
@@ -62,30 +62,30 @@
const baseLayer = mapData.baseLayer;
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
const geo= config.geoServer;
- // var vectorLayer = new TileLayer({
- // source: new XYZ({
- // url: vecUrl + config.tdToken,
- // }),
- // });
- // const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
- // var vectorLayer1 = new TileLayer({
- // source: new XYZ({
- // url: cvaUrl + config.tdToken,
- // }),
- // });
- var layer2 = new Image({
- name: "Wms_Layer",
- source: new ImageWMS({
- crossOrigin: "anonymous",
- url: geo.url + geo.wms,
- params: {
- FORMAT: "image/png",
- VERSION: "1.1.1",
- LAYERS: geo.layers[0],
- },
+ var vectorLayer = new TileLayer({
+ source: new XYZ({
+ url: vecUrl + config.tdToken,
}),
});
- this.mapol.addLayer(layer2);
+ const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
+ var vectorLayer1 = new TileLayer({
+ source: new XYZ({
+ url: cvaUrl + config.tdToken,
+ }),
+ });
+ // var layer2 = new Image({
+ // name: "Wms_Layer",
+ // source: new ImageWMS({
+ // crossOrigin: "anonymous",
+ // url: geo.url + geo.wms,
+ // params: {
+ // FORMAT: "image/png",
+ // VERSION: "1.1.1",
+ // LAYERS: geo.layers[0],
+ // },
+ // }),
+ // });
+ // this.mapol.addLayer(layer2);
this.mapol = new Map({
target: 'mapView',
layers: [vectorLayer, vectorLayer1],
@@ -96,7 +96,7 @@
}),
});
-
+console.log(geo.url + geo.wms)
var layer2 = new Image({
name: "Wms_Layer",
source: new ImageWMS({
diff --git a/src/main.js b/src/main.js
index f953bde..c5adc4d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
+import mapStore from './store/mapStore.js'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
@@ -116,6 +117,7 @@
el: '#app',
router,
store,
+ mapStore,
render: h => h(App)
})
diff --git a/src/store/mapStore.js b/src/store/mapStore.js
new file mode 100644
index 0000000..4e5e977
--- /dev/null
+++ b/src/store/mapStore.js
@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+ const mapStore= new Vuex.Store({
+ //鏁版嵁锛岀浉褰撲簬data
+ state: {
+ regionWeather:null,
+ },
+ getters: {
+
+ },
+ //閲岄潰瀹氫箟鏂规硶锛屾搷浣渟tate鏂瑰彂
+ mutations: {
+
+ },
+ // 鎿嶄綔寮傛鎿嶄綔mutation
+ actions: {
+
+ },
+ modules: {
+
+ },
+})
+export default mapStore;
\ No newline at end of file
diff --git a/src/store/modules/mapLayers.js b/src/store/modules/mapLayers.js
index 4a46496..7e6fd61 100644
--- a/src/store/modules/mapLayers.js
+++ b/src/store/modules/mapLayers.js
@@ -4,6 +4,8 @@
layerTree: [],
defaultLayer: [],
mapInfo: [],
+ msgList:[ ]
+
};
const mutations = {
diff --git a/src/views/visualization/bottomMenu.vue b/src/views/visualization/bottomMenu.vue
index f8001ce..d70cfa1 100644
--- a/src/views/visualization/bottomMenu.vue
+++ b/src/views/visualization/bottomMenu.vue
@@ -5,12 +5,16 @@
<el-popover popper-class="popover" placement="top" v-show="i.children && i.children.length > 0"
width="100" trigger="click">
<span slot="reference">{{ i.name }}</span>
- <div @click="setChildData(c)" class="popover__item" v-show="i.children && i.children.length > 0"
- v-for="(c, f) in i.children" c :title="c.name"> {{
- c.name.slice(0, 8) }}
+ <div v-show="i.children && i.children.length > 0">
+ <div @click="setChildData(c)" class="popover__item" v-for="(c, f) in i.children" c
+ :title="c.name"> {{
+ c.name.slice(0, 8) }}
+ </div>
</div>
+
</el-popover>
- <span @click="setChildData(i)" slot="reference" v-show="!i.children || i.children.length <= 0">{{ i.name }}</span>
+ <span @click="setChildData(i)" slot="reference" v-show="!i.children || i.children.length <= 0">{{ i.name
+ }}</span>
</div>
</div>
@@ -33,6 +37,10 @@
id: 'a1',
name: '鐭ヨ瘑鍥捐氨',
pid: 's1',
+ }, {
+ id: 'a1',
+ name: '璇箟鍔熻兘',
+ pid: 's4',
}
]
}, {
@@ -51,7 +59,7 @@
}]
}, {
name: '鏁板瓧绾挎崯',
-
+
}
],
visible: false
diff --git a/src/views/visualization/data.js b/src/views/visualization/data.js
index 960c9d1..fac4f41 100644
--- a/src/views/visualization/data.js
+++ b/src/views/visualization/data.js
@@ -150,7 +150,7 @@
title: '闆�',
val: [
{
- point: '112.54236790420437.8448783429948',
+ point: '112.542367904204,37.8448783429948',
line: '娌欏寳绾�',
address: '澶師甯傚競鏀垮缓璁惧紑鍙戝绠卞彉',
type: 'snow',
@@ -167,7 +167,7 @@
{
val: [
{
- point: '112.542367904204 37.839565698022',
+ point: '112.542367904204,37.839565698022',
line: '涓堝瓧澶�',
address: '鑰佸啗钀ュ紑闂墍',
type: 'fire',
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index 6a77f43..e91b1d6 100644
--- a/src/views/visualization/index.vue
+++ b/src/views/visualization/index.vue
@@ -26,9 +26,19 @@
<analysis v-if="isShow == '鏁版嵁鍒嗘瀽'"></analysis>
<statistics v-if="isShow == '鏁版嵁缁熻'"></statistics>
<line-loss v-if="isShow == '鏁板瓧绾挎崯'"></line-loss>
+ <semanticFunction v-if="isShow == '璇箟鍔熻兘'"></semanticFunction>
</div>
</div>
+ </div>
+ <div v-show="showMsgFlag" @click="ShowMenuList" class="elBadge"
+ :disabled="$store.state.mapLayers.msgList.length == 0">
+ <el-badge :value="$store.state.mapLayers.msgList.length" class="item">
+ <i class="el-icon-chat-dot-square"></i>
+ </el-badge>
+ </div>
+ <div class="msgList" v-show="!showMsgFlag" >
+ <msg-list @childData="receiveDataFromChild"></msg-list>
</div>
</div>
</template>
@@ -42,10 +52,19 @@
import analysis from '@/views/visual/analysis/index.vue'
import lineLoss from './lineLoss.vue';
import statistics from '@/views/visual/statistics/index.vue'
+import semanticFunction from '@/views/dataManager/semanticFunction/index.vue'
+import msgList from './msgList.vue';
export default {
components: {
mapView, leftMenu,
- rightMenu, bottomMenu, atlas, analysis, statistics, lineLoss
+ rightMenu,
+ bottomMenu,
+ atlas,
+ analysis,
+ statistics,
+ lineLoss,
+ semanticFunction,
+ msgList
},
data() {
return {
@@ -53,7 +72,8 @@
showInfo: false,
wsSocket: null,
rightChartData: {},
- leftChartData:{},
+ leftChartData: {},
+ showMsgFlag: true
}
},
beforeDestroy() {
@@ -67,10 +87,20 @@
},
mounted() {
if (!this.wsSocket) {
- this.createSocket();
+ // this.createSocket();
}
},
methods: {
+ receiveDataFromChild(data) {
+ console.log(data);
+
+ this.showMsgFlag = true
+ },
+ ShowMenuList() {
+ if (this.$store.state.mapLayers.msgList.length == 0) return;
+ this.showMsgFlag = !this.showMsgFlag
+
+ },
createSocket() {
this.wsSocket = new WebSocket(config.pySocket);
this.wsSocket.onopen = (event) => {
@@ -81,17 +111,13 @@
if (event.data != "杩炴帴鎴愬姛") {
const obj = JSON.parse(event.data)
-
-
+
+
this.leftChartData = {
type: 'left1',
val: obj
}
}
-
-
-
- // 澶勭悊鎺ユ敹鍒扮殑娑堟伅
};
},
childData(res) {
@@ -151,6 +177,33 @@
bottom: 0px;
}
+ .elBadge {
+ // width: 15%;
+ top: 90px;
+ right: 16%;
+ z-index: 40;
+ padding: 10px;
+ position: absolute;
+ background: url(~@/assets/images/treeClose.png)no-repeat;
+ background-size: 100% 100%;
+
+ .el-icon-chat-dot-square {
+ color: white;
+ font-size: 22px;
+ margin-right: 5px;
+ }
+ }
+
+ .msgList {
+ width: 15%;
+ top: 90px;
+ right: 16%;
+ z-index: 40;
+ position: absolute;
+
+ height: 30%;
+ }
+
.visualInfo {
width: 60%;
height: 60%;
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index 311369e..cd3ab94 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/src/views/visualization/leftMenu.vue
@@ -36,7 +36,9 @@
watch: {
},
+
mounted() {
+ window.regionWeather = null;
this.initEchart();
},
methods: {
@@ -46,16 +48,16 @@
this.initEchart3();
},
initEchart1() {
- var chart1= data[3];
+ var chart1 = data[3];
chart1.id = "myChart01";
- this.childData =chart1
+ this.childData = chart1
},
initEchart2() {
- var chart2= data[4];
+ var chart2 = data[4];
chart2.id = "myChart02";
this.childData1 = chart2
}, initEchart3() {
- var chart3= data[5];
+ var chart3 = data[5];
chart3.id = "myChart03";
this.childData2 = chart3
}
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 214e717..5583f5f 100644
--- a/src/views/visualization/list/chart.vue
+++ b/src/views/visualization/list/chart.vue
@@ -22,24 +22,28 @@
</div>
</td>
</tr>
- <tr v-for="(item, i) in childData.val">
- <td>{{ item.address }}</td>
- <td>{{ item.line }}</td>
- <td style="color:#f56c6c">{{ item.level }}</td>
+ <tr>
+ <td>{{ roadItem.address }}</td>
+ <td>{{ roadItem.line }}</td>
+ <td style="color:#f56c6c">{{ roadItem.level }}</td>
<td style="color:#409eff">
- <el-button v-show="flagData != item.address" class="elButton" type="primary" plain size="mini"
- @click="setChangeItem(item)">璇︽儏</el-button>
- <el-button v-show="flagData == item.address" class="elButton" type="danger" plain size="mini"
- @click="setCannelItem(item)">閲嶇疆</el-button>
+ <el-button v-show="flagData != roadItem.address" class="elButton" type="primary" plain
+ size="mini" @click="setChangeItem()">璇︽儏</el-button>
+ <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
+ size="mini" @click="setCannelItem()">閲嶇疆</el-button>
</td>
</tr>
</table>
+ <div class="chartEchart">
+ <div :id="chartId" class="myChart"> </div>
+ </div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
+import mapWeather from './mapWeather';
export default {
props: {
@@ -54,8 +58,9 @@
this.chartId = newValue.id;
this.title = newValue.title;
setTimeout(() => {
- this.setEchartChange(newValue)
- }, 1000);
+ this.setEchartChange(newValue.val[0])
+
+ }, 200);
}
}
},
@@ -64,19 +69,34 @@
chartId: "",
title: "",
flagData: null,
+ roadItem: {},
}
},
+ created() {
+ window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
+ },
+
methods: {
setCannelItem() {
this.flagData = null;
+ mapWeather.closeRegionWeather()
},
- setChangeItem(res) {
- this.flagData = res.address;
+ handlePOIDetailDataChange() {
+ if (this.flagData == window.regionWeather) return
+ this.flagData = window.regionWeather;
+ },
+ setChangeItem() {
+ var res = this.roadItem;
+ window.regionWeather = res.address;
+ var event = new Event('POIDetailDataChange');
+ window.dispatchEvent(event);
+ mapWeather.setRegionWeatherType(res);
},
setEchartChange(res) {
- if (!res.data) return;
- const data = res.data;
+ this.roadItem = res
+ if (!this.roadItem.data) return;
+ const data = this.roadItem.data;
const id = document.getElementById(this.chartId)
var std = [];
for (var i = 0; i < data.length; i++) {
@@ -87,7 +107,7 @@
const myChart = echarts.init(id);
var option = {
title: {
- text: res.address,
+ text: "",
textStyle: {
color: "white"
}
@@ -164,7 +184,12 @@
color: white;
display: flex;
flex-direction: column;
+
// justify-content: space-around;
+ .chartEchart {
+ flex: 1;
+
+ }
.myChart {
width: 100%;
diff --git a/src/views/visualization/list/mapWeather.js b/src/views/visualization/list/mapWeather.js
new file mode 100644
index 0000000..a04f7d1
--- /dev/null
+++ b/src/views/visualization/list/mapWeather.js
@@ -0,0 +1,90 @@
+import mapServer from '../../../assets/js/mapSdk/mapServe';
+
+const mapWeather = {
+ regionWeather: null,
+ particle: null,
+ closeRegionWeather() {
+ if (this.regionWeather) {
+ this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_NONE;
+ this.regionWeather = null;
+ }
+ if (this.particle) {
+ this.particle.deleteObject();
+ this.particle = null;
+ }
+ },
+ setRegionWeatherType(response) {
+ this.closeRegionWeather();
+ if (!this.regionWeather) {
+ this.getRegionWather(response);
+ }
+ const coord = this.getCoord(response);
+ earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
+ switch (response.type) {
+ case 'rain':
+ this.showRain();
+ break;
+ case 'fire':
+ this.showFire(response);
+ break;
+ case 'snow':
+ this.showSnow();
+ break;
+ }
+ },
+ showFire(res) {
+ const coord = this.getCoord(res);
+ const obj = {
+ x: coord[0],
+ y: coord[1],
+ z: 0,
+ };
+ this.particle = earthCtrl.factory.createParticleEffect(
+ 'flame',
+ obj,
+ {
+ translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //骞崇Щ
+ particleSize:10
+ },
+ function (data) {}
+ );
+ },
+
+ showRain() {
+ if (this.regionWeather) {
+ this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_RAIN;
+ this.regionWeather.regionAlpha = 0.6;
+ this.regionWeather.regionGradientDistance = 300;
+ }
+ },
+ showSnow() {
+ if (this.regionWeather) {
+ this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_SNOW;
+ this.regionWeather.regionAlpha = 0.9;
+ this.regionWeather.regionGradientDistance = 300;
+ }
+ },
+ getCoord(res) {
+ const coord = res.point.split(',');
+ console.log('娴嬭瘯', coord);
+
+ return coord;
+ },
+ getRegionWather(res) {
+ if (res.type == 'fire') return;
+ const coord = this.getCoord(res);
+ const model = mapServer.layerList.filter((item) => {
+ if (item.name == config.baseModel.cnName + '_' + config.baseModel.id) {
+ return item;
+ }
+ });
+ if (model.length <= 0) return;
+ this.regionWeather = earthCtrl.factory.createRegionWeather({
+ primitive: model[0].layer.item,
+ position: new SmartEarth.Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 1),
+ radius: 1000,
+ })
+ },
+};
+
+export default mapWeather;
diff --git a/src/views/visualization/mapView.vue b/src/views/visualization/mapView.vue
index 871e722..54f7393 100644
--- a/src/views/visualization/mapView.vue
+++ b/src/views/visualization/mapView.vue
@@ -5,10 +5,12 @@
</template>
<script>
-import mapServer from '@/assets/js/mapSdk/mapServe';
-import mapConfig from '@/assets/js/mapSdk/mapConfig';
-import mapData from '@/assets/js/mapSdk/mapData';
+import mapServer from '@/assets/js/mapSdk/mapServe.js';
+import mapConfig from '@/assets/js/mapSdk/mapConfig.js';
+import mapData from '@/assets/js/mapSdk/mapData.js';
import { layer_selectAll } from "@/api/mapView/map.js";
+import axios from 'axios';
+import road from './road';
export default {
name: 'mapView',
mounted() {
@@ -72,25 +74,35 @@
mapServer.addLayer(config.baseModel);
}
this.getSelectLayers();
-
-
},
getSelectLayers() {
layer_selectAll().then(response => {
if (response.data.code != 200) return
-
- const val = response.data.result.filter(item => {
-
+
+ response.data.result.filter(item => {
if (item.type == 2 && item.isShow == 1) {
-
- mapServer.addLayer(item)
-
+ if (item.cnName != "閰嶇綉绾�") {
+ mapServer.addLayer(item)
+ }
}
- return item;
+
})
-
+ this.$nextTick(() => {
+ this.addRoadLayer();
+ })
+
})
},
+ addRoadLayer() {
+ earthCtrl.factory.createPathLayer({
+ url: road,
+ color: "#00FA9A", //绾跨殑棰滆壊
+ width: 4.0, //绾跨殑瀹藉害
+ pointColor: "#FFFFFF", //绉诲姩鐐圭殑棰滆壊
+ speed: 1,
+ far: 50000
+ });
+ }
}
}
</script>
diff --git a/src/views/visualization/msgList.vue b/src/views/visualization/msgList.vue
new file mode 100644
index 0000000..52d9926
--- /dev/null
+++ b/src/views/visualization/msgList.vue
@@ -0,0 +1,174 @@
+<template>
+ <div class="msgBox">
+
+ <div class="aside-title">
+ <div>鏁呴殰淇℃伅</div>
+ <div @click="sendDataToParent()" class="closeMsg">
+ X
+ </div>
+ </div>
+ <div class="menuTable">
+ <table>
+ <tr>
+ <th style="width: 100px;">璁惧鍚嶇О</th>
+ <th>璁惧浣嶇疆</th>
+ <th style="width: 100px;">鎿嶄綔</th>
+ </tr>
+ <tr v-for="(item, indx) in $store.state.mapLayers.msgList" :key="indx">
+ <td>{{ item.msg }}</td>
+ <td>{{ item.point }}</td>
+ <td>
+ <el-button @click="handleClick(item)" type="text" size="small">鏌ョ湅</el-button>
+ <!-- <el-button @click="handleClick2(item)" type="text" size="small">鍒嗗彂</el-button> -->
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import mapConfig from '../../assets/js/mapSdk/mapConfig';
+
+
+export default {
+ components: {
+
+ },
+ props: {
+
+ },
+ data() {
+ return {
+ label: null,
+ }
+ },
+ watch: {
+
+ },
+ mounted() {
+
+ },
+ methods: {
+ sendDataToParent() {
+ this.removeLabel();
+ console.log(23);
+
+ this.$emit('childData', '瀛愮粍浠舵暟鎹�');
+
+ },
+ removeLabel() {
+ if (this.label) {
+ this.label.removeFromMap()
+ this.label = null;
+ }
+ },
+ handleClick(item) {
+ this.removeLabel();
+ const point = mapConfig.getWKTParse(item.point)
+ this.label = earthCtrl.factory.createLabel({
+ lon: point.coordinates[0],
+ lat: point.coordinates[1],
+ alt: 40,
+ text: item.msg,
+ image: config.sdkImg + 'Workers/image/mark.png',
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: new SmartEarth.Cesium.Cartesian2(0, -50),
+ // 鍥剧墖鍋忕Щ閲�
+ iPixelOffset: new SmartEarth.Cesium.Cartesian2(0, -20)
+ });
+ earthCtrl.userScene.flyTo(this.label)
+ },
+ handleClick2(item) {
+
+ },
+ setMsgClose() {
+
+ }
+
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.msgBox {
+ width: 100%;
+ height: 100%;
+ background: url(~@/assets/images/Screen/chartbg.png) no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+
+ .aside-title {
+ box-sizing: border-box;
+ padding-left: 30px;
+ font-size: 15px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
+ color: #fff;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ display: flex;
+
+ .closeMsg {
+ margin-left: 64%;
+ cursor: pointer;
+ }
+
+ .closeMsg :hover {
+ color: #409EFF;
+ }
+
+ }
+
+ .menuTable {
+ margin: 5px;
+ margin-top: 10px;
+ text-align: center;
+ flex: 1;
+ overflow: auto;
+
+ table {
+ width: 100%;
+ color: white;
+
+ th {
+ text-align: center;
+
+ }
+
+ td {
+ line-height: 30px;
+ border-bottom: 1px solid #409EFF;
+ ;
+ }
+ }
+ }
+}
+
+/*婊氬姩鏉℃暣浣撴牱寮�*/
+::-webkit-scrollbar {
+ /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ width: 5px;
+ height: 1px;
+}
+
+/*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ background: #409EFF;
+}
+
+/*婊氬姩鏉￠噷闈㈣建閬�*/
+::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ background: rgba(237, 237, 237, .1);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/visualization/road.js b/src/views/visualization/road.js
new file mode 100644
index 0000000..3f5a346
--- /dev/null
+++ b/src/views/visualization/road.js
@@ -0,0 +1,463 @@
+ const road = {
+ type: 'FeatureCollection',
+ totalFeatures: 'unknown',
+ features: [
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.1',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.554578, 37.853285],
+ [112.560167, 37.853238],
+ [112.560143, 37.846945],
+ [112.556504, 37.848753],
+ [112.55378, 37.848847],
+ [112.552042, 37.847602],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11634,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.2',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.543213, 37.847039],
+ [112.544622, 37.847814],
+ [112.552019, 37.847555],
+ [112.55486, 37.845324],
+ [112.554249, 37.845395],
+ [112.542297, 37.845231],
+ [112.541405, 37.84509],
+ [112.534337, 37.844972],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11633,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.3',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.542361, 37.845216],
+ [112.542525, 37.839475],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11635,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.4',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.53948, 37.845113],
+ [112.53948, 37.846992],
+ [112.540771, 37.846992],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11632,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.5',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.533562, 37.848142],
+ [112.533609, 37.84779],
+ [112.534713, 37.847814],
+ [112.53483, 37.846358],
+ [112.535347, 37.846358],
+ [112.53537, 37.844456],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11631,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.6',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.54056, 37.845013],
+ [112.536521, 37.841773],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11638,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.7',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.540842, 37.845037],
+ [112.537366, 37.84229],
+ [112.537085, 37.841702],
+ [112.535394, 37.841045],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11637,
+ name: '娌欏寳绾�',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'sbx_polyline.8',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.542341, 37.844899],
+ [112.540698, 37.845157],
+ [112.540567, 37.845019],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11636,
+ name: '',
+ type: '娌欏寳绾�',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.1',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539461, 37.847329],
+ [112.539202, 37.85388],
+ [112.538874, 37.858131],
+ [112.560242, 37.859375],
+ [112.56853, 37.859563],
+ [112.568437, 37.858084],
+ [112.568789, 37.858107],
+ [112.568836, 37.856557],
+ [112.570104, 37.856487],
+ [112.570104, 37.855618],
+ [112.569658, 37.855923],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11621,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冪幆鍗楃嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.2',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539014, 37.856487],
+ [112.534459, 37.856416],
+ [112.534436, 37.855853],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11622,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冪幆鍗楃嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.3',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.533508, 37.855771],
+ [112.535046, 37.855853],
+ [112.533532, 37.855113],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11623,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.4',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539285, 37.851215],
+ [112.534565, 37.851086],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11623,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冪幆鍗楃嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.5',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539026, 37.855853],
+ [112.538862, 37.84855],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11625,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.6',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539167, 37.854291],
+ [112.541961, 37.854291],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11628,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.7',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.53912, 37.855195],
+ [112.540376, 37.855219],
+ [112.54087, 37.854925],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11627,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.8',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.539226, 37.852929],
+ [112.540353, 37.852965],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11629,
+ name: '妗冪幆鍗楃嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'thnx_polyline.9',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.538991, 37.855853],
+ [112.539367, 37.855853],
+ [112.540071, 37.848832],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 11626,
+ name: '妗冨崡鐜嚎',
+ tpye: '妗冨崡鐜嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.1',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.568448, 37.92898],
+ [112.568213, 37.928322],
+ [112.569575, 37.928322],
+ [112.569575, 37.928839],
+ [112.570045, 37.928815],
+ [112.571125, 37.928486],
+ [112.57183, 37.928486],
+ [112.57183, 37.928886],
+ [112.573732, 37.928886],
+ [112.574107, 37.924518],
+ [112.574906, 37.924448],
+ [112.574953, 37.923931],
+ [112.577723, 37.923814],
+ [112.577958, 37.923532],
+ [112.577982, 37.922499],
+ [112.577817, 37.922334],
+ [112.577747, 37.921043],
+ [112.578569, 37.920738],
+ [112.580782, 37.920661],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 116101,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.2',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.577958, 37.920949],
+ [112.578592, 37.920315],
+ [112.578592, 37.918883],
+ [112.577935, 37.918883],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 116102,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.3',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.578263, 37.91893],
+ [112.578258, 37.916259],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 116103,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.4',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.577864, 37.920761],
+ [112.580846, 37.918601],
+ [112.583799, 37.917104],
+ [112.584433, 37.918254],
+ [112.585091, 37.917879],
+ [112.585995, 37.919417],
+ [112.585689, 37.919605],
+ [112.585719, 37.92008],
+ [112.585907, 37.92008],
+ [112.585907, 37.919857],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 116104,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.5',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.583834, 37.917092],
+ [112.585666, 37.916247],
+ [112.585619, 37.915883],
+ [112.585314, 37.915883],
+ [112.585314, 37.915448],
+ [112.585079, 37.915448],
+ [112.585102, 37.915953],
+ [112.584832, 37.916129],
+ [112.584809, 37.915754],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 116105,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ {
+ type: 'Feature',
+ id: 'zzt_polyline.6',
+ geometry: {
+ type: 'LineString',
+ coordinates: [
+ [112.577988, 37.922493],
+ [112.577494, 37.922516],
+ ],
+ },
+ geometry_name: 'the_geom',
+ properties: {
+ id: 115106,
+ name: '涓堝瓙澶�2鍙风嚎',
+ type: '涓堝瓙澶�2鍙风嚎',
+ },
+ },
+ ],
+};
+export default road;
\ No newline at end of file
--
Gitblit v1.9.3