<template>
<div class="panel-container">
<div class="mapBox" id="leaflet-map"></div>
<div class="select-content">
<el-checkbox-group v-model="checked" @change="handleChecked" style="width:500px;padding-top: 5px;background-color: #ffffffee;padding-left: 20px;margin-right: 10px">
<el-checkbox v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
<el-select v-model="planTime" placeholder="算法结果：时间选择" size="small" style="margin-right: 10px" v-show="checked.indexOf('算法结果')!==-1" @change="initresult(true)">
<el-option
v-for="item in resultList"
:key="item.time"
:label="item.time"
:value="item.time">
</el-option>
</el-select>
<el-select v-model="taskId" placeholder="历史轨迹：任务选择" size="small" v-show="checked.indexOf('历史轨迹')!==-1" @change="initroute(true)">
<el-option
v-for="item in taskList"
:key="item.id"
:label="item.createTime"
:value="item.id">
</el-option>
</el-select>
<el-date-picker
v-show="checked.indexOf('历史轨迹')!==-1"
v-model="timeRange"
@change="initroute(true)"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="轨迹开始日期"
end-placeholder="轨迹结束日期"
size="small"
style="margin: 0px 10px">
</el-date-picker>
</div>
</div>
</template>
<script>
import { getRobotList } from '@/api/robot'
import { getTyphoonList } from '@/api/typhoon'
import { getShipShipsInCircle } from '@/api/ship'
import { getCurrentPlan,getTaskTimeList,getTaskList } from '@/api/task'
import { getRobotHistory } from '@/api/robot'
import Leaflet from "leaflet";
import 'leaflet/dist/leaflet.css'
export default {
name: 'LeafletMap',
components: {
Leaflet
},
data() {
return {
center: [30, 125],
checked: ['台风数据'],
options: ['AIS船只', '台风数据', '算法结果', '历史轨迹'],
route:null,
result:null,
wind:null,
ship:null,
robot:null,
map: null,
reset_btn: null,
robotList:[],
taskList:[],
resultList:[],
timeRange:[],
planTime:'',
taskId:''
};
},
mounted() {
this.initMap();
this.initOption()
},
methods: {
handleChecked(val){
this.taskId = ''
this.planTime = ''
this.timeRange = []
this.initwind(val.indexOf('台风数据')!==-1)
this.initais(val.indexOf('AIS船只')!==-1)
this.initroute(val.indexOf('历史轨迹')!==-1)
this.initresult(val.indexOf('算法结果')!==-1)
},
initOption(){
getTaskList().then(res => {
if (res.code === 200) {
this.taskList = res.data
}
})
getTaskTimeList().then(res => {
if (res.code === 200) {
this.resultList = res.data
}
})
},
initroute(isShow){
if(this.route!==null){
this.route.clearLayers()
}
if(!isShow) return
let params ={
taskId:this.taskId,
startDate:'',
endDate:''
}
if (this.timeRange && this.timeRange.length > 0) {
params.startDate = this.timeRange[0]
params.endDate = this.timeRange[1]
}
let myStyle = {
'color': '#409eff',
'weight': 4.5,
'opacity': 0.7
}
getRobotHistory(params).then(res => {
if (res.code === 200) {
let layers=[]
for (const robot of res.data) {
let pathlist=[]
for(const point of robot){
pathlist.push( [point.lat, point.lng])
var myIcon = L.divIcon({
html: '<div style="font-size: 15px;font-weight: bold;padding-top: 2px;border-radius: 50%;text-align:center;background-color: #409eff99;color: white"> ' + point.robotId + '</div>',
className: '',
iconSize:[25,25]
});
let marker=L.marker([point.lat,point.lng], { icon: myIcon })
layers.push(marker)
}
let line = L.polyline(pathlist, myStyle)
layers.push(line)
}
this.route = L.layerGroup(layers)
this.map.addLayer(this.route)
}
})
},
initresult(isShow){
if(this.result!==null){
this.result.clearLayers()
}
if(!isShow) return
let params ={
planTime:this.planTime
}
let myStyle = {
'color': '#50c55c',
'weight': 4.5,
'opacity': 0.7
}
let myStyle1 = {
'color': '#f98e11',
'weight': 4.5,
'opacity': 0.7
}
getCurrentPlan(params).then(res => {
if (res.code === 200) {
let layers=[]
let pathlist=[]
// 规划区域 0：多边形 1：圆形
if(res.data.regionResult.contour==='0'){
for(const point of res.data.regionResult.regionPoints){
pathlist.push( [point.lat, point.lng])
}
let area = L.polygon(pathlist, myStyle1)
layers.push(area)
} else if(res.data.regionResult.contour==='1'){
let area = L.circle([res.data.regionResult.regionPoints[0].lat,res.data.regionResult.regionPoints[0].lng], {
color: '#f98e11',
fillColor: '#f98e11',
fillOpacity: 0.7,
radius: res.data.regionResult.regionRadius*1000
})
layers.push(area)
}
pathlist=[]
//机器规划点
let arr = res.data.regionResult.robotIds.split(',')
for(let i=0;i< res.data.regionResult.robotTargets.length;i++){
let point = res.data.regionResult.robotTargets[i]
pathlist.push( [point.lat, point.lng])
var myIcon = L.divIcon({
html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #f98e1199;color: white"> ' + arr[i] + '</div>',
className: '',
iconSize:[25,25]
});
let str = `
<div style="font-size: 15px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">区域规划${arr[i]}号机器人</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
</div>`
let popup = L.popup().setContent(str)
let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
layers.push(marker)
}
// 规划路线
console.log( res.data.routeResult )
for (const robot of res.data.routeResult) {
pathlist=[]
if(robot.routeModel==='') continue
for(const point of robot.routeModel.robotRoutes){
pathlist.push( [point.lat, point.lng])
var myIcon = L.divIcon({
html: '<div style="font-size: 15px;font-weight: bold;border-radius: 50%;text-align:center;background-color: #50c55c99;color: white"> ' + robot.robotId + '</div>',
className: '',
iconSize:[25,25]
});
let str = `
<div style="font-size: 15px;width:300px;">
<div style="font-weight: bold;padding-bottom: 10px;font-size: 16px; ">路线规划${ robot.robotId}号机器人</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">经纬度：</label>${point.lng},${point.lat}</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">深度：</label>${point.depth}m</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">航向角：</label>${point.headingAngle}°</div>
<div style="padding-bottom: 3px"><label style="padding-right: 5px">俯仰角：</label>${point.pitchAngle}°</div>
</div>`
let popup = L.popup().setContent(str)
let marker=L.marker([point.lat,point.lng], { icon: myIcon }).bindPopup(popup)
layers.push(marker)
}
let line = L.polyline(pathlist, myStyle)
layers.push(line)
}
this.result = L.layerGroup(layers)
this.map.addLayer(this.result)
}
})
},
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){
let layers=[]
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) {
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}m/s</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)
}
if(r=== this.robotList.length-1){
this.ship = L.layerGroup(layers)
this.map.addLayer(this.ship)
}
}
})
}
}
},
initMap() {
this.map = L.map('leaflet-map', {
crs: L.CRS.EPSG3857
});
// http://111.198.10.15:13003/cgi-bin/mapserv.exe?MAP=D:/ms4w/ms4w/apps/worldmap/world3857.map
this.map.setView(this.center, 2);
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,DEPARE1,LNDARE1,SBDARE1,RIVERS1,WRECKS1,OFSPLF1,UWTROC1',
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: 60px;
top: 0px;
height: 42px;
width: 1200px;
padding-top: 10px;
z-index: 1000;
display: flex;
}
</style>
