瓦片下载工具:全能电子地图下载器。
1、OSM(OpenStreeMap)地图(坐标系EPSG:3857)
(1)在全能电子地图下载器上选择地图-》其他-》OpenStreeMap,然后选择坐标范围、地图级别、存储目录,然后点击开始下载。

(2)这里下载了0-3级的地图瓦片(roadmap),其中0级(1张瓦片),1级(4张瓦片),2级(16张瓦片),3级(64张瓦片)

(3)使用java发布瓦片文件夹,通过url可以访问。

(4)openlayers调用地图瓦片
<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、谷歌地图(坐标系EPSG:3857)
(1)在全能电子地图下载器上选择地图-》谷歌地图-》卫星地图,然后选择坐标范围、地图级别、存储目录,然后点击开始下载。

(2)这里下载了0-3级的地图瓦片(roadmap),其中0级(1张瓦片),1级(4张瓦片),2级(16张瓦片),3级(64张瓦片)

(3)使用java发布瓦片文件夹,通过url可以访问。

(4)openlayers调用地图瓦片
<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的顺序可能会改变。
2、出现白边说明瓦片的坐标系与openlayers坐标系不一致。
网友评论