<template>
|
<div id="mapContent">
|
<div class="noneData" v-if="noneData">当前区域设备没有风场</div>
|
</div>
|
</template>
|
|
<script>
|
import 'leaflet/dist/leaflet.css'
|
import 'leaflet-velocity/dist/leaflet-velocity.css'
|
import L from 'leaflet'
|
import 'leaflet-velocity/dist/leaflet-velocity'
|
import $ from 'jquery'
|
// import markerIcon from 'leaflet/dist/images/marker-icon.png'
|
// import iconShadow from 'leaflet/dist/images/marker-shadow.png'
|
|
export default {
|
data () {
|
return {
|
map: null,
|
code: [],
|
jingdu: 0,
|
weidu: 0,
|
latlng: [],
|
monitorPointId: 0,
|
noneData: false
|
}
|
},
|
methods: {
|
// 初始化地图容器
|
initMap () {
|
let map = L.map('mapContent', {
|
minZoom: 2,
|
maxZoom: 18,
|
center: [this.weidu, this.jingdu],
|
zoom: 17,
|
zoomControl: false,
|
attributionControl: false,
|
crs: L.CRS.EPSG3857
|
})
|
L.tileLayer('https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)
|
this.map = map // data上需要挂载
|
window.map = map
|
},
|
initData () {
|
// 请求更新风场数据
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': this.monitorPointId}, (data) => {
|
// 遍历所有图层
|
map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
layer.remove()
|
}
|
})
|
this.jingdu = data[1]
|
this.weidu = data[2]
|
// this.initMap()
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {// 显示信息配置
|
velocityType: 'Global Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: data[0], // 数据 格式可参照
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
|
})
|
velocityLayer.addTo(map)// 添加到图上
|
})
|
// 请求更新设备坐标
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/allDevice', (data) => {
|
console.log(data.latlng[0].state)
|
console.log('新风场数据加载完成')
|
this.latlng = data.latlng
|
var group = L.layerGroup().addTo(this.map)
|
for (let i = 0; i < this.latlng.length; i++) {
|
var lat = this.latlng[i].lat
|
var lng = this.latlng[i].lng
|
var blueIcon = L.icon({
|
iconUrl: '/static/icon/ico' + 0 + data.latlng[i].state + '.png',
|
// iconUrl: markerIcon,
|
iconSize: [45, 45],
|
iconAnchor: [13, 21]
|
})
|
// 添加标记到地图
|
var marker = L.marker([lat, lng], {
|
icon: blueIcon
|
}).addTo(group)
|
// 给标记添加点击事件
|
marker.on('click', (e) => {
|
this.noneData = false
|
// console.log('公司ID' + data.latlng[i].monitorPointId)
|
// 遍历所有图层
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (layer._canvas) {
|
layer.remove()
|
}
|
})
|
// 发送公司ID给API请求对应的风场数据
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': data.latlng[i].monitorPointId}, datas => {
|
this.monitorPointId = data.latlng[i].monitorPointId
|
console.log(data.latlng[i].monitorPointId)
|
console.log(datas)
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {// 显示信息配置
|
velocityType: 'Global Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: datas[0], // 数据 格式可参照
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
|
})
|
velocityLayer.addTo(this.map)// 添加到图上
|
})
|
})
|
}
|
})
|
console.log('更新数据')
|
}
|
},
|
created () {
|
this.monitorPointId = this.$route.query.monitorPointId
|
console.log(this.monitorPointId)
|
// 初始化风场数据
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': this.monitorPointId}, (data) => {
|
console.log(data[0][0].data.length === 0)
|
if (data[0][0].data.length === 0) {
|
this.noneData = true
|
}
|
this.jingdu = data[1]
|
this.weidu = data[2]
|
// 初始化地图容器
|
this.initMap()
|
// for (let i = 0; i < data.length; i++) {
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {// 显示信息配置
|
velocityType: 'Global Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: data[0], // 数据 格式可参照
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
|
})
|
velocityLayer.addTo(map)// 添加到图上
|
console.log('初始风场数据加载完成')
|
// }
|
})
|
// 请求设备坐标
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/allDevice', (data) => {
|
console.log(data)
|
console.log('新风场数据加载完成')
|
this.latlng = data.latlng
|
var group = L.layerGroup().addTo(this.map)
|
for (let i = 0; i < this.latlng.length; i++) {
|
var lat = this.latlng[i].lat
|
var lng = this.latlng[i].lng
|
var blueIcon = L.icon({
|
iconUrl: '/static/icon/ico' + 0 + data.latlng[i].state + '.png',
|
// iconUrl: markerIcon,
|
iconSize: [45, 45],
|
iconAnchor: [13, 21]
|
})
|
// 添加标记到地图
|
var marker = L.marker([lat, lng], {
|
icon: blueIcon
|
}).addTo(group)
|
// 给标记添加点击事件
|
marker.on('click', (e) => {
|
this.noneData = false
|
// console.log('公司ID' + data.latlng[i].monitorPointId)
|
// 遍历所有图层
|
map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (layer._canvas) {
|
layer.remove()
|
}
|
})
|
// 发送公司ID给API请求对应的风场数据
|
$.getJSON('http://wind2.7drlb.com/screen_api_v2/screen/windAndDeviceDataByArea', {'monitorPointId': data.latlng[i].monitorPointId}, datas => {
|
this.monitorPointId = data.latlng[i].monitorPointId
|
console.log(data.latlng[i].monitorPointId)
|
console.log(datas)
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {// 显示信息配置
|
velocityType: 'Global Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: datas[0], // 数据 格式可参照
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
|
})
|
velocityLayer.addTo(map)// 添加到图上
|
})
|
})
|
}
|
})
|
// 每60秒请求一次风场
|
setInterval(this.initData, 60000)
|
},
|
mounted () {
|
// 地图级别改变时发生
|
// map.on('zoomend', function () {
|
// console.log(map.getZoom())
|
// })
|
// // 拖动地图时发生
|
// map.on('moveend', function () {
|
// console.log(map.getBounds().getNorthWest())
|
// console.log(map.getBounds().getNorthEast())
|
// console.log(map.getBounds().getSouthWest())
|
// console.log(map.getBounds().getSouthEast())
|
// })
|
}
|
}
|
</script>
|
|
<style>
|
html,
|
body,
|
#mapContent {
|
width: 100%;
|
height: 100%;
|
}
|
.noneData{
|
position: absolute;
|
color: #000;
|
background: #fff;
|
z-index: 999;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%);
|
padding: 20px 50px;
|
/* opacity: 0.5; */
|
font-size: 28px;
|
/* border-radius: 10px; */
|
border:2px solid #FF7F50
|
}
|
</style>
|
