<template>
<div class="panel-container">
<div class="mapBox" id="leaflet-map"></div>
<div class="select-content">
<el-checkbox-group v-model="checked" @change="handleChecked">
<el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
import { getRobotList } from '@/api/robot'
import { getTyphoonList } from '@/api/typhoon'
import { getShipShipsInCircle } from '@/api/ship'
import Leaflet from "leaflet";
import 'leaflet/dist/leaflet.css'
export default {
name: 'LeafletMap',
components: {
Leaflet
},
data() {
return {
center: [30, 125],
checked: ['台风数据'],
options: ['算法结果', 'AIS船只', '台风数据', '历史轨迹'],
wind:null,
ship:null,
robot:null,
map: null,
reset_btn: null,
robotList:[]
};
},
mounted() {
this.initMap();
},
methods: {
handleChecked(val){
this.initwind(val.indexOf('台风数据')!==-1)
this.initais(val.indexOf('AIS船只')!==-1)
},
initrobot(){
let icon = L.icon({
iconUrl: require('@/assets/images/robot.png'),
iconSize: [20, 20]
})
if(this.robot!==null){
this.robot.clearLayers()
}
getRobotList().then(res => {
if (res.code === 200) {
let layers=[]
this.robotList = res.data
for (let i = 0; i < res.data.length; i++) {
const { robotId,lat,lng,instrumentE,navigateState,powerE,targetDistance} = res.data[i]
let str = `
<div style="font-size: 15px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${robotId}号机器人</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> 航行状态：</label>${navigateState}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">仪表电余量：</label>${instrumentE}%</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">动力电余量：</label>${powerE}%</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">目标距离：</label>${targetDistance}</div>
</div>`
let popup = L.popup().setContent(str)
let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
layers.push(marker)
}
this.robot = L.layerGroup(layers)
this.map.addLayer(this.robot)
}
})
},
initwind(isShow) {
let icon = L.icon({
iconUrl: require('@/assets/images/wind.png'),
iconSize: [20, 20]
})
if(this.wind!==null){
this.wind.clearLayers()
}
if(isShow){
getTyphoonList().then(res => {
if (res.code === 200) {
let layers=[]
for (let i = 0; i < res.data.length; i++) {
const { centerPressure, engName, moveDirection, moveSpeed, power,lat,lng, speed, radius10, radius7, time, typhoonType, name} = res.data[i]
let str = `
<div style="font-size: 15px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${engName}（${name}）</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> 台风中心气压：</label>${centerPressure}百帕</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">台风代号：</label>${engName}（${name}）</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">台风移动：</label>${moveDirection}方向${moveSpeed}公里/小时</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">风力：</label>${power}级</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">风速：</label>${speed}米/秒</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">10级风力影响半径：</label>${radius10}公里</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">7级风力影响半径：</label>${radius7}公里</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">数据更新时间：</label>${time}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">台风描述：</label>${typhoonType}</div>
</div>`
let popup = L.popup().setContent(str)
let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
layers.push(marker)
}
this.wind = L.layerGroup(layers)
this.map.addLayer(this.wind)
}
})
}
},
initais(isShow) {
let icon = L.icon({
iconUrl: require('@/assets/images/ship.png'),
iconSize: [30, 30]
})
if(this.ship!==null){
this.ship.clearLayers()
}
if(isShow){
for (let r = 0; r < this.robotList.length ;r++) {
let rgn = Number(this.robotList[r].lat).toFixed(5)*600000+','+Number(this.robotList[r].lng).toFixed(5)*600000+',80'
getShipShipsInCircle(rgn).then(res => {
if (res.code === 200) {
let layers=[]
for (let i = 0; i < res.data.length; i++) {
const { shipId,aisStatus,lng,lat,course,speed,heading,depth,imoNum,shipCallNum,shipType,shipLength,shipWidth,destination,expectTime,positionTime} = res.data[i]
let str = `
<div style="font-size: 15px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">${shipId}号船舶</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> ais状态：</label>${aisStatus}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${lng},${lat}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">航向：</label>${course}°</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">航速：</label>${speed}节</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">航艏向：</label>${heading}°</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">吃水深度：</label>${depth}m</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> Imo号：</label>${imoNum}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> 船舶呼号：</label>${shipCallNum}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px"> 船舶类型：</label>${shipType}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">船长宽：</label>${shipLength};${shipWidth}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">目的港：</label>${destination}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">预到时间：</label>${expectTime}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">定位时间：</label>${positionTime}</div>
</div>`
let popup = L.popup().setContent(str)
let marker = L.marker([lat, lng], { icon: icon }).bindPopup(popup)
layers.push(marker)
}
this.ship = L.layerGroup(layers)
this.map.addLayer(this.ship)
}
})
}
}
},
initMap() {
this.map = L.map('leaflet-map', {
crs: L.CRS.EPSG3857
});
this.map.setView(this.center, 7);
var myDemo = L.tileLayer.wms("http://127.0.0.1:85/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map", {
layers: 'DEPARE,LNDARE,SBDARE,RIVERS,WRECKS,OFSPLF,UWTROC',
format: 'image/png',
transparent: false,
crs: L.CRS.EPSG3857,
minZoom:4
});
myDemo.addTo(this.map);
this.initrobot()
this.initwind(true)
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.panel-container {
width: 100%;
height: 100%;
position:relative;
overflow: auto;
flex: 1;
}
.mapBox{
width: 100%;
position:absolute;
top: 0;
bottom:0;
overflow: hidden;
/*z-index: 9;*/
}
.select-content{
position:absolute;
left: 10px;
bottom: 10px;
height: 150px;
width: 150px;
background-color: #90939955;
padding-top: 20px;
padding-left: 20px;
z-index: 10000;
}
</style>
