下面是组件代码 需求用vue实现风场图
<template>
<div id="mapContent" ref="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'
export default {
data () {
return {
map: null
}
},
methods: {
initMap () {
let map = L.map('mapContent', {
minZoom: 2,
maxZoom: 18,
center: [35.96022296929672, 103.97460937500001],
zoom: 5,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
this.map = map // data上需要挂载
window.map = map
let dtL = L.tileLayer('http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}')
dtL.addTo(map)
console.log(map)
console.log(this.map)
}
},
created () {
$.getJSON('../static/wind-global.json', function (data) {
var velocityLayer = L.velocityLayer({
displayValues: true, // 是否显示当前鼠标移动位置，风场信息
displayOptions: {// 显示信息配置
velocityType: 'Global Wind',
displayPosition: 'bottomleft',
displayEmptyString: 'No wind data'
},
data: this.map, // 数据 格式可参照
maxVelocity: 15
})

  velocityLayer.addTo(this.map)// 添加到图上
})

},
mounted () {
this.initMap()
}
}
</script>

<style>

</style>