<template>
|
<div id="mapContent"></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: []
|
}
|
},
|
methods: {
|
initMap () {
|
console.log(this.jingdu)
|
console.log(this.weidu)
|
let map = L.map('mapContent', {
|
minZoom: 2,
|
maxZoom: 18,
|
center: [this.weidu, this.jingdu],
|
zoom: 18,
|
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
|
}
|
},
|
created () {
|
$.getJSON('http://192.168.1.102:8080/screen/allDevice', (data) => {
|
console.log('设备坐标加载完成')
|
this.latlng = data.latlng
|
// console.log(this.latlng)
|
// console.log(data.latlng[1].monitorPointId)
|
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: markerIcon,
|
iconSize: [25, 41],
|
iconAnchor: [13, 21]
|
})
|
// 添加标记到地图
|
var marker = L.marker([lat, lng], {
|
icon: blueIcon
|
}).addTo(group)
|
// 给标记添加点击事件
|
marker.on('click', (e) => {
|
// console.log('公司ID' + data.latlng[i].monitorPointId)
|
// console.log(e)
|
// console.log(group)
|
map.eachLayer(function (layer) {
|
// map.overlayremove(layer)
|
// if (!layer._container && ('' + jQuery(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
// map.removeLayer(layer)
|
// layer.remove()
|
// }
|
if (layer._canvas) {
|
layer.remove()
|
}
|
})
|
// map.removeLayer(layer)
|
$.getJSON('http://192.168.1.102:8080/screen/windAndDeviceData', {'monitorPointId': data.latlng[i].monitorPointId}, function (data) {
|
// console.log(data)
|
// for (let i = 0; i < data.length; i++) {
|
// map.setData(data[0])
|
var velocityLayer = L.velocityLayer({
|
displayValues: true, // 是否显示当前鼠标移动位置，风场信息
|
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']
|
})
|
// console.log(velocityLayer)
|
// velocityLayer.setData(data[0])
|
velocityLayer.addTo(map)// 添加到图上
|
// console.log(map)
|
// }
|
})
|
// 先卸载之前加载的数据
|
// 如果api中的设备有公司code可以传送给后台请求公司的数据
|
})
|
}
|
})
|
|
$.getJSON('http://192.168.1.102:8080/screen/windAndDeviceData', {'monitorPointId': 539}, (data) => {
|
console.log('风场数据加载完成')
|
// console.log(data)
|
this.jingdu = data[1]
|
this.weidu = data[2]
|
this.initMap()
|
// for (let i = 0; i < data.length; i++) {
|
var velocityLayer = L.velocityLayer({
|
displayValues: true, // 是否显示当前鼠标移动位置，风场信息
|
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)// 添加到图上
|
// }
|
})
|
},
|
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%;
|
}
|
</style>
|
