vue+openlayer+(tms瓦片)实现离线地图

--- 效果图

---话不多说，直接上码

----start

<template>
    <div class="map-container">
        <div class="map" ref="map"></div>
        <div class="mouseposition-box" ref="mouseposition"></div> <!--当前光标位置-->
	</div>
</template>


<script>
    import 'ol/ol.css'
    import {Map,View} from 'ol'
    import TileLayer from 'ol/layer/Tile'
    import VectorLayer from 'ol/layer/Vector'
    import XYZ from 'ol/source/XYZ'
    import MousePosition from 'ol/control/MousePosition'   // 当前鼠标位置
    import {defaults as defaultControls} from 'ol/control'
    import { format } from 'ol/coordinate'
    import Overlay from 'ol/Overlay'  //弹出窗和点击事件
    import { projection, centerx, centery, zoom, streetmapurl, imagemapurl } from '../mapconfig'
	
	export default {
	data() {
		return {
			map: null,
			view: new View({
				projection,
				center: [centerx, centery],
				zoom
			}),
			
			projection = 'EPSG:4326',   //地图坐标系
			centerx = 116.399,
			centery = 36.3945,
			zoom = 8,
			streetmapurl = 'url' 
			imagemapurl = 'url'
		   }
	},
	mounted() {
		this.initMap()()
	},
	methods:{
		iniMap(){
		
			this.streetmapLayer = new TileLayer({
				preload: Infinity,
				source: new XYZ({
					projection: 'EPSG:3857',
					url: streetmapurl
				})
			})
			this.imagemapLayer = new TileLayer({
				visible: false,
				preload: Infinity,
				source: new XYZ({
					projection: 'EPSG:3857',
					url: imagemapurl
				})
			})
			
			 this.mousepostionCtrl = new MousePosition({
					coordinateFormat: function(coordinate) {
						console.log(coordinate)
						return format(coordinate, '经度: {x}, 纬度: {y}', 4)
					},
					projection: 'EPSG:4326',
					className: 'mouseposition',
					target: this.$refs.mouseposition,
					undefinedHTML: '&nbsp;'
				})
				this.popup = new Overlay({
					element: this.$refs.popup,
					autoPan: true,
					autoPanAnimation: {
						duration: 250
					}
				})
				this.vectorLayer = new VectorLayer({
					source: this.vectorSource,
					zIndex: 30
				})
				this.drawLayer = new VectorLayer({
					source: this.drawSource
				})
				const map = new Map({
					controls: defaultControls().extend([this.mousepostionCtrl]),
					target: this.$refs.map,
					layers: [ this.streetmapLayer,this.imagemapLayer, this.drawLayer, this.vectorLayer ],
					overlays: [this.popup],
					view: this.view
				})
				this.map = map

		}
	
	}
</script>

<style scoped lang="stylus">
.map-container { position: relative;}
.map-container, .map {
    height: 100%;
}
</style>



-----end