uniapp使用高德的离线地图

uniapp使用高德的离线地图

需求分析：使用uniapp开发原生android和ios，要做一个离线地图的操作，无网的情况下能正常查看地图，只是前期的demo演示，不做特别详细的说明

• 使用高德地图 相关的配置和申请去官网就可以（不想细说）
• 使用openlayer
• 使用原生sdk封装高德的离线地图在uniapp中用

第一种：使用openlayer加载离线瓦片

• 瓦片需要自己去下载
• ol.css和ol.js两个文件我们可以到官网去下载源文件。
• 官网地址：

前期准备工作自行度娘吧，直接上demo

1. uniapp中mainfest.json中将高德的相关配置配上之后
2. 在css文件中引入ol.css,在js文件中引入ol.js
3. 新建存瓦片的文件夹，tiles里面放下载的瓦片
4. 新建一个test.vue测试demo

test里面代码：

<template>
	<view class="container">
		<view id="olMap" class="olMap">
		</view>
	</view>
</template>

<script module="ol" lang="renderjs">
	import "../static/js/ol.js";
	export default {
    
    
		data() {
    
    
			return {
    
    
				map: null,
			}
		},
		mounted() {
    
    
			if (typeof window.ol === 'function') {
    
    
				this.initAmap()
			} else {
    
    
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js'
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		
		onLoad() {
    
    
		},
		methods: {
    
    
			initAmap() {
    
    
				this.map = new ol.Map({
    
    
					layers: [
						new ol.layer.Tile({
    
    
							source: new ol.source.XYZ({
    
    
								url: '../www/static/tiles/{z}/{x}/{y}.png'
							})
						})
					],
					target: "olMap",
					view: new ol.View({
    
    
						zoom: 10,
						center: [116.3717, 39.8527],
						projection: "EPSG:4326"
					})
				})
			}
		},
	}
</script>

上面引入的地址换成自己的地址，路径不要有错，下面定义map的时候使用的是XYZ的形式，url这个路径很重要，试过很多个网上说的静态地址都不对，放在www下面直接就展示出来了
样式代码：

<style>
	@import url("../static/css/ol.css");

	.container,
	.olMap {
    
    
		width: 100vw;
		height: 100vh;
	}
</style>

直接运行就可以了