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

uniapp使用高德的离线地图_第1张图片

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>

直接运行就可以了

你可能感兴趣的:(uniapp,javascript,vue.js,前端)