常见地图瓦片的下载和调用（Openlayers）

瓦片下载工具：全能电子地图下载器。

1、OSM（OpenStreeMap）地图(坐标系EPSG:3857)

（1）在全能电子地图下载器上选择地图-》其他-》OpenStreeMap，然后选择坐标范围、地图级别、存储目录，然后点击开始下载。

image.png

（2）这里下载了0-3级的地图瓦片（roadmap），其中0级（1张瓦片），1级（4张瓦片），2级（16张瓦片），3级（64张瓦片）

image.png

（3）使用java发布瓦片文件夹，通过url可以访问。

image.png

（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）在全能电子地图下载器上选择地图-》谷歌地图-》卫星地图，然后选择坐标范围、地图级别、存储目录，然后点击开始下载。

image.png

（2）这里下载了0-3级的地图瓦片（roadmap），其中0级（1张瓦片），1级（4张瓦片），2级（16张瓦片），3级（64张瓦片）

image.png

（3）使用java发布瓦片文件夹，通过url可以访问。

image.png

（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坐标系不一致。