本地地图展示
- 参考官方文档https://leafletjs.com/index.html
- 需要后端配合下载切片放置服务器中
- 前端代码展示
<template>
<div class="locationap-map" ref="map"></div>
</template>
<script>
loadMap() {
const _this = this;
_this.MapContent = {
//显示位置
center: [30.62535686, 104.1710222],
//显示层级
zoom: 15,
//控制缩放
zoomControl: false,
zoomSnap: 0.5,
zoomDelta: 0.5,
minZoom: 10,
maxZoom: 18,
wheelPxPerZoomLevel: 120,
};
_this.map = L.map(_this.$refs.map, _this.MapContent);
//高德地图
// L.tileLayer('http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}').addTo(_this.map);
L.tileLayer('http://localhost:8095/{z}/{x}/{y}.png').addTo(_this.map);
},
</script>
<style scoped>
.locationap-map{
height: 100%;
min-height:100vh;
}
</style>