<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: [],
|
weidu: 120.988275,
|
jingdu: 31.431279,
|
latlng: [
|
{ lat: 31.431279, lng: 120.988275 },
|
{ lat: 23.138604, lng: 113.306835 },
|
{ lat: 23.138535, lng: 113.305821 }
|
]
|
}
|
},
|
methods: {
|
initMap () {
|
let map = L.map('mapContent', {
|
minZoom: 2,
|
maxZoom: 18,
|
center: [this.jingdu, this.weidu],
|
zoom: 15,
|
zoomControl: false,
|
attributionControl: false,
|
crs: L.CRS.EPSG3857
|
})
|
this.map = map // data上需要挂载
|
window.map = map
|
L.tileLayer('http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}').addTo(map)
|
// 添加多个标记
|
var group = L.layerGroup().addTo(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]
|
})
|
|
L.marker([lat, lng], {
|
icon: blueIcon
|
}).addTo(group).bindPopup('我是第' + i + '个marker')
|
}
|
// L.marker([this.jingdu, this.weidu]).addTo(map).bindPopup('当前坐标<br>' + '经度：' + this.jingdu + '<br>' + '纬度：' + this.weidu)
|
}
|
},
|
created () {
|
// var hostAndPort = '192.168.1.106:8080'
|
var ws
|
if (typeof (WebSocket) === 'undefined') {
|
alert('您的浏览器不支持WebSocket')
|
} else {
|
ws = new WebSocket('ws://192.168.1.106:8080/screen/webSocketNew1/' + 1)
|
ws.onopen = function () {
|
}
|
|
// 获得消息事件
|
ws.onmessage = function (msg) {
|
// console.log(msg)
|
// for (let i = 0; i < msg.length; i++) {
|
console.log(JSON.parse(msg.data))
|
var velocityLayer = L.velocityLayer({
|
displayValues: true, // 是否显示当前鼠标移动位置，风场信息
|
displayOptions: {// 显示信息配置
|
velocityType: 'Global Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: JSON.parse(msg.data), // 数据 格式可参照
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 15, // 粒子最大速度（ m/s ）
|
velocityScale: 0.01, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15 // 每秒所需的帧数
|
})
|
velocityLayer.addTo(map)// 添加到图上
|
// }
|
}
|
// window.onbeforeunload = function (e) {
|
// var e = window.event || e
|
|
// e.returnValue = ('确定离开当前页面吗？')
|
// ws.onclose = function () {
|
// }
|
// alert(1)
|
// }
|
// 关闭事件
|
/* ws.onclose = function () {
|
}; */
|
// 发生了错误事件
|
ws.onerror = function (error) {
|
console.log(error)
|
}
|
}
|
|
// $.getJSON('http://192.168.1.106:8080/screen/windAndDevbiceData', function (data) {
|
// console.log(111111111111111111111111)
|
// 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[i], // 数据 格式可参照
|
// // 以下为控制参数，后面为默认值
|
// minVelocity: 0, // 粒子最小速度（ m/s ）
|
// maxVelocity: 15, // 粒子最大速度（ m/s ）
|
// velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
// particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
// lineWidth: 1, // 绘制粒子的线宽
|
// particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
// frameRate: 15 // 每秒所需的帧数
|
// })
|
// velocityLayer.addTo(map)// 添加到图上
|
// }
|
// })
|
},
|
mounted () {
|
this.initMap()
|
}
|
}
|
</script>
|
|
<style>
|
html,
|
body,
|
#mapContent {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
