当前位置：首页 > news >正文

vue3封装leaflet并使用高德底图

news 来源：原创 2024/5/14 19:15:13

该组件配置了高德和腾讯地图的底图。具有新建图层和打点（使用leaflet中的方法），打点分为单个和多个。经纬度和详细地址的互相转换由高德api完成。

<template><div class="container"><!-- 搜索框 --><div class="module-top"><el-input  v-model="modelValue" placeholder="" style="width: 100%;" @input="onInput"/> </div><!-- 工具栏 --><div class="module-tools"><div class='tools-box'><button @click="onClickMark(1)">打点-单个</button><button @click="onClickMark(2)">打点-多个</button><button @click="onClearLayer">清空</button></div></div><div ref="mapLeafletRef" class="map"></div></div><!-- <button @click="onClearLayer">btn</button> -->
</template>
<script setup>
import L from 'leaflet';
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted, ref, getCurrentInstance, watch } from 'vue';
window._AMapSecurityConfig = {  // 高德安全密钥securityJsCode: '申请的高德安全密钥',
};
const props = defineProps({mapType: {  // 地图底图，高德、腾讯type: String,default: () => {return 'gaode';}}
});
watch(() => props, (newV, oldV) => {console.log(newV, 'new', oldV, 'old');
}, {immediate: true
});
const emits = defineEmits(['doRefreshMap']);
const mapObj = ref(); // leaflet对象
const mapLeafletRef = ref(null); //
const mapGaode = ref(null); // 高德
const modelValue = ref('');
const geocoder = ref(null); // 经纬度解析obj
const layerGroup = ref(null);
const autocomplete = ref(null);
const gaodeMapOption = ref({url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',option: {subdomains: '1234'}
});
const tencentMapOption = ref({url: 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0',option: {subdomains: '0123',tms: true}
});
// 初始化地图：leaflet
const initMap = () => {let mapOption = {};if (props.mapType === 'gaode') {mapOption = gaodeMapOption.value;} else if (props.mapType === 'tengxun') {mapOption = tencentMapOption.value;}const map = L.map(mapLeafletRef.value, {center: [39.90887, 116.397435],zoom: 11,minZoom: 6,maxZoom: 20,zoomControl: true,  //是否启用地图缩放控件attributionControl: false,  是否启用地图属性控件});L.tileLayer(  // 给leaflet添加瓦片底图mapOption.url, mapOption.option).addTo(map);// 绑定leaflet的click点击事件map.on('click', (evt) => {mapClick([evt.latlng.lat, evt.latlng.lng]);});// 创建图层并添加至地图layerGroup.value = L.layerGroup();layerGroup.value.addTo(map);return map;
};
const initMapGaode = () => {AMapLoader.load({key: '申请的高德key', // 申请好的Web端开发者Key，首次调用 load 时必填plugins: ['AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {version: '1.1',},}).then((AMap) => {mapGaode.value = AMap;geocoder.value = new AMap.Geocoder({  // 经纬度解析city: '010', // 城市设为北京，默认：“全国”radius: 1000, // 范围，默认：500});const autoOptions = {city: '全国'};autocomplete.value = new AMap.Autocomplete(autoOptions);}).catch((e) => {console.log(e, 'catch');});
};
const marker = ref([]);
const mapClick = (e) => { // leaflet的点击方法// onClearLayer();marker.value = L.marker(e);layerGroup.value.addLayer(marker.value);regeoCode([e[1], e[0]]);
};
const regeoCode = (e) => {  // 经纬度转换成详细地址geocoder.value.getAddress(e, (status, result) => {if (status === 'complete' && result.regeocode) {let address = result.regeocode.formattedAddress;console.log(address, '---address');emits('doRefreshMap', address);} else {console.log('根据经纬度查询地址失败');}});
};
const onClearLayer = () => {  // 清除全部图层上的内容layerGroup.value.clearLayers();
};
const onInput = (e) => {  //input监听输入//console.log(e, '--e');autocomplete.value.search(e, (status, result) => {// 搜索成功时，result即是对应的匹配数据console.log(result, '---result');});
};const removeMap = () => {if (mapObj.value) {mapObj.value.remove();}
};
const show = (e) => {console.log('111');
};
const markNumSingle = ref(true);
const onClickMark = (e) => {if (e === 1) {markNumSingle.value = true;} else {markNumSingle.value = false;}
};
defineExpose({onClearLayer
});
onMounted(() => {mapObj.value = initMap();initMapGaode();
});// 在组件卸载时删除地图
onUnmounted(() => {removeMap();
});
</script><style scoped lang="scss">
.map {height: 100%;width: 100%;z-index: 0;
}
.map2 {height: 40vh;z-index: 0;
}
.container {height: 50vh;position: relative;.module-top{position: absolute;
width: 200px;
height: 50px;
top: 20px;
left: 80px;
z-index: 10;}.module-tools {width:500px;height:50px;position: absolute;bottom:0;left:30%;z-index: 10;background:pink;.tools-box {display:flex;align-items:center;justify-content:center;}}
}</style>

使用leaflet新建一底图的简写方式

let map = L.map('map').setView([39.90887, 116.397435], 17);

复杂icon标点

// latlngs是标点坐标，格式同初始化地图时的中心坐标
let marker = L.marker(latlngs, {icon: L.divIcon({className: "dIcon", //标点icon的容器类名html:`标点icon的html字段内容`, //可以添加标点名字之类的自定义内容// iconSize: [60, 24] //标点icon的容器大小，也可以直接用className类名写css样式})
}).addTo(map); //添加到地图中