这篇文章给大家分享的是有关Vue单页面组件mapbox gl怎么用 的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<template>
<div>
<div ref="basicMapbox"></div>
</div>
</template>
通过脚本代码添加mapbox的对象:需要在mounted里,进行mapbox gl的初始化,container属性,通过ref指向div。
<script>
import mapboxgl from "mapbox-gl";
export default {
data() {
return {};
},
mounted() {
this.init();
},
created: function() {
},
methods: {
created() {},
// 初始化
init() {
mapboxgl.accessToken =
"yourtoken";
const map = new mapboxgl.Map({
container: this.$refs.basicMapbox,
maxZoom: 17,
style: {
version: 8,
name: "mapboxdata",
sources: {
tdtbase: {
type: "raster",
tiles: [
"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
],
tileSize: 256
}
},
layers: [
{
id: "tdtbase",
type: "raster",
source: "tdtbase",
minzoom: 0,
maxzoom: 18
}
]
},
});
}
}
};
在页面上应用组件:
先引用组件
import map2d from "./组件路径";
在页面上加载
<div >
<map2d ></map2d>
</div>
这样就能够将组件加载上去。
this.$store.commit("set2dmap", map);
感谢各位的阅读!关于“Vue单页面组件mapbox gl怎么用 ”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。