nuxt使用antv-l7踩坑

2021-10-06 14:57:52

nuxt.js 下使用 antv-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

大坑

如果设置了类似于父组件的宽度根据浏览器的宽度变化这样的功能，期望地图的大小始终跟着浏览器宽度变化的话，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 的大小也就正常了

不知道原因，在组件 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

码农公寓