目前L7 支持高德和Mapbox兩種底圖汽畴，高德地圖由于使用在線API不能做的離線部署旧巾，如果你有離線部署的需求可以采用MapBox做底圖。L7 在接口層統(tǒng)一了不同底圖直接的差異整袁，一套可視化代碼可以運(yùn)行在L7 支持的任意底圖上菠齿。本文主要介紹如何離線使用，國(guó)內(nèi)加速使用MapBox坐昙，同時(shí)也提供了在線的字體服務(wù)绳匀，你也可也下載到本地使用。
- 了解 L7
- github關(guān)注 L7，實(shí)時(shí)了解L7 進(jìn)展疾棵。
L7 如何引入Mapbox
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
center: [ 103.83735604457024, 1.360253881403068 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313,
token:'xxxx'
})
});
為什么離線化
- 離線部署
- 國(guó)內(nèi)加速
- 不使用mapbox token
如何離線化使用MapBox
你只要不使用MapBox的數(shù)據(jù)底圖服務(wù)就可以離線使用戈钢，mapbox所有數(shù)據(jù)服務(wù)資源都是在style里面配置的。除了數(shù)據(jù)服務(wù)以外還有一些靜態(tài)資源是尔，這些主要是圖片標(biāo)注殉了，文字標(biāo)注的時(shí)候使用。
mapbox本身資源在國(guó)外如果在國(guó)內(nèi)單獨(dú)部署一套單獨(dú)使用拟枚，加載速度體驗(yàn)還是很好的
我們先了解一下MapBox樣式包含哪些配置項(xiàng)薪铜。
Mapbox樣式參數(shù)
- version：JS SDK對(duì)應(yīng)版本必須為8，
- name：樣式的命名恩溅，
- sprite：雪碧圖隔箍，將一個(gè)地圖涉及到的所有零星圖標(biāo)圖片都包含到一張大圖中。
- glyphs：.pbf格式的字體樣式脚乡，例如微軟雅黑等字體庫(kù)蜒滩。
- sources：圖層的資源文件，可以支持矢量切片奶稠、柵格俯艰、dem柵格、圖片锌订、geojson竹握、視頻等格式
- layers：是對(duì)每個(gè)圖層樣式的描述，這里就是對(duì)地圖樣式渲染的關(guān)鍵瀑志，可以做定制化地圖樣式涩搓。<br />具體參數(shù)及其api可以參考mapbox官網(wǎng)
如果做到本地化只需要 sprite污秆，glyphs 本地化就可以了劈猪，地圖服務(wù)可以加載其他服務(wù)。
如果你不需要使用MapBox數(shù)據(jù)服務(wù)良拼，可視化層完成用L7渲染那就更簡(jiǎn)單了
你只需要將MapBox的地圖樣式設(shè)置 blank
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
center: [ 103.83735604457024, 1.360253881403068 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313
})
});
blank 樣式以為無(wú)底圖樣式战得，這種樣式下就不需要使用mapbox服務(wù)，也不需要使用mapbox的token了
<a name="cGfei"></a>
本地化雪碧圖
如果你需要使用mapbox字段的圖片標(biāo)注庸推，你需要本地化雪碧圖資源<br />只需要下載兩個(gè)文件即可<br />sprite.json 主要記錄每個(gè)圖表在大圖上位置<br />sprite.png 每個(gè)小圖標(biāo)組成的大圖
在線雪碧圖服務(wù)地址:<br />https://lzxue.github.io/font-glyphs/sprite/sprite
<a name="KWyGs"></a>
本地化字體
如果需要使用mapbox文章標(biāo)注功能需要本地化常侦，如果你的渲染能力都是用L7實(shí)現(xiàn)的，這個(gè)過(guò)程也是不需要的贬媒。
L7 提供了在線字體服務(wù)<br /> 目前支持4種字
- 阿里巴巴普惠體
- noto
- opensan
- roboto
如果你有新的字體需求可提PR聋亡，幫你自動(dòng)生成在線可用的字體服務(wù)，你可以在線使用际乘，也可以下載到本地使用坡倔。
字體服務(wù)下載：gh-pages分支 你可以clone下來(lái)直接使用。
你也可以使用在線服務(wù)<br />**<br />github服務(wù)<br />https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf<br />螞蟻CDN：<br />https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf
<a name="oeqps"></a>
地圖服務(wù)本地化
1.加載第三方底圖，柵格瓦片圖層做底圖罪塔，如天地圖投蝉，高德，google的柵格瓦片都可以<br />2.下載opensteetmap 矢量瓦片地圖做底圖<br />3.自己業(yè)務(wù)數(shù)據(jù)發(fā)布底圖服務(wù)征堪，或者矢量瓦片服務(wù)瘩缆。
<a name="SXkO4"></a>
所有的服務(wù)資源已經(jīng)準(zhǔn)備好了，這樣我們就可以獨(dú)立使用mapbox服務(wù)佃蚜，不需要再申請(qǐng)mapbox的token了
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: {
"version": 8,
"name": "blank",
"sprite": "https://lzxue.github.io/font-glyphs/sprite/sprite",
"glyphs": "https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf",
"sources": {},
"layers": [
{
id: 'background',
type: 'background',
paint: {
'background-color': 'white',
},
},
]
},
center: [ 103.83735604457024, 1.360253881403068 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313,
token:'xxxx'
})
});
離線庸娱，無(wú)token使用mapbox demo<br />
<a name="FaOhR"></a>
- 了解 L7
- github關(guān)注 L7，實(shí)時(shí)了解L7 進(jìn)展谐算。
