131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<template>
|
|
<div class="zoom-control">
|
|
<LayerSwitcher class="layer-switcher" :map="map" @layerChange="onLayerChange" ref="layerSwitcherRef" />
|
|
|
|
<div class="compass" @click="onCompass"></div>
|
|
<div class="zoom-in" @click="onZoomIn"></div>
|
|
<div class="zoom-out" @click="onZoomOut"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
// import LayerSwitcher from './LayerSwitcher.vue';
|
|
|
|
// 定义props接受地图实例
|
|
const props = defineProps({
|
|
map: Object, // 地图实例
|
|
resetView: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
// 组件引用
|
|
const layerSwitcherRef = ref(null);
|
|
|
|
// 向父组件发出事件
|
|
const emit = defineEmits(['compass', 'zoomIn', 'zoomOut', 'layerChange']);
|
|
|
|
// 指南针/重置视图
|
|
function onCompass() {
|
|
emit('compass');
|
|
if (props.resetView) {
|
|
props.resetView();
|
|
} else if (props.map) {
|
|
// 如果没有提供重置函数，尝试使用地图的初始视图
|
|
const initialCenter = props.map.options.center;
|
|
const initialZoom = props.map.options.zoom || 7;
|
|
props.map.setView(initialCenter, initialZoom, { animate: true });
|
|
}
|
|
}
|
|
|
|
// 放大地图
|
|
function onZoomIn() {
|
|
emit('zoomIn');
|
|
}
|
|
|
|
// 缩小地图
|
|
function onZoomOut() {
|
|
emit('zoomOut');
|
|
}
|
|
|
|
// 图层变化处理
|
|
function onLayerChange(layerInfo) {
|
|
console.log('ZoomControl收到图层变化:', layerInfo);
|
|
// 将图层信息传递给父组件
|
|
emit('layerChange', layerInfo);
|
|
}
|
|
|
|
// 导出方法供外部调用
|
|
defineExpose({
|
|
// 设置图层可见性的方法
|
|
setLayerVisibility(layerName, visible) {
|
|
if (layerSwitcherRef.value) {
|
|
return layerSwitcherRef.value.setLayerVisibility(layerName, visible);
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.zoom-control {
|
|
position: absolute;
|
|
bottom: 250px;
|
|
left: 20px;
|
|
z-index: 3000;
|
|
width: 40px;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 25px;
|
|
}
|
|
|
|
.compass {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url("../../../assets/images/znz.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
z-index: 3000;
|
|
}
|
|
.layer-switcher{
|
|
z-index: 3000;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url("../../../assets/images/layer.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoom-in {
|
|
background: url("../../../assets/images/zoomOut.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3000;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoom-out {
|
|
background: url("../../../assets/images/zoomIn.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3000;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.zoom-in, .zoom-out, .compass {
|
|
width: 28px;
|
|
height: 28px;
|
|
background-size: 80%;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
</style> |