MapBox在vue环境中添加图层样式错乱，修改样式无效的问题

如果你尝试将mapbox-gl引入vue环境，制作组件或者组件库，你会遇到这样的一个问题，就是你将mapbox-gl实例化以后的对象如果绑定到Vue的data选项里（将其设置为响应式对象）就会产生出一个很严重的bug，就是你调用addLayer接口的时候加载的图层样式发生错乱。

正常情况下你可能写出了如下的错误代码：

data(){return{map:null}},mounted(){this.map=new mapboxgl,Map({zoom:10,center:[100.52454,35.25451]})
//处理别的业务逻辑...
this.map.addLayer({id:'id',source:{type:'geojson',data:data },paint:{fill:'#5fe5ee',}})}

然而你发现你写完addLayer方法之后，图层是加载到地图上了，但是它的样式不对。并且无论你如何改颜色，他都是保持一种样式不变。并且我发现每个人遇到的样式错乱还不一样，具体原因也不清楚，但是最核心的问题还是在于将这个实例对象map设置成了响应式的数据。

一旦修改之后，这个问题就不存在了，解决办法：在组件内声明一个全局变量来实例化mapboxgl，之所以全局是因为方便之后其他方法体内部引用这个对象，也方便监听</

MapBox在vue环境中添加图层样式错乱，修改样式无效的问题相关推荐

vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
gazebo仿真环境中添加robotiq 2f 140的gripper_controller控制器
gazebo仿真环境中添加robotiq 2f 140的gripper_controller控制器搭建环境: ubuntu: 20.04 ros: Nonetic sensor: robotiq_f ...
【LaTeX技巧】 | LaTeX数学公式环境中添加删除线
LaTeX数学公式环境中添加删除线 LaTeX数学公式环境中添加删除线 LaTeX数学公式环境中添加删除线作者:刘兴禄,清华大学,博士在读 cancel包下面是一个例子. \documentcla ...
ArcGIS教程：如何向地图中添加图层
每个图层都会引用存储在地理数据库.coverage.shapefile 和栅格等中的数据集.向地图中添加图层很简单,只需选择某个数据集并将其从目录或搜索窗口拖到地图中,或者使用添加数据按钮即可添加 ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...
向 Elastic Beanstalk 环境中添加数据库
lastic Beanstalk 提供了与 Amazon Relational Database Service (Amazon RDS) 的集成以帮助您将数据库实例添加到 Elastic Beans ...
在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
如何产生在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...
关于vue项目中添加less，less-loader不能运行的问题
在vue项目中,我们通常会在style样式中引用less,这样我们就需要下载less和less-loader依赖包, 运行命令 npm install less less-loader --save ...

MapBox在vue环境中添加图层样式错乱，修改样式无效的问题

MapBox在vue环境中添加图层样式错乱，修改样式无效的问题相关推荐

最新文章

热门文章