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
nuxt使用antv-l7踩坑相关推荐
- antv x6踩坑记录一
x6的配置啥的,这里就不赘诉了,可以去官网看antv x6官网地址,写得很详细,这里主要讲一下使用x6的过程中遇到的坑的问题,有的找到了解决办法,有的暂时没找到解决办法,如果哪位大佬有解决办法,愿意分 ...
- antv x6踩坑记录二
graph配置panning,会出现一种情况,就是我鼠标点击了画布的某个点,然后滚动滑轮去点击不在当前视图的某个节点的时候,它会自动聚焦到你之前点击的画布的点上 使用fromJSON去序列化节点渲染, ...
- Antv踩坑—导入画布数据监听画布渲染完成事件
Antv 踩坑记录之监听画布渲染完成事件 前言 一.导入后台返回的json数据 1.页面判断 新增/详情页 2.后台json数据 二.监听 1.核心监听 2.console 总结 Antv 踩坑记录之 ...
- AntV L7地图可视化入坑笔记
先用 HTML CDN的方式跑起来一个地图案例: 官方案例地址:https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491- ...
- 使用AntV L7实现地图/世界地图GeoJson资源分享
尝试了 https://blog.csdn.net/qq_29918313/article/details/118361046 作者:Delicia_Lani Hicharts实现世界地图思路及踩过的 ...
- 在vue项目中使用AntV L7地图下钻,异步调用不重复生成
AntV L7 地图下钻的踩坑生成 实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- 【golang程序包推荐分享】分享亿点点golang json操作及myJsonMarshal程序包开发的踩坑经历 :)
目录[阅读时间:约5分钟] 一.概述 1.Json的作用 2.Go官方 encoding/json 包 3. golang json的主要操作 二.Json Marshal:将数据编码成json字符串 ...
- java调用clang编译的so_写Java这么久,JDK源码编译过没?编译JDK源码踩坑纪实
好奇害死羊 很多小伙伴们做Java开发,天天写Java代码,肯定离不开Java基础环境:JDK,毕竟我们写好的Java代码也是跑在JVM虚拟机上. 一般来说,我们学Java之前,第一步就是安装JDK环 ...
最新文章
- C++开源跨平台类库集
- 抱怨IT公司人才缺乏?留住现有人才方是正途
- java编程最新图书_清华大学出版社-图书详情-《Java程序设计》
- Python十行代码带你穿越管世界
- TensorFlow2.0:常用数据范围压缩函数
- LeetCode 64.最小路径和(动态规划)
- SpringCloud——服务调用
- Matlab画图教程
- 苹果Mac Finder 替代工具:Path Finder
- python组合数据类型包括_第六周 python组合数据类型
- 2022全国智慧医院建设大会会议通知
- iOS基础教程:记录从零开始到APP发布过程
- 我的三维mandelbulb制作fractal成长之路[续]
- U3D游戏开发工程师正确入行姿势指南
- 微信应用签名生成工具
- 手机6120C 玩仙剑dos版
- 凯撒密码C语言去掉空格字符,凯撒密码C语言实现
- Java小游戏教程,一小时学会贪吃蛇大作战,制作属于自己的游戏
- 北京交通大学最优化方法I2020-2021第1学期期末考试试题
- 一个简单的ETL开发的过程(informatica)
热门文章
- 什么是机器人的五点校正法_机器人20点法校准和6点法区别
- 咋由123变为11233c语言,大连理工自动控制原理习题答案
- Harbor集成Clair镜像安全扫描原理探知
- 基于javaweb的毕业设计毕业论文管理系统(java+ssm+jsp+tomcat+mysql)
- 列表视图——List View
- HBuilder 按F11退出免打扰模式失效
- 入不敷出——后会无期
- java jtable 数据绑定_Java JTable数据加载
- JAVA复杂计算器多个组合框_加减乘除计算器超级列表框内容快速保存
- Kubeadm-K8s1.20-高可用部署-详细-生产环境(四)