nuxt使用antv-l7踩坑

nuxt.js 下使用 antv-l7 实在是有太多的坑了,官方文档也不是很全,只能不断摸索和尝试,下面我把这些坑记录下来,也许能帮到你。

这些解决方案不会是唯一解,也不见得是最优解,但至少解决了我的问题,而且还保留了代码的相对整洁和高效。如果你有更好的解决方案,欢迎留言;如果未来官方修复了这些问题,或者提供了更好的使用方法,那请忽略这篇文章。

nuxt 下只能通过 plugin 的方式引入 l7

不能直接用 import { Scene } from '@antv/l7' 这样的方法,在任何地方都不行,会出现 window undefined 的错误

比较隐蔽的情况是,访问 localhost:3000/ 等页面是正常的,然后通过点击菜单(即利用 Nuxt to 来完成跳转),那及时使用了 import 也一切正常,但,这种时候,这个页面是不能被刷新的,也不能直接访问,否则一样会出现 window undefined 的错误

解决方案就是和其他的 client only 组件一样,通过 plugin 的方式引入

plugins 目录下新建 l7.js

import Vue from 'vue'

const l7 = require('@antv/l7')
const l7maps = require('@antv/l7-maps')

Vue.prototype.$l7 = l7
Vue.prototype.$l7maps = l7maps

并在 nuxt.config 中设置为仅 client 引入插件

plugins: [
    '@/plugins/fontawesome',
    { src: '@/plugins/g2', ssr: false }, // antv-g2 也是一样
    { src: '@/plugins/l7', ssr: false },
  ],

使用时,利用 this.$l7 的方式使用

const { Scene, Popup } = this.$l7
const { GaodeMap, Mapbox } = this.$l7maps

地图不能重复渲染,会卡死

这个坑出现的原因还没有找到,怀疑是 antv-l7 这个库在实现时有问题,也可能是与 nuxt 的某种机制冲突,因为好像单独用的时候是没问题的

问题表现如下:假设有一个页面,叫做 map,其中有 2 个地图,中国地图和世界地图,这两个地图显示在不同的 <div id= 中,利用一个 Switch 按钮切换

会出现的问题是,首次进入页面(不妨设进入中国地图)一切正常,点击 Switch 切换到世界地图,正常,再切换回中国地图,卡死

类似的卡死问题还有,进入 map 页面后点击菜单切换到别的页面,然后切换回来,卡死

使用 antv-l7 提供的 scene.destroy 并不能解决问题

后来利用了 keep-alive 解决,即 <Nuxt keep-alive />,将地图的代码封装成一个 Component,然后把这个组件保留起来,避免重复加载

<Nuxt keep-alive />

图层的位置在拖动时会变

地图图层和标注点的图层拖动时不一致,导致拖动后点的位置错位

position: relative

这个其实在官方文档写了,这个属性很重要,否则地图会铺满上层 div,并且缩放时点的位置会偏移

可以根据自己的情况考虑使用 absolute

MapBox 地图不会自动铺满,而 GaodeMap 会铺满

大坑

如果设置了类似于父组件的宽度根据浏览器的宽度变化这样的功能,期望地图的大小始终跟着浏览器宽度变化的话,GaodeMao 没有任何问题,会自动铺满整个屏幕,但 MapBox 地图在初次显示时,仍然会莫名其妙变成 400 * 300 大小,只有在重新改变浏览器宽度时才会正确铺满

这个问题在 Github 上有人提出(https://github.com/mapbox/mapbox-gl-js/issues/3265),是由于 MapBox 初次加载时长宽一定为 300 * 400,必须经过一次 map.resize() 才能正确获得目标 div 的大小

由于 AntV-l7 做了一层封装,所以我们不太好直接去调用 map.resize(),但是我们可以简单地直接触发 window 的 resize 事件

scene.on('loaded', () => {
    window.dispatchEvent(new Event('resize'))
})

这样,窗口大小不变,但是 window.resize 被触发了,MapBox 的 resize 也被触发了,MapBox 的大小也就正常了

地图的 scene 的 on load 中读取 vuex 中的值无效

不知道原因,在组件 mounted 的时候去读 vuex 中的屏幕宽度,期望能够设置到 div 的样式,但发现这个值能够被正确输出,地图大小却不对

怀疑是 antv-l7 绘制是在 mounted 拿到数据之前,但我没仔细去研究 antv-l7 地图绘制是在什么阶段完成的,所以不知道是不是用 async 这样的方法就可以确保 mounted 拿到数据后才绘制地图,也可能根本就不是这个原因,总之,我不知道有没有更好的解决方案

我通过强制让数据发生变化,触发 vue 对所有组件的重新绘制

that.screenWidth = that.$store.getters['size/getWidth']
that.screenWidth -= 1
that.screenWidth += 1 // nextTick
上一篇:victoriametrics在prometheus remotewrite下的使用


下一篇:C#中的抽象类和抽象方法