vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程
更新時(shí)間：2023年04月27日 10:48:19 作者：哪有人敲代碼不戴頭盔的
最近開(kāi)始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下
如何在vue項(xiàng)目中加載并使用mapbox
mapbox用了感覺(jué)確實(shí)不錯(cuò)，操作很順滑，矢量切片體驗(yàn)流暢，地圖主題定制化地圖漂亮，二三維一體化，二三維切換很是簡(jiǎn)單，一行代碼搞定。
基本使用
這是mapbox官方文檔地址：mapbox文檔
里面有很多官方例子，基本就是copy下來(lái)就能用。
開(kāi)始使用
首先安裝mapbox依賴
npm install --save mapbox-gl
然后引入css文件，css引入方法很多，可以在style中import，也可以在入口文件public的index.html中引入，下面是index.html引入
<!--mapbox --> <script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script> <link rel='stylesheet' />
手動(dòng)導(dǎo)入mapboxgl對(duì)象
import mapboxgl from 'mapbox-gl'
初始化
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // 地圖容器
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
一個(gè)基本maobox地圖就出來(lái)了
底圖切換
mapbox地圖默認(rèn)國(guó)外，可以使用天地圖的地圖來(lái)?yè)Q底圖
另外可以實(shí)現(xiàn)地圖切換功能
實(shí)現(xiàn)思路就是把所有的圖層先加上，通過(guò)mapbox方法控制顯隱，比較方便，可以控制圖層的顯示層級(jí)
data() {
return {
tk: '自己的天地圖token',
tk2: '自己的天地圖token',
// 影像
yxBaseUrl:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=',
yxBaseCav:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=',
// 電子
dzBaseUrl:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=',
dzBaseCav:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=',
// 地形
dxBaseUrl:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk=',
dxBaseCav:
'https://t' + Math.floor(Math.random() * 7) + '.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk=',
}
},
這是三種底圖。
地圖初始化加載，并把三種底圖加上
createViewer(callback) {
var yxBaseUrl = {
//類(lèi)型為柵格瓦片
type: 'raster',
tiles: [this.yxBaseUrl + this.tk],
tileSize: 256,
}
var yxBaseCav = {
type: 'raster',
tiles: [this.yxBaseCav + this.tk2],
tileSize: 256,
}
// 電子底圖
var dzBaseUrl = {
//類(lèi)型為柵格瓦片
type: 'raster',
tiles: [this.dzBaseUrl + this.tk],
tileSize: 256,
}
var dzBaseCav = {
type: 'raster',
tiles: [this.dzBaseCav + this.tk2],
tileSize: 256,
}
// 地形底圖
var dxBaseUrl = {
//類(lèi)型為柵格瓦片
type: 'raster',
tiles: [this.dxBaseUrl + this.tk],
tileSize: 256,
}
var dxBaseCav = {
type: 'raster',
tiles: [this.dxBaseCav + this.tk2],
tileSize: 256,
}
mapboxgl.accessToken = '自己的mapboxToken'
let viewer = new mapboxgl.Map({
container: this.mapId, // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [108.06590205, 41.17608996], // starting position [lng, lat]
zoom: 4, // starting zoom
style: {
//地圖霧效果，主要在三維展示
fog: {
range: [2, 20],
color: 'hsl(0, 0%, 100%)',
'high-color': 'hsl(210, 100%, 80%)',
'space-color': [
'interpolate',
['exponential', 1.2],
['zoom'],
5,
'hsl(210, 40%, 30%)',
7,
'hsl(210, 100%, 80%)',
],
'horizon-blend': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 0.02, 7, 0.08],
'star-intensity': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 0.1, 7, 0],
},
//設(shè)置版本號(hào)，一定要設(shè)置
version: 8,
projection: {
name: 'globe',
},
//添加來(lái)源
sources: {
yxBaseUrl: yxBaseUrl,
yxBaseCav: yxBaseCav,
dzBaseUrl: dzBaseUrl,
dzBaseCav: dzBaseCav,
dxBaseUrl: dxBaseUrl,
dxBaseCav: dxBaseCav,
},
layers: [
{
//圖層id，要保證唯一性
id: 'yxBaseUrl',
//圖層類(lèi)型
type: 'raster',
//數(shù)據(jù)源
source: 'yxBaseUrl',
layout: {
visibility: 'visible',
},
//圖層最小縮放級(jí)數(shù)
minzoom: 0,
//圖層最大縮放級(jí)數(shù)
maxzoom: 17,
},
{
id: 'yxBaseCav',
type: 'raster',
source: 'yxBaseCav',
layout: {
visibility: 'visible',
},
minzoom: 0,
maxzoom: 17,
},
{
//圖層id，要保證唯一性
id: 'dzBaseUrl',
//圖層類(lèi)型
type: 'raster',
//數(shù)據(jù)源
source: 'dzBaseUrl',
layout: {
visibility: 'none',
},
//圖層最小縮放級(jí)數(shù)
minzoom: 0,
//圖層最大縮放級(jí)數(shù)
maxzoom: 17,
},
{
id: 'dzBaseCav',
type: 'raster',
layout: {
visibility: 'none',
},
source: 'dzBaseCav',
minzoom: 0,
maxzoom: 17,
},
{
//圖層id，要保證唯一性
id: 'dxBaseUrl',
//圖層類(lèi)型
type: 'raster',
layout: {
visibility: 'none',
},
//數(shù)據(jù)源
source: 'dxBaseUrl',
//圖層最小縮放級(jí)數(shù)
minzoom: 0,
//圖層最大縮放級(jí)數(shù)
maxzoom: 17,
},
{
id: 'dxBaseCav',
type: 'raster',
layout: {
visibility: 'none',
},
source: 'dxBaseCav',
minzoom: 0,
maxzoom: 17,
},
],
},
})
callback(viewer)
},
這是底圖切換的方法
<template>
<div class="toolsbar-mappic">
<ul id="basemaps" v-for="(item, i) in baseMapList" :key="i">
<li :class="item.visible ? 'hover' : ''" @click="changeBaseMaps(item, i)">
<a>
<div><img :src="item.iconUrl" /></div>
<div>{{ item.name }}</div>
</a>
</li>
</ul>
</div>
</template>
<script>
import global from '@comp/Global.vue'
export default {
data() {
return {
baseMapList: [
{
visible: true,
name: '影像',
id:'yxBaseUrl',
iconUrl: 'img/basemap/img.png',
},
{
visible: false,
name: '電子',
id:'dzBaseUrl',
iconUrl: 'img/basemap/elec.png',
},
{
name: '地形',
visible: false,
id:'dxBaseUrl',
iconUrl: 'img/basemap/ter.png',
},
],
}
},
mounted() {
},
methods: {
changeBaseMaps(item, index) {
//global.map3d是mapbox地圖的全局對(duì)象
let styleJson = global.map3d.getStyle();
styleJson.layers.forEach((item)=>{
if(item.layout&&item.layout.visibility){
global.map3d.setLayoutProperty(item.id, 'visibility', 'none')
}
})
global.map3d.setLayoutProperty(item.id, 'visibility', 'visible')
this.baseMapList.forEach((val, index, arr) => {
val['visible'] = false
})
item['visible'] = true
},
},
}
</script>
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的文章就介紹到這了,更多相關(guān)vue使用mapbox地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能
這篇文章主要介紹了Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue3動(dòng)態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue.js實(shí)現(xiàn)表格動(dòng)態(tài)增加刪除的方法（附源碼下載）
Vue.js通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實(shí)現(xiàn)表格動(dòng)態(tài)增加刪除的方法實(shí)例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在Vue中延遲執(zhí)行某個(gè)函數(shù)的實(shí)現(xiàn)方式
在Vue中延遲執(zhí)行某個(gè)函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過(guò)一些示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue elementUI 表單校驗(yàn)功能之?dāng)?shù)組多層嵌套
這篇文章主要介紹了vue elementUI 表單校驗(yàn)（數(shù)組多層嵌套）功能的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)一個(gè)挺靠譜的多地區(qū)選擇組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的方法實(shí)例
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到多級(jí)導(dǎo)航這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要給大家介紹了關(guān)于Vue如何使用Dayjs計(jì)算常用日期的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03