这篇文章是关于如何使用mapbox gl，Vue的单页组件。我觉得边肖很实用，就和大家分享一下作为参考。让我们跟着边肖看一看。
使用Vue开发地图时，由于不熟悉Vue，我们将mapbox gl制作成单页形式的组件，共享地图实例进行地图操作和开发。的实现如下：
Mapbox gl类库安装：通过npm安装类库安装mapbox-gl - save，或者中国的cnpm也可以使用。新Vue: div的模板页面带有mapbox gl地图。
模板
差异
div ref=' base cmapbox '/div
/div
/模板
通过脚本代码添加mapbox对象：你需要在挂载的，容器属性中初始化mapbox gl，并通过ref指向div。
脚本
import mapbox GL from ' mapbox-GL '；
exportdefault{
数据(){ 0
返回{ }；
},
已安装(){ 0
this . init()；
},
created : function(){ 0
},
methods:{
created(){}，
//初始化
init(){ 0
mapboxgl.accessToken=
your token '；
constmap=newmapboxgl。地图({ 0
容器：这个。$ refs.basicMapbox，
maxZoom:17，
style:{
版本：8，
名称：'mapboxdata '，
来源：{
tdtbase:{
类型： '光栅'，
波浪号：[
' http://map . geoq.cn/ArcGIS/rest/services/chinonline community/MapServer/tile/{ z }/{ y }/{ x } '
],
波浪形：256
}
},
第：层[
{
id:'tdtbase '，
类型： '光栅'，
source:'tdtbase '，
minzoom:0，
maxzoom:18
}
]
},
});
}
}
};
要在页面上应用组件：
首先参考组件。
map2d from’。/component path '；
加载到页面
差异
map2d/map2d
/div
以便可以加载组件。
需要操作映射对象可以由存储共享，每个组件调用
映射实例来实现该功能。
这个。$store.commit('set2dmap '，map)；
感谢阅读！这篇关于“如何使用Vue的单页组件mapbox gl”的文章就分享到这里了，希望。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/132526.html