一开始想用openlayers开发离线地图,由于官网总是打不开,选择了leaflet。感觉他们都差不多。
需要的工具:瓦片地图下载器(下载开发所需的瓦片离线地图)
vue项目中leaflet的使用(我用的是直接cdn引入,也可以npm安装)
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
将下载的瓦片文件放到该目录,(我做测试用的直接放在本地了,正式项目会放到服务器上请求瓦片)
vue页面代码
<template>
<div id="map"></div>
</template>
<script>
export default {
mounted() {
var map = L.map("map", {
minZoom: 4,
maxZoom: 13,
maxBounds: [//右下角点位开始,逆时针
[24.255729263830737, 119.71551513671876],
[26.296414642208234, 119.73062133789064],
[26.29391130293591, 117.4925994873047],
[24.255729263830737, 118.7340545654297],
],
}).setView([24.91695414, 118.58299255], 10);
L.tileLayer("../../static/tiles/mapabc/roadmap/{z}/{x}/{y}.png", {}).addTo(
map
);
map.on("click", (e) => {
console.log(e.latlng);
});
},
};
</script>
<style scoped>
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>