uni-app使用瓦片实现离线地图的2种方案示例代码
前言
最近接到一个安卓App的活儿，虽然功能上不算复杂，但因为原本没怎么做过安卓端，所以也是"摸着石头过河"。简单写一下踩过的坑和淌的水吧~
uni-app实现离线地图主要用 leafletjs 实现，但是因为在安卓端运行，存在渲染问题，所以还要用上 renderjs。
实现方案一：web-view
因为uni-app引入第三方可以采用传统的 NPM 安装的方式，也可以采用引入打包完的js文件的方式。
这里采用 leafletjs 打包完的文件，将 leafletjs 放入 static 文件夹内。
在网上下载了公开的瓦片地图图片，以 {z}/{x}/{y} 的目录结构放入 tiles 文件夹中，将 tiles 放入 static 文件夹内。
在static文件夹下新建一个 offline-map.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>离线地图</title>
<link rel="stylesheet" href="./leaflet/leaflet.css" rel="external nofollow" />
<style>
html,
body {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./leaflet/leaflet.js"></script>
<script>
const baseUrl = './tiles/{z}/{x}/{y}.jpg';
const map = L.map('map').setView([23.56, 113.23], 15);
L.tileLayer(baseUrl, {
minZoom: 15,
maxZoom: 18,
tms: true,
attribution: 'Offline Tiles',
errorTileUrl: ''
}).addTo(map);
</script>
</body>
</html>
找到 pages/index/index.vue 文件，采用 web-view 引用的方式引入上述 html 文件。
// pages/index/index.vue
<template>
<view class="content">
<web-view src="/static/offline-map.html"></web-view>
</view>
</template>
<style>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
实现方案二：renderjs
仍然将 leafletjs 和 瓦片图片文件夹tiles 放入 static 文件夹中。
// pages/index/index.vue
<view class="content">
<view id="map" class="map-container"></view>
</view>
<script module="leaflet" lang="renderjs">
import '@/static/leaflet/leaflet.css';
import * as L from "@/static/leaflet/leaflet.js";
export default {
mounted() {
this.initMap();
},
methods: {
initMap() {
const baseUrl = 'static/tiles/{z}/{x}/{y}.jpg'
map = L.map('map').setView([23.56, 113.23], 15);
L.tileLayer(baseUrl, {
minZoom: 15,
maxZoom: 18,
tms: true,
attribution: 'Offline Tiles',
errorTileUrl: ''
}).addTo(map);
},
}
}
</script>
这里需要注意的是一定要在 renderjs 中实现上述代码，如果在常规 script 中实现，在 H5端 没有任何问题，但是运行到真机上会白屏。（这个问题我反复试了好几次都不行，结果还是上传到 Trae 上解决了这个问题）。
导致这种情况的原因是在常规 sctipt 中的代码，在真机上是运行在 逻辑层 的代码，无法干扰到 视图层 的结构，这一点和Web是不同的。
而 renderjs 是运行在 视图层 的js，具备操作 DOM 的能力。
其次是引用 static 文件的路径，import static 中的文件可以使用 @/static 的方式，但是在代码中引用 static 文件需要采用 static/ 的形式。
总结
最后我做完以后让 Trae 给了一下评价，Trae 表示不建议采用这种方式实现离线地图，首先瓦片地图文件一般非常大，我用的仅仅是其中的一小部分，也超过了 60MB，打包出来的 App 包太大了。
其次无论是 web-view 还是 renderjs 本质上是一样的。在app-vue环境下，视图层由webview渲染，而renderjs就是运行在视图层的。
所以无论是渲染效率还是开发上基本没差。
到此这篇关于uni-app使用瓦片实现离线地图的2种方案的文章就介绍到这了,更多相关uni-app瓦片实现离线地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了基于JavaScript实现随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
这篇文章主要为大家详细介绍了JavaScript实现切换多张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了JavaScript函数声明和函数表达式的区别，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
网上看到许多关于八皇后算法的文章，很少能看到使用javascript来实现的，今天就给大家使用javascript来解决下这个问题，有需要的小伙伴可以参考下。2015-04-04
本篇文章主要介绍了JavaScript实现左右下拉框动态增删示例，可以对下拉框进行删除和增加，非常具有实用价值，需要的朋友可以参考下。2017-03-03
本文系统介绍了javascript的window对象以及一些控制函数的用法,仅供大家参考2016-11-11
这篇文章主要介绍了JS中移除非数字最多保留一位小数的实现代码，文章给大家提到了js处理数字保留2位小数,强制保留2位小数不够补上.00的完整代码，感兴趣的朋友一起看看吧2018-05-05
这篇文章主要介绍了BootStrap select2 动态改变值的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
JavaScript+html5 canvas制作的百花齐放效果完整实例
这篇文章主要介绍了JavaScript+html5 canvas制作的百花齐放效果,结合完整实例形式分析了使用html5的canvas技术动态绘制图形的技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JS求1到任意数之间的所有质数，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论