首页 新闻 搜索 专区 学院

vue使用leaflet-velocity无法渲染风场图 地图也没加载出来

0
悬赏园豆:100 [待解决问题]

下面是组件代码 需求用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>

Limboss的主页 Limboss | 初学一级 | 园豆:102
提问于:2020-07-16 16:53
< >
分享
所有回答(1)
0

请问问题解决了吗?

jkadmin1 | 园豆:202 (菜鸟二级) | 2020-11-04 14:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册