瓦片下載工具：全能電子地圖下載器然评。
1、OSM（OpenStreeMap）地圖(坐標(biāo)系EPSG:3857)
（1）在全能電子地圖下載器上選擇地圖-》其他-》OpenStreeMap兴喂，然后選擇坐標(biāo)范圍、地圖級(jí)別、存儲(chǔ)目錄，然后點(diǎn)擊開始下載饵隙。
image.png
（2）這里下載了0-3級(jí)的地圖瓦片（roadmap）撮珠，其中0級(jí)（1張瓦片）沮脖，1級(jí)（4張瓦片），2級(jí)（16張瓦片）芯急，3級(jí)（64張瓦片）
image.png
（3）使用java發(fā)布瓦片文件夾勺届，通過url可以訪問。
image.png
（4）openlayers調(diào)用地圖瓦片
<template>
<div id="mainDiv">
</div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
export default {
name: 'OpenlayersViewer',
data () {
return {
map:''
}
},
mounted:function(){
this.map = new Map({
target: 'mainDiv',
view: new View({
center: [0, 0],
zoom: 1
}),
layers: [
new TileLayer({
source: new XYZ({
url: 'http://localhost:8080/xyz/roadmap/{z}/{x}/{y}.png',
wrapX:true
})
})
]
});
}
}
</script>
<style scoped>
#mainDiv{
width:100%;
height:100%;
}
</style>
2娶耍、谷歌地圖(坐標(biāo)系EPSG:3857)
（1）在全能電子地圖下載器上選擇地圖-》谷歌地圖-》衛(wèi)星地圖免姿，然后選擇坐標(biāo)范圍、地圖級(jí)別榕酒、存儲(chǔ)目錄胚膊，然后點(diǎn)擊開始下載。
image.png
（2）這里下載了0-3級(jí)的地圖瓦片（roadmap）想鹰，其中0級(jí)（1張瓦片）紊婉，1級(jí)（4張瓦片），2級(jí)（16張瓦片）辑舷，3級(jí)（64張瓦片）
image.png
（3）使用java發(fā)布瓦片文件夾喻犁，通過url可以訪問。
image.png
（4）openlayers調(diào)用地圖瓦片
<template>
<div id="mainDiv">
</div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
export default {
name: 'OpenlayersViewer',
data () {
return {
map:''
}
},
mounted:function(){
this.map = new Map({
target: 'mainDiv',
view: new View({
center: [0, 0],
zoom: 1
}),
layers: [
new TileLayer({
source: new XYZ({
url: 'http://localhost:8080/xyz/satellite/{z}/{x}/{y}.jpg',
wrapX:true
})
})
]
});
}
}
</script>
<style scoped>
#mainDiv{
width:100%;
height:100%;
}
</style>
注意：1何缓、x和y的順序可能會(huì)改變肢础。
2、出現(xiàn)白邊說明瓦片的坐標(biāo)系與openlayers坐標(biāo)系不一致碌廓。
