forked from JointCloud/JCC-RIP
Merge pull request 'earth' (#197) from jhnine/JCC-RIP:master into master
This commit is contained in:
commit
f084bb4311
|
|
@ -28,7 +28,7 @@ export function getTrainJob(params) {
|
|||
// 大屏左上角数据返回
|
||||
export function getComputeArea() {
|
||||
return request({
|
||||
url: 'pcm/v1/core/listDomainResource',
|
||||
url: 'pcm/v1/core/getDomainResource',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -57,6 +57,13 @@ export function getStorageData() {
|
|||
})
|
||||
}
|
||||
|
||||
export function getScreenInfo() {
|
||||
return request({
|
||||
url: 'pcm/v1/core/getScreenInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 配置图片上传接口
|
||||
export function uploadImage(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -67,18 +67,6 @@ export function getEarthDetails(area) {
|
|||
})
|
||||
}
|
||||
|
||||
// CPU平均使用率接口
|
||||
// export function getCpuAverage(start, end, step) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=avg(1%20-%20avg(rate(node_cpu_seconds_total%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%2Cmode%3D%22idle%22%7D%5B2m%5D))%20by%20(instance))%20*%20100' + '&start=' + start + '&end=' + end + '&step=' + step + '&_=1642578431700',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 整体总负载 平均使用情况
|
||||
export function getTotalAverage() {
|
||||
return request({
|
||||
|
|
@ -87,54 +75,6 @@ export function getTotalAverage() {
|
|||
})
|
||||
}
|
||||
|
||||
// 计量计费接口总价格
|
||||
export function getMeasure(start, end, step) {
|
||||
return request({
|
||||
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/host/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=host',
|
||||
method: 'get',
|
||||
data: JSON,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // 内存整体负载接口
|
||||
// export function getRamLoad(start, end, step) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=sum(node_memory_MemTotal_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D%20-%20node_memory_MemAvailable_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D)&start=' + start + '&end=' + end + '&step=' + step + '&_=1642669327729',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 计量计费列表接口
|
||||
export function getMeteringList(start, end, step) {
|
||||
return request({
|
||||
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/host/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=host',
|
||||
method: 'get',
|
||||
data: JSON,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// // CPU整体负载接口
|
||||
// export function getCpuAllload(start, end) {
|
||||
// return request({
|
||||
// url: '/monitoringscreen/api/v1/query_range?query=node_load15%7Binstance%3D~%22k8s-master%22%7D&start=' + start + '&end=' + end + '&step=900&_=1645409802467',
|
||||
// method: 'get',
|
||||
// data: JSON,
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 累计任务情况接口
|
||||
export function getTaskList() {
|
||||
return request({
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -5,7 +5,7 @@
|
|||
<el-col :span="10"><div class="img" /></el-col>
|
||||
<el-col :span="14">
|
||||
<div class="text">
|
||||
<el-carousel direction="vertical" :autoplay="false" @change="changeItem">
|
||||
<el-carousel direction="vertical" :autoplay="true" @change="changeItem">
|
||||
<el-carousel-item v-for="(item, index) in areaItem" :key="'areaItem' + index" class="areaList">
|
||||
<div class="area">{{ item.domainName || 'DomainName' }}</div>
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -12,24 +12,40 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataArray: [
|
||||
{
|
||||
name: '算力中心总数（计算域）',
|
||||
value: 34
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '已接入算力 POps@FP16',
|
||||
value: '112.06'
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '接入集群数',
|
||||
value: '48'
|
||||
value: '-'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue, oldValue) {
|
||||
this.dataArray[0].value = newValue.centerCount
|
||||
this.dataArray[1].value = newValue.computingPower
|
||||
this.dataArray[2].value = newValue.clusterCount
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
|
@ -46,6 +62,8 @@ export default {
|
|||
>div{
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat left;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.title{
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -60,6 +78,7 @@ export default {
|
|||
font-family: Impact;
|
||||
font-weight: 400;
|
||||
// padding-bottom: 5px;
|
||||
text-align: right;
|
||||
width: 80%;
|
||||
// text-indent: 130%;
|
||||
letter-spacing: 0.1rem;
|
||||
|
|
@ -68,26 +87,4 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// @media screen and (min-width: 1921px) {
|
||||
// .one{
|
||||
// background-size: 39px 39px;
|
||||
// font-size: 20px;
|
||||
// .num{
|
||||
// font-size: 38px;
|
||||
// }
|
||||
// }
|
||||
// .two{
|
||||
// p{
|
||||
// margin: 16px 0 ;
|
||||
// }
|
||||
// .title{
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .num{
|
||||
// font-size: 27px;
|
||||
// padding: 0 17px 5px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<div class="top">
|
||||
<div class="top-title">
|
||||
<h1>材料AI云际计算平台</h1>
|
||||
<h1> 云际计算基础平台</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floatLeft">
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ComputingPowerTotal />
|
||||
<ComputingPowerTotal :data="powerData" />
|
||||
</div>
|
||||
<Earth :key="resizeKey" :center="{name: monitorSettingForm.center, longitude: Number(monitorSettingForm.centerPosition.split(',')[0]), latitude: Number(monitorSettingForm.centerPosition.split(',')[1])}" />
|
||||
</div>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
// import moment from 'moment'
|
||||
import ComputeDomain from './components/ComputeDomain.vue'
|
||||
import ComputingPowerTotal from './components/ComputingPowerTotal.vue'
|
||||
import CumulativeTasks from './components/CumulativeTasks.vue'
|
||||
|
|
@ -86,14 +86,14 @@ import ComputingPowerTrend from './components/ComputingPowerTrend.vue'
|
|||
import ComputingResourceLoad from './components/ComputingResourceLoad.vue'
|
||||
import ComputingPowerUse from './components/ComputingPowerUse.vue'
|
||||
import Earth from '@/views/prometheusMonitor/earth'
|
||||
import { getComputePower, getCPUsage } from '@/api/container/monitorSelect.js'
|
||||
import { getComputePower, getCPUsage, getScreenInfo } from '@/api/container/monitorSelect.js'
|
||||
import { getTaskCount, createScheduleTask } from '@/api/top-menu/TotalNum'
|
||||
import { order } from '@/utils/data-process'
|
||||
import { getMonitorSetting } from '@/api/container/monitorSelect'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
components: { ComputeDomain, ComputingPowerTotal, ComputingPowerTrend, ComputingResourceLoad, ComputingPowerUse, CumulativeTasks, StorageResourceUsage, Earth },
|
||||
components: { ComputeDomain, ComputingPowerTotal, ComputingPowerTrend, ComputingPowerUse, ComputingResourceLoad, CumulativeTasks, StorageResourceUsage, Earth },
|
||||
data() {
|
||||
return {
|
||||
monitorSettingForm: {
|
||||
|
|
@ -113,11 +113,12 @@ export default {
|
|||
fileList: [],
|
||||
pageSize: 100,
|
||||
taskData: {},
|
||||
powerData: {},
|
||||
currentDate: '',
|
||||
tendData: { used: [], xData: [] },
|
||||
centerData: { used: [], unused: [], xData: [] },
|
||||
tendConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||||
statusConfig: { unit: '单位: 卡时', status: ['使用量', '使用量2'] }
|
||||
statusConfig: { unit: '单位: 卡时', status: ['使用量'] }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -129,6 +130,7 @@ export default {
|
|||
|
||||
this.$nextTick(() => {
|
||||
this.getTend()
|
||||
this.getPower()
|
||||
this.getAccrueCenter()
|
||||
})
|
||||
|
||||
|
|
@ -178,36 +180,22 @@ export default {
|
|||
document.documentElement.style.fontSize = `${14 * scale}px`
|
||||
}
|
||||
},
|
||||
getPower() {
|
||||
getScreenInfo().then((res) => {
|
||||
this.powerData = res.data
|
||||
})
|
||||
},
|
||||
getTend() {
|
||||
getComputePower().then((res) => {
|
||||
this.tendData = { used: [], xData: [] }
|
||||
if (res.dailyComputerPowers !== null) {
|
||||
const timeArr = []// 最近12个月的月份
|
||||
for (let i = 0; i < 180; i++) {
|
||||
timeArr.push(
|
||||
`${moment(new Date()).subtract(i, 'days').format('YYYY-MM-DD')}`
|
||||
)
|
||||
}
|
||||
timeArr.reverse()// 时间排序
|
||||
const arr = [] // 模拟一个假数据
|
||||
for (let i = 0; i < timeArr.length; i++) {
|
||||
arr.push({ date: timeArr[i], computerPower: 0 })
|
||||
// 将真实数据塞进arr里面
|
||||
for (let j = 0; j < res.dailyComputerPowers.length; j++) {
|
||||
if (res.dailyComputerPowers[j].date === timeArr[i]) {
|
||||
arr[i] = { date: res.dailyComputerPowers[j].date, computerPower: res.dailyComputerPowers[j].computerPower }
|
||||
}
|
||||
}
|
||||
}
|
||||
const arr = res.data?.chart?.thirtyDayData // 模拟一个假数据
|
||||
if (arr !== null) {
|
||||
arr.forEach((item) => {
|
||||
this.tendData.used.push(item.computerPower.toFixed(1))
|
||||
this.tendData.xData.push(item.date)
|
||||
this.tendData.used.push(item.cardTime)
|
||||
this.tendData.xData.push(item.perDay)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// this.tendData.used = [59688.1, 59252.5, 59189.0, 55766.5, 55537.2, 54804.4, 52764.9]
|
||||
// this.tendData.xData = ['2022-06-30', '2022-07-31', '2022-07-31', '2022-08-31', '2022-09-30', '2022-10-31', '2022-11-30']
|
||||
},
|
||||
getAccrueCenter() {
|
||||
getCPUsage().then((res) => {
|
||||
|
|
@ -236,10 +224,6 @@ export default {
|
|||
})
|
||||
}
|
||||
})
|
||||
|
||||
// this.centerData.used = [12, 22, 3, 55, 66, 77, 44, 32]
|
||||
// this.centerData.unused = [12, 22, 3, 55, 66, 77, 44, 32]
|
||||
// this.centerData.xData = ['2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8']
|
||||
},
|
||||
getTrainJob() {
|
||||
getTaskCount().then(e => {
|
||||
|
|
@ -303,7 +287,7 @@ export default {
|
|||
}
|
||||
|
||||
.monitor {
|
||||
background: url('../../assets/monitor/monitor_bg.png') no-repeat;
|
||||
background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
|
|
@ -318,17 +302,17 @@ export default {
|
|||
overflow: hidden;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 18vh;
|
||||
height: 8vh;
|
||||
// vertical-align: baseline;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
background: url(../../assets/monitor/top-bg.png) center top no-repeat;
|
||||
background: url(../../assets/monitor/top_bg.png) center top no-repeat;
|
||||
background-size: 100% 65%;
|
||||
.top-title{
|
||||
margin:0 auto;
|
||||
height: 100%;
|
||||
// background: url(../../assets/monitor/c-top.png) center no-repeat;
|
||||
// background-size: 55% 10vh;
|
||||
background: url(../../assets/monitor/c-top.png) center no-repeat;
|
||||
background-size: 55% 10vh;
|
||||
h1{
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
|
|
@ -391,6 +375,9 @@ export default {
|
|||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.floatLeft, .floatRight{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.middle{
|
||||
width: 38vw;
|
||||
position: absolute;
|
||||
|
|
@ -399,22 +386,41 @@ export default {
|
|||
margin-top: 10vh;
|
||||
}
|
||||
.floatLeft, .floatRight{
|
||||
margin-top: 5vh;
|
||||
padding: 0 1vh 0 2vh;
|
||||
padding-top: 5vh;
|
||||
padding-bottom: 4vh;
|
||||
}
|
||||
.floatLeft .left:before, .floatRight .right:after{
|
||||
.floatLeft .left::before, .floatRight .right::after{
|
||||
// margin-top: 6vh;
|
||||
content: '';
|
||||
width: 27vw;
|
||||
height: 95vh;
|
||||
display:block;
|
||||
position: absolute;
|
||||
top: -5.2vh;
|
||||
right: -2vh;
|
||||
background: url(../../assets/monitor/left.png) no-repeat;
|
||||
background-size: 100% 98%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.floatLeft .left:after, .floatRight .right:before{
|
||||
content: '';
|
||||
width: 2vw;
|
||||
height: 85vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -3.5vw;
|
||||
top: 3px;
|
||||
right: -2vh;
|
||||
background: url(../../assets/monitor/leftr.png) no-repeat;
|
||||
display: block;
|
||||
background: url(../../assets/monitor/leftrOld.png) no-repeat;
|
||||
background-size: 100% 98%;
|
||||
}
|
||||
.floatRight .right:before{
|
||||
left: -3.5vw;
|
||||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-o-transform:matrix(-1,0,0,1,0,0);
|
||||
}
|
||||
.floatLeft{
|
||||
width: 27vw;
|
||||
display: block;
|
||||
|
|
@ -429,13 +435,7 @@ export default {
|
|||
padding-left: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #02020a96;
|
||||
box-shadow: 20px -30px 30px 0px #02020a96;
|
||||
&::before{
|
||||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-o-transform:matrix(-1,0,0,1,0,0);
|
||||
z-index: 1;
|
||||
&:before{
|
||||
left: -2vh;
|
||||
}
|
||||
.left_1{
|
||||
|
|
@ -443,15 +443,19 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
.left_2 {
|
||||
height: 33vh;
|
||||
height: 21vh;
|
||||
}
|
||||
.left_3 {
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
height: 23vh;
|
||||
}
|
||||
.left_4{
|
||||
height: 12vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.floatRight {
|
||||
background: none;
|
||||
width: 27vw;
|
||||
display: block;
|
||||
// overflow: hidden;
|
||||
|
|
@ -479,13 +483,20 @@ export default {
|
|||
}
|
||||
}
|
||||
.right {
|
||||
background: #02020a96;
|
||||
box-shadow: -20px -30px 30px 0px #02020a96;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
&:after{
|
||||
// padding: 0 20px 0 10px;
|
||||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
-o-transform:matrix(-1,0,0,1,0,0);
|
||||
z-index: -1;
|
||||
// padding-top: 50px;
|
||||
// padding-bottom: 40px;
|
||||
}
|
||||
.right_1{
|
||||
height: 35vh;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
<el-button :class="activeTab === 'dsxs' ? 'active':''" @click="switchData('dsxs')">东数西算</el-button>
|
||||
<el-button :class="activeTab === 'net' ? 'active':''" @click="switchData('net')">新型网络</el-button>
|
||||
</div>
|
||||
<!-- <a class="switchBtn toChina" :class="!globe?'activeBtn':''" @click="toChina"><svg-icon icon-class="china" /></a>
|
||||
<a class="switchBtn" :class="globe?'activeBtn':''" @click="toWorld"><svg-icon icon-class="globe" /></a> -->
|
||||
<a class="switchBtn toChina" :class="!globe?'activeBtn':''" @click="toChina"><svg-icon icon-class="china" /></a>
|
||||
<a class="switchBtn" :class="globe?'activeBtn':''" @click="toWorld"><svg-icon icon-class="globe" /></a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -214,7 +214,7 @@ export default {
|
|||
this.scene.getObjectByName('dsxsText').visible = type === 'dsxs'
|
||||
this.scene.getObjectByName('cs').visible = type === 'cp'
|
||||
|
||||
// this.scene.getObjectByName('earthLine').visible = false
|
||||
this.scene.getObjectByName('earthLine').visible = false
|
||||
this.scene.getObjectByName('point').visible = type === 'net'
|
||||
this.scene.getObjectByName('pointText').visible = type === 'net'
|
||||
this.scene.getObjectByName('pointLine').visible = type === 'net'
|
||||
|
|
@ -223,7 +223,7 @@ export default {
|
|||
if (this.globe === true) return false
|
||||
this.globe = true
|
||||
this.third = false
|
||||
// this.scene.getObjectByName('earthLine').visible = true
|
||||
this.scene.getObjectByName('earthLine').visible = true
|
||||
this.scene.getObjectByName('point').visible = false
|
||||
this.scene.getObjectByName('pointText').visible = false
|
||||
this.scene.getObjectByName('pointLine').visible = false
|
||||
|
|
@ -238,9 +238,9 @@ export default {
|
|||
tweenL.start()
|
||||
const tweenL1 = new TWEEN.Tween(this.camera).to({ left: -s * this.k, right: s * this.k, top: s, bottom: -s }, 1000)
|
||||
.easing(TWEEN.Easing.Sinusoidal.InOut).onUpdate(() => {
|
||||
// this.scene.getObjectByName('earth').material.color.copy(new Three.Color())
|
||||
// this.scene.getObjectByName('earth-cloud').visible = true
|
||||
// this.scene.getObjectByName('earth').material.map = this.worldMapTexture
|
||||
this.scene.getObjectByName('earth').material.color.copy(new Three.Color())
|
||||
this.scene.getObjectByName('earth-cloud').visible = true
|
||||
this.scene.getObjectByName('earth').material.map = this.worldMapTexture
|
||||
this.scene.getObjectByName('chinaProvince').visible = false
|
||||
this.scene.getObjectByName('globeAreaMark').visible = true
|
||||
this.resetVisible()
|
||||
|
|
@ -253,7 +253,7 @@ export default {
|
|||
this.render()
|
||||
},
|
||||
resetVisible() {
|
||||
// this.scene.getObjectByName('globePoint').visible = this.globe
|
||||
this.scene.getObjectByName('globePoint').visible = this.globe
|
||||
this.activeTab = 'cp'
|
||||
this.camera.lookAt(this.scene.position)
|
||||
},
|
||||
|
|
@ -272,41 +272,41 @@ export default {
|
|||
this.camera.position).to({ x: -400, y: 530, z: 1700 }, 1800)
|
||||
.easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
const tweenL2 = new TWEEN.Tween(this.camera).to({ left: -s * this.k, right: s * this.k, top: s, bottom: -s }, 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
// const tweenL3 = new TWEEN.Tween(this.scene.getObjectByName('earth').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
// .onUpdate(() => {
|
||||
// this.scene.getObjectByName('earth-cloud').visible = false
|
||||
// this.scene.getObjectByName('globeAreaMark').visible = false
|
||||
// this.scene.getObjectByName('earthLine').visible = false
|
||||
// this.scene.getObjectByName('earth').material.map = this.chinaMapTexture
|
||||
this.scene.getObjectByName('chinaProvince').visible = true
|
||||
this.scene.getObjectByName('cs').visible = true
|
||||
this.scene.getObjectByName('cs').children.forEach(e => {
|
||||
e.visible = true
|
||||
})
|
||||
// })
|
||||
// const tweenL4 = new TWEEN.Tween(this.scene.getObjectByName('chinaProvince').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
// this.scene.getObjectByName('chinaProvince').children.forEach(ele => {
|
||||
// ele.children[0].material.color = new Three.Color(0x0a315ab8)
|
||||
// })
|
||||
const tweenL3 = new TWEEN.Tween(this.scene.getObjectByName('earth').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
.onUpdate(() => {
|
||||
this.scene.getObjectByName('earth-cloud').visible = false
|
||||
this.scene.getObjectByName('globeAreaMark').visible = false
|
||||
this.scene.getObjectByName('earthLine').visible = false
|
||||
this.scene.getObjectByName('earth').material.map = this.chinaMapTexture
|
||||
this.scene.getObjectByName('chinaProvince').visible = true
|
||||
this.scene.getObjectByName('cs').visible = true
|
||||
this.scene.getObjectByName('cs').children.forEach(e => {
|
||||
e.visible = true
|
||||
})
|
||||
})
|
||||
// const tweenL4 = new TWEEN.Tween(this.scene.getObjectByName('chinaProvince').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
|
||||
// this.scene.getObjectByName('chinaProvince').children.forEach(ele => {
|
||||
// ele.children[0].material.color = new Three.Color(0x0a315ab8)
|
||||
// })
|
||||
tweenL1.chain(tweenL2).start()
|
||||
// tweenL3.start()
|
||||
tweenL3.start()
|
||||
},
|
||||
renderChinaDetailData() {
|
||||
// const groupLines = new Three.Group()
|
||||
// groupLines.name = 'earthLine'
|
||||
// // const center = {
|
||||
// // name: '鹏城云脑',
|
||||
// // longitude: 114.057868,
|
||||
// // latitude: 22.543099
|
||||
// // }
|
||||
// this.flyLineArray = []
|
||||
// this.mapMarks.forEach(r => {
|
||||
// var i = this.lineConnect([this.center.longitude, this.center.latitude], [r.longitude, r.latitude])
|
||||
// groupLines.add(i)
|
||||
// })
|
||||
// this.flyLineAnimate()
|
||||
// this.scene.add(groupLines)
|
||||
// this.setAreaMark()
|
||||
const groupLines = new Three.Group()
|
||||
groupLines.name = 'earthLine'
|
||||
// const center = {
|
||||
// name: '鹏城云脑',
|
||||
// longitude: 114.057868,
|
||||
// latitude: 22.543099
|
||||
// }
|
||||
this.flyLineArray = []
|
||||
this.mapMarks.forEach(r => {
|
||||
var i = this.lineConnect([this.center.longitude, this.center.latitude], [r.longitude, r.latitude])
|
||||
groupLines.add(i)
|
||||
})
|
||||
this.flyLineAnimate()
|
||||
this.scene.add(groupLines)
|
||||
this.setAreaMark()
|
||||
this.setDsxs(this.dsxs)
|
||||
this.setCpPoint('cs')
|
||||
this.setPointLine()
|
||||
|
|
@ -316,6 +316,23 @@ export default {
|
|||
this.scene.getObjectByName('pointText').visible = false
|
||||
this.scene.getObjectByName('pointLine').visible = false
|
||||
},
|
||||
// globalLineConnect(posStart, posEnd) {
|
||||
// const p1 = getPosition(posStart[0] + 90, posStart[1], 100.01)
|
||||
// const p2 = getPosition(posEnd[0] + 90, posEnd[1], 100.01)
|
||||
// const pmiddle = getPosition((posStart[0] + posEnd[0]) / 2 + 90, (posStart[1] + posEnd[1]) / 2, 150)
|
||||
// const pmiddle1 = getPosition((posStart[0] + (posStart[0] + posEnd[0]) / 2) / 2 + 90, (posStart[1] + (posStart[1] + posEnd[1]) / 2) / 2, 140)
|
||||
// const pmiddle2 = getPosition((posEnd[0] + (posStart[0] + posEnd[0]) / 2) / 2 + 90, (posEnd[1] + (posStart[1] + posEnd[1]) / 2) / 2, 140)
|
||||
|
||||
// var points = [
|
||||
// new Three.Vector3(p1.x, p1.y, p1.z),
|
||||
// new Three.Vector3(pmiddle1.x, pmiddle1.y, pmiddle1.z),
|
||||
// new Three.Vector3(pmiddle.x, pmiddle.y, pmiddle.z),
|
||||
// new Three.Vector3(pmiddle2.x, pmiddle2.y, pmiddle2.z),
|
||||
// new Three.Vector3(p2.x, p2.y, p2.z)
|
||||
// ]
|
||||
// return createFlyCurve(points, false)
|
||||
// // this.scene.add(flyLine)
|
||||
// },
|
||||
setCpPoint(type) {
|
||||
const mark = new Three.Group()
|
||||
mark.name = type
|
||||
|
|
@ -666,9 +683,9 @@ export default {
|
|||
this.scene.position.y -= 20
|
||||
},
|
||||
initCamera() {
|
||||
var s = 48 // 三维场景显示范围控制系数，系数越大，显示的范围越大
|
||||
var s = 140 // 三维场景显示范围控制系数，系数越大，显示的范围越大
|
||||
this.camera = new Three.OrthographicCamera(-s * this.k, s * this.k, s, -s, 1, 2000)
|
||||
this.camera.position.set(-400, 530, 1700)
|
||||
this.camera.position.set(200, 200, 1900)
|
||||
this.camera.lookAt(this.scene.position)
|
||||
},
|
||||
initLight() {
|
||||
|
|
@ -700,30 +717,30 @@ export default {
|
|||
var geometry = new Three.SphereGeometry(100, 40, 40) // 创建一个球体几何对象
|
||||
// 设置纹理贴图
|
||||
var textureLoader = new Three.TextureLoader()
|
||||
// this.worldMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg')
|
||||
// this.chinaMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg')
|
||||
textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg', (texture) => {
|
||||
this.worldMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg')
|
||||
this.chinaMapTexture = textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/china_under.jpg')
|
||||
textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth.jpg', (texture) => {
|
||||
var material = new Three.MeshLambertMaterial({
|
||||
color: 0x0a263e,
|
||||
// color: 0x0a263e,
|
||||
transparent: true,
|
||||
opacity: 0.96,
|
||||
map: texture
|
||||
})
|
||||
// var geometry2 = new Three.SphereGeometry(101, 40, 40)
|
||||
// var material2 = new Three.MeshLambertMaterial({
|
||||
// transparent: true,
|
||||
// opacity: 0.1,
|
||||
// // blending: Three.AdditiveBlending,
|
||||
// map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth_cloud.png')
|
||||
// })
|
||||
var material2 = new Three.MeshLambertMaterial({
|
||||
transparent: true,
|
||||
opacity: 0.1,
|
||||
// blending: Three.AdditiveBlending,
|
||||
map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/earth_cloud.png')
|
||||
})
|
||||
this.mesh = new Three.Mesh(geometry, material)
|
||||
this.mesh.name = 'earth'
|
||||
// this.mesh.visible = false
|
||||
// this.mesh2 = new Three.Mesh(geometry, material2)
|
||||
// this.mesh2.name = 'earth-cloud'
|
||||
this.mesh2 = new Three.Mesh(geometry, material2)
|
||||
this.mesh2.name = 'earth-cloud'
|
||||
this.scene.add(this.mesh) // 5地球
|
||||
// this.scene.add(this.mesh2) // 6
|
||||
// this.setMark(this.mapMarks.concat(this.center)) // 打点
|
||||
this.scene.add(this.mesh2) // 6
|
||||
this.setMark(this.mapMarks.concat(this.center)) // 打点
|
||||
// this.setAreaMark(this.area)
|
||||
// this.scene.rotation.z = Math.PI / 10
|
||||
this.scene.rotation.x = Math.PI / 20
|
||||
|
|
@ -901,7 +918,6 @@ export default {
|
|||
window.addEventListener('webglcontextlost', function(event) {
|
||||
event.preventDefault()
|
||||
}, false)
|
||||
this.toChina()
|
||||
},
|
||||
onDocumentHover(e) {
|
||||
if (this.globe) { return false }
|
||||
|
|
@ -1052,25 +1068,25 @@ export default {
|
|||
this.clock = new Three.Clock()// 用于更新轨道控制器
|
||||
// const delta = this.clock.getDelta()
|
||||
// 定点光圈动画
|
||||
// if (this.scene && this.scene.getObjectByName('globePoint') && this.scene.getObjectByName('globePoint').children.length) {
|
||||
// this.scene.getObjectByName('globePoint').children.forEach((mesh) => {
|
||||
// this.mshs += 0.001
|
||||
// mesh.scale.set(this.mshs, this.mshs, 2 * this.mshs)
|
||||
// if (this.mshs <= 1.2) {
|
||||
// // mesh._s=1，透明度=0 mesh._s=1.5，透明度=1
|
||||
// mesh.material.opacity = (this.mshs - 0.8) * 2
|
||||
// } else if (this.mshs > 1.2 && this.mshs <= 1.8) {
|
||||
// // mesh._s=1.5，透明度=1 mesh._s=2，透明度=0
|
||||
// mesh.material.opacity = 1 - (this.mshs - 1.2) * 2
|
||||
// } else {
|
||||
// this.mshs = 0.8
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// // 小卫星飞行轨道动画
|
||||
// for (let i = 0; i < this.satellitesArr.length; i++) {
|
||||
// this.satellitesArr[i].satellite.rotation.z -= this.satellitesArr[i].speed
|
||||
// }
|
||||
if (this.scene && this.scene.getObjectByName('globePoint') && this.scene.getObjectByName('globePoint').children.length) {
|
||||
this.scene.getObjectByName('globePoint').children.forEach((mesh) => {
|
||||
this.mshs += 0.001
|
||||
mesh.scale.set(this.mshs, this.mshs, 2 * this.mshs)
|
||||
if (this.mshs <= 1.2) {
|
||||
// mesh._s=1，透明度=0 mesh._s=1.5，透明度=1
|
||||
mesh.material.opacity = (this.mshs - 0.8) * 2
|
||||
} else if (this.mshs > 1.2 && this.mshs <= 1.8) {
|
||||
// mesh._s=1.5，透明度=1 mesh._s=2，透明度=0
|
||||
mesh.material.opacity = 1 - (this.mshs - 1.2) * 2
|
||||
} else {
|
||||
this.mshs = 0.8
|
||||
}
|
||||
})
|
||||
}
|
||||
// 小卫星飞行轨道动画
|
||||
for (let i = 0; i < this.satellitesArr.length; i++) {
|
||||
this.satellitesArr[i].satellite.rotation.z -= this.satellitesArr[i].speed
|
||||
}
|
||||
this.render()
|
||||
this.orbitControls.update()
|
||||
this.aniId = requestAnimationFrame(this.animate)
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
<el-button @click="clickback()">返回</el-button>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="canvasBox">
|
||||
<canvas id="container" />
|
||||
</div>
|
||||
<canvas id="container" />
|
||||
</div>
|
||||
<div class="center">
|
||||
<el-button :class="activeTab === 'ys' ? 'active':''" @click="filterData('ys')"><div>数算中心 {{ count.ys }}</div></el-button>
|
||||
<el-button :class="activeTab === 'zs' ? 'active':''" @click="filterData('zs')"><div>智算中心 {{ count.zs }}</div></el-button>
|
||||
<el-button :class="activeTab === 'cs' ? 'active':''" @click="filterData('cs')"><div>超算中心 {{ count.cs }}</div></el-button>
|
||||
</div>
|
||||
<div class="spin">
|
||||
<div class="circle circle1">
|
||||
|
|
@ -55,7 +58,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedCity: '',
|
||||
count: { ys: 0, zs: 0, cs: 0 },
|
||||
allJSON: {
|
||||
guangdongJson,
|
||||
chuanyuJson,
|
||||
|
|
@ -63,16 +66,12 @@ export default {
|
|||
guizhouJson, jingjinjiJson, neimengguJson, ningxiaJson, changsanjiaoJson,
|
||||
guangdongOutline, hunanJson, hunanOutline
|
||||
},
|
||||
currentIndex: 0,
|
||||
interval: undefined,
|
||||
img: undefined,
|
||||
// yscount: 0,
|
||||
// zscount: 0,
|
||||
// cscount: 0,
|
||||
activeTab: '',
|
||||
scale: 1,
|
||||
geoCenter: {},
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
eventType: '',
|
||||
cursorFlag: false,
|
||||
mapMap: {
|
||||
1: 'ningxia',
|
||||
2: 'neimenggu',
|
||||
|
|
@ -112,99 +111,59 @@ export default {
|
|||
mapType(val) {
|
||||
if (val) {
|
||||
this.getBoxArea()
|
||||
this.drawMap()
|
||||
this.initMap()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getBoxArea()
|
||||
this.$nextTick(() => {
|
||||
this.img = new Image()
|
||||
this.img.src = process.env.VUE_APP_PUBLIC_SOURCE_API + '/click-point.svg'
|
||||
this.img.addEventListener('load', () => {
|
||||
this.setDataRoll()
|
||||
})
|
||||
const canvas = document.querySelector('#container')
|
||||
|
||||
// 鼠标移动事件
|
||||
canvas.addEventListener('mousemove', (event) => {
|
||||
this.offsetX = event.offsetX / 0.55
|
||||
this.offsetY = event.offsetY / 0.65
|
||||
this.eventType = 'mousemove'
|
||||
this.drawMap()
|
||||
})
|
||||
|
||||
// 鼠标点击事件
|
||||
canvas.addEventListener('click', (event) => {
|
||||
this.offsetX = event.offsetX / 0.55
|
||||
this.offsetY = event.offsetY / 0.65
|
||||
this.eventType = 'click'
|
||||
clearInterval(this.interval)
|
||||
this.drawMap()
|
||||
})
|
||||
})
|
||||
this.initOutline()
|
||||
this.initMap()
|
||||
this.setPoint()
|
||||
},
|
||||
methods: {
|
||||
setDataRoll() {
|
||||
clearInterval(this.interval)
|
||||
this.interval = setInterval(() => {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.cluster.length// 更新当前索引
|
||||
this.drawMap()
|
||||
}, 4000)
|
||||
},
|
||||
clickback() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
filterData(data) {
|
||||
this.selectedCity = data
|
||||
if (data === '') {
|
||||
this.setDataRoll()
|
||||
}
|
||||
this.$emit('selectedCity', data)
|
||||
},
|
||||
drawMap() {
|
||||
try {
|
||||
const canvas = document.querySelector('#container')
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
this.initOutline()
|
||||
this.initMap()
|
||||
this.setPoint()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
filterData(type) {
|
||||
console.log(type)
|
||||
},
|
||||
setPoint() {
|
||||
const canvas = document.querySelector('#container')
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.beginPath()
|
||||
this.cluster.forEach((e, i) => {
|
||||
const position = this.toScreenPosition(e.longitude, e.latitude)
|
||||
if (this.currentIndex === i) {
|
||||
ctx.drawImage(this.img, position.x - 40, position.y - 55, 80, 80)
|
||||
ctx.fillStyle = 'rgba(255, 197, 39, 1)'
|
||||
ctx.font = '30px PangMenZhengDao'
|
||||
ctx.fillText(e.name, position.x - e.name.length / 2 * 35, position.y - 55)
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
|
||||
const txtlength = e.name.length > e.address.length ? e.name.length : e.address.length
|
||||
ctx.fillRect(position.x + 20, position.y + 5, txtlength * 27, 90)
|
||||
ctx.strokeStyle = '#3EDFFC'
|
||||
ctx.strokeRect(position.x + 20, position.y + 5, txtlength * 27, 90)
|
||||
ctx.fillStyle = '#FFFFFF'
|
||||
ctx.font = '20px Arial'
|
||||
ctx.fillText('名称：' + e.name, position.x + 20 + 20, position.y + 5 + 40)
|
||||
ctx.fillText('地址：' + e.address || '-', position.x + 20 + 20, position.y + 5 + 70)
|
||||
} else {
|
||||
ctx.beginPath()
|
||||
ctx.arc(position.x, position.y, 5, 0, Math.PI * 2) // 画一个半径为5的圆
|
||||
ctx.fillStyle = '#ffffff' // 设置填充颜色
|
||||
ctx.fill()
|
||||
ctx.closePath()
|
||||
var img = new Image() // 创建一个新的图像对象
|
||||
img.src = process.env.VUE_APP_PUBLIC_SOURCE_API + '/click-point.svg' // 设置图像源
|
||||
img.addEventListener('load', () => {
|
||||
// 将图像绘制到Canvas上
|
||||
const canvas = document.querySelector('#container')
|
||||
const ctx = canvas.getContext('2d')
|
||||
const map = {
|
||||
'cloud': 'ys',
|
||||
'ai': 'zs',
|
||||
'hpc': 'cs'
|
||||
}
|
||||
if (this.cluster.length) {
|
||||
this.cluster.forEach(e => {
|
||||
const position = this.toScreenPosition(e.longitude, e.latitude)
|
||||
// e.type
|
||||
this.count[map[e.type || 'hpc']]++
|
||||
ctx.drawImage(img, position.x - 50, position.y - 55, 80, 80)
|
||||
ctx.fillStyle = 'rgba(255, 197, 39, 1)' // 设置填充颜色为紫色
|
||||
ctx.font = '30px PangMenZhengDao' // 设置字体
|
||||
ctx.fillText(e.name, position.x - e.name.length / 2 * 35, position.y - 55)
|
||||
})
|
||||
} else {
|
||||
const position = this.toScreenPosition(113, 28)
|
||||
ctx.drawImage(img, position.x - 50, position.y - 55, 80, 80)
|
||||
// ctx.beginPath()
|
||||
// ctx.moveTo(position.x - 50, position.y + 20)
|
||||
ctx.fillStyle = 'rgba(255, 197, 39, 1)' // 设置填充颜色为紫色
|
||||
ctx.font = '30px PangMenZhengDao' // 设置字体
|
||||
ctx.fillText('长沙', position.x - 40, position.y - 55)
|
||||
}
|
||||
// ctx.fillStyle = 'red'
|
||||
// ctx.beginPath()
|
||||
// ctx.arc(x, y, r, 0, 2 * Math.PI)
|
||||
// ctx.fill()// x、y是图像在Canvas上的位置，w、h是图像的宽度和高度
|
||||
})
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
},
|
||||
getBoxArea() {
|
||||
const canvasW = window.innerWidth
|
||||
|
|
@ -214,6 +173,7 @@ export default {
|
|||
if (item.geometry.type === 'Polygon') {
|
||||
item.geometry.coordinates = [item.geometry.coordinates]
|
||||
}
|
||||
// 取四个方向的极值
|
||||
item.geometry.coordinates.forEach(area => {
|
||||
area[0].forEach(elem => {
|
||||
if (elem[0] < W) {
|
||||
|
|
@ -231,17 +191,34 @@ export default {
|
|||
})
|
||||
})
|
||||
})
|
||||
var wScale = canvasW / Math.abs(E - W)
|
||||
var hScale = canvasH / Math.abs(N - S)
|
||||
this.scale = (wScale > hScale ? hScale : wScale) * 0.9
|
||||
// 计算包围盒的宽高
|
||||
var wScale = canvasW / Math.abs(E - W) - 20
|
||||
var hScale = canvasH / Math.abs(N - S) - 20
|
||||
// const width = Math.abs(E - W)
|
||||
// const height = Math.abs(N - S)
|
||||
// const wScale = canvasW / width / 3
|
||||
// const hScale = canvasH / height / 3
|
||||
// 计算地图缩放系数
|
||||
this.scale = wScale > hScale ? hScale : wScale
|
||||
// 获取包围盒中心经纬度坐标
|
||||
// this.geoCenterX = (E + W) / 2
|
||||
// this.geoCenterY = (N + S) / 2
|
||||
this.geoCenter = {
|
||||
W: W,
|
||||
N: N,
|
||||
xoffset: canvasW / 2 - Math.abs(E - W) / 2 * this.scale,
|
||||
yoffset: canvasH / 2 - Math.abs(N - S) / 2 * this.scale
|
||||
}
|
||||
// this.geoCenterY = S
|
||||
// console.log({
|
||||
// xoffset: width / 2.0 - width / 2 * this.scale,
|
||||
// yoffset: height / 2.0 - height / 2 * this.scale
|
||||
// })
|
||||
},
|
||||
toScreenPosition(longitude, latitude) {
|
||||
// var xoffset=width/2.0-width/2*scale
|
||||
// var yoffset=height/2.0-height/2*scale
|
||||
|
||||
return {
|
||||
x: (longitude - this.geoCenter.W) * this.scale + this.geoCenter.xoffset,
|
||||
y: (this.geoCenter.N - latitude) * this.scale + this.geoCenter.yoffset
|
||||
|
|
@ -250,53 +227,41 @@ export default {
|
|||
initMap() {
|
||||
const canvas = document.querySelector('#container')
|
||||
const ctx = canvas.getContext('2d')
|
||||
this.cursorFlag = false
|
||||
ctx.beginPath()
|
||||
ctx.strokeStyle = '#3EDFFC'
|
||||
ctx.lineWidth = 1
|
||||
|
||||
this.allJSON[this.mapMap[this.mapType] + 'Json'].features.forEach(elem => {
|
||||
const coordinates = elem.geometry.coordinates
|
||||
// const centerX = canvasW / 2
|
||||
// const centerY = canvasH / 2
|
||||
ctx.save()
|
||||
// ctx.beginPath()
|
||||
// ctx.translate(centerX, centerY)
|
||||
coordinates.forEach(multiPolygon => {
|
||||
multiPolygon.forEach(polygon => {
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
// ctx.translate(0, 0)
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
// console.log(polygon[i])
|
||||
const position = this.toScreenPosition(polygon[i][0], polygon[i][1])
|
||||
// console.log(position)
|
||||
if (i === 0) {
|
||||
ctx.moveTo(position.x, position.y - 5)
|
||||
} else {
|
||||
ctx.lineTo(position.x, position.y - 5)
|
||||
}
|
||||
}
|
||||
ctx.closePath()
|
||||
ctx.strokeStyle = '#34CEE9'
|
||||
ctx.lineWidth = 1
|
||||
if (ctx.isPointInPath(this.offsetX, this.offsetY)) {
|
||||
this.cursorFlag = true
|
||||
ctx.fillStyle = '#a2f7ff'
|
||||
if (this.eventType === 'click') {
|
||||
this.filterData(elem.properties.name)
|
||||
// 输出市级名称
|
||||
}
|
||||
} else {
|
||||
if (this.eventType === 'mousemove' && this.selectedCity === '') ctx.fillStyle = 'transparent'
|
||||
}
|
||||
if (this.selectedCity === elem.properties.name) ctx.fillStyle = '#00eaff'
|
||||
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
})
|
||||
})
|
||||
})
|
||||
ctx.closePath()
|
||||
var g = ctx.createRadialGradient(700, 600, 50, 1000, 600, 600)
|
||||
g.addColorStop(0, '#29a0ee')
|
||||
g.addColorStop(1, '#0b4eaf')
|
||||
|
||||
if (this.cursorFlag) {
|
||||
canvas.style.cursor = 'pointer'
|
||||
} else {
|
||||
canvas.style.cursor = 'default'
|
||||
}
|
||||
ctx.fillStyle = g
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
},
|
||||
initOutline() {
|
||||
const canvas = document.querySelector('#container')
|
||||
|
|
@ -315,7 +280,9 @@ export default {
|
|||
coordinates.forEach(multiPolygon => {
|
||||
multiPolygon.forEach(polygon => {
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
// console.log(polygon[i])
|
||||
const position = this.toScreenPosition(polygon[i][0], polygon[i][1])
|
||||
// console.log(position)
|
||||
if (i === 0) {
|
||||
ctx.moveTo(position.x, position.y + 5)
|
||||
} else {
|
||||
|
|
@ -326,12 +293,6 @@ export default {
|
|||
})
|
||||
})
|
||||
ctx.closePath()
|
||||
if (!ctx.isPointInPath(this.offsetX, this.offsetY)) {
|
||||
if (this.eventType === 'click') {
|
||||
this.filterData('')
|
||||
// 输出市级名称
|
||||
}
|
||||
}
|
||||
ctx.fillStyle = '#3edffc'
|
||||
var grd = ctx.createLinearGradient(0, 0, 1500, 0)
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
|
|
@ -346,32 +307,6 @@ export default {
|
|||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
|
||||
ctx.beginPath()
|
||||
this.allJSON[this.mapMap[this.mapType] + 'Outline'].features.forEach(elem => {
|
||||
const coordinates = elem.geometry.coordinates
|
||||
ctx.save()
|
||||
coordinates.forEach(multiPolygon => {
|
||||
multiPolygon.forEach(polygon => {
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
const position = this.toScreenPosition(polygon[i][0], polygon[i][1])
|
||||
if (i === 0) {
|
||||
ctx.moveTo(position.x, position.y - 5)
|
||||
} else {
|
||||
ctx.lineTo(position.x, position.y - 5)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
ctx.closePath()
|
||||
var g = ctx.createRadialGradient(700, 600, 50, 1000, 600, 600)
|
||||
g.addColorStop(0, '#29a0ee')
|
||||
g.addColorStop(1, '#0b4eaf')
|
||||
ctx.fillStyle = g
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -461,11 +396,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.canvasBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#container {
|
||||
width: 55vw;
|
||||
height: 65vh;
|
||||
|
|
|
|||
Loading…
Reference in New Issue