Skip to content

I
iot-web
Commit 6adca6f7 by 吴春元
Options

feat(Map组件): 添加定位按钮并优化设备筛选功能 

- 新增右下角定位按钮，点击可重置地图中心和缩放级别
- 重构设备筛选组件样式和逻辑，添加"全部"选项
- 调整按钮边距和高度样式
- 更新地图相关图片资源
- 修改代理配置目标地址
parent 5e167485
Showing with 97 additions and 74 deletions
src/assets/imgs/map-screening-bg.png
src/assets/imgs/map-screening-bg.png

1.59 KB | W: | H:

src/assets/imgs/map-screening-bg.png

13.8 KB | W: | H:

src/assets/imgs/map-screening-bg.png
src/assets/imgs/map-screening-bg.png
src/assets/imgs/map-screening-bg.png
src/assets/imgs/map-screening-bg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/styles/element-plus.scss
......@@ -229,8 +229,8 @@ $blue-hover: #40a9ff; // 悬停蓝色
outline: none;
font-size: var(--el-font-size-base);
user-select: none;
margin-right: 0px;
height: 32px;
margin-right: 5px;
height: 28px;
}
// 全局滚动条样式（深蓝色主题）
......
src/views/components/Map.vue
<template>
<div class="w-full h-full relative">
<div class="map-container w-full h-full" id="container"></div>
<div
class="absolute top-2 left-2 z-[999] bg-[url('@/assets/imgs/map-screening-bg.png')] bg-cover cursor-pointer pl-3 pt-2 pb-2 pr-3"
>
<!-- 右下角按钮初始位置按钮-->
<div class="absolute bottom-2 right-2 z-[999] cursor-pointer hover:scale-110" @click="handleLocationClick">
<img src="@/assets/imgs/map-location.png" alt="" class="w-10 h-10">
</div>
<div class="screening-bg absolute top-2 left-1 z-[999] cursor-pointer pl-3 pt-2 pb-2 pr-0">
<!-- <el-tree-select
style="width: 150px"
v-model="treeDataValue"
......@@ -16,27 +18,19 @@
@change="handleSceneChange"
/> -->
<!-- 左对齐 -->
<div
class="text-[14px] mb-1 bg-[url('@/assets/imgs/map-screening-titile-bg.png')] bg-cover px-4"
>
<div class="screening-titile-bg text-[14px] mb-1 px-5">
设备筛选
</div>
<el-radio-group
v-model="radio"
style="
<el-radio-group v-model="radio" style="
flex-direction: column;
gap: 0px;
align-items: flex-start;
display: grid;
grid-template-columns: repeat(2, 1fr);
"
>
<el-radio
v-for="treeData in dataList"
:key="treeData.id"
:label="treeData.label"
:value="treeData.id"
/>
" @change="handleSceneChange">
<el-radio v-for="treeData in dataList" :key="treeData.id" :label="treeData.id" :value="treeData.id">
{{ treeData.name }}
</el-radio>
</el-radio-group>
</div>
</div>
......@@ -123,25 +117,9 @@ const defaultProps = {
children: "children",
label: "label",
};
const radio = ref("");
const radio = ref(0);
const dataList = ref([
{
id: 1,
label: "LED",
value: "New York",
},
{
id: 2,
label: "摄像头",
value: "New York",
},
{
id: 3,
label: "LED",
value: "New York",
},
]);
const dataList = ref([]);
const props = defineProps({
deptId: {
......@@ -173,7 +151,25 @@ onMounted(() => {
};
});
// 定位到当前位置
function handleLocationClick() {
if (map) {
//设置地图中心点为112.39, 36.99
map.setCenter([112.39, 36.99]);
//设置地图缩放级别为 6.7
map.setZoom(6.7);
}
}
function handleSceneChange(val) {
if (val == 0) {
oneTypeId.value = "";
twoTypeId.value = "";
threeTypeId.value = "";
fourTypeId.value = "";
fiveTypeId.value = "";
sixTypeId.value = "";
}
treeDataAllList.value.forEach((item) => {
if (item.id === val) {
const parentIds = item.parentIds;
......@@ -219,22 +215,26 @@ function initMap() {
"AMap.IndexCluster",
"AMap.ToolBar",
"AMap.InfoWindow",
"AMap.HawkEye",
], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
map = new AMap.Map("container", {
pitch: 35, // 倾斜角度
zoom: 6.7, // 设置当前显示级别
expandZoomRange: true, // 开启显示范围设置
animateEnable: true,
zooms: [3, 20], //最小显示级别为7，最大显示级别为20
center: [112.39, 36.99], // 设置地图中心点位置
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
resizeEnable: true, // 是否开启地图自动调整大小
mapStyle: "amap://styles/darkblue",
// mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
});
if (!map) {
map = new AMap.Map("container", {
pitch: 35, // 倾斜角度
zoom: 6.7, // 设置当前显示级别
expandZoomRange: true, // 开启显示范围设置
animateEnable: true,
zooms: [3, 20], //最小显示级别为7，最大显示级别为20
center: [112.39, 36.99], // 设置地图中心点位置
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
resizeEnable: true, // 是否开启地图自动调整大小
mapStyle: "amap://styles/darkblue",
// mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
});
}
// 获取边界坐标点
AMap.plugin("AMap.DistrictSearch", () => {
......@@ -246,7 +246,6 @@ function initMap() {
// 返回行政区边界坐标点
extensions: "all",
});
for (let i = 0; i < map_opt.length; i++) {
// 搜索所有省/直辖市信息
districtSearch.search(map_opt[i].city, (status, result) => {
......@@ -294,16 +293,16 @@ function initMap() {
);
info.push(
"<div style='font-size: 11px;color:#000;'> <div class='form_info_font1'> " +
showDeviceType(item) +
"</div> <div class='form_info_font1'>" +
item.name +
" </div> <div class='form_info_font1'>" +
showSysType(item) +
"</div> <div class='form_info_font1'> " +
item.sysDept.deptName +
"</div> <div class='form_info_font1'> " +
(item.state == 1 ? "在线" : "离线") +
"</div></div>"
item.twoType.name +
"</div> <div class='form_info_font1'>" +
item.name +
" </div> <div class='form_info_font1'>" +
showSysType(item) +
"</div> <div class='form_info_font1'> " +
item.sysDept.deptName +
"</div> <div class='form_info_font1'> " +
(item.state == 1 ? "在线" : "离线") +
"</div></div>"
);
infoWindow = new AMap.InfoWindow({
isCustom: true, // 是否自定义窗体
......@@ -370,11 +369,6 @@ function handlePolygon(result, color) {
}
}
//显示设备类型
var showDeviceType = function (item) {
return item.twoType.name;
};
//显示系统类型
var showSysType = function (item) {
const sysTypeItem = sysType.value.find(
......@@ -392,14 +386,13 @@ var _renderClusterMarker = function (context) {
//在聚合点上显示聚合数量和城市名称
context.marker.setContent(`
<div style="position: relative; width: 45px; height: 45px;">
<img class="cluster-marker" src="${
context.count < 10
? "http://webapi.amap.com/theme/v1.3/m2.png"
: context.count < 50
<img class="cluster-marker" src="${context.count < 10
? "http://webapi.amap.com/theme/v1.3/m2.png"
: context.count < 50
? "http://webapi.amap.com/theme/v1.3/m4.png"
: context.count >= 50
? "http://webapi.amap.com/theme/v1.3/m3.png"
: "http://webapi.amap.com/theme/v1.3/m3.png"
? "http://webapi.amap.com/theme/v1.3/m3.png"
: "http://webapi.amap.com/theme/v1.3/m3.png"
}" style="width: 100%; height: 100%; display: block;">
<div style="
position: absolute;
......@@ -465,6 +458,10 @@ function getDeviceTypeList() {
treeDataAllList.value = res.data;
treeDataList.value = handleTree(res.data, "id");
// 将 treeDataList.value内的二级数据遍历出来放到dataList
dataList.value.push({
id: 0,
name: "全部",
});
treeDataList.value.forEach((item) => {
if (item.children) {
item.children.forEach((child) => {
......@@ -472,6 +469,7 @@ function getDeviceTypeList() {
});
}
});
debugger;
});
}
......@@ -486,6 +484,7 @@ getDeviceTypeList();
margin-top: 3px;
/* font-family: "YouSheBiaoTiHei"; */
}
.form_info_font1 {
font-size: 12px;
color: #fff;
......@@ -493,6 +492,7 @@ getDeviceTypeList();
margin-top: 3px;
font-family: "YouSheBiaoTiHei";
}
.amap-copyright {
display: none !important;
}
......@@ -500,23 +500,46 @@ getDeviceTypeList();
.amap-logo {
display: none !important;
}
.cluster-marker {
/* 定位点循环播放放大缩小动画 */
animation: cluster-marker-zoom 0.8s ease-in-out infinite;
}
@keyframes cluster-marker-zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.cluster-marker1:hover {
/* //移入放大 */
transform: scale(1.5);
}
.screening-bg {
background: url('@/assets/imgs/map-screening-bg.png') no-repeat center center;
background-size: 100% 100%;
}
.screening-titile-bg {
background: url('@/assets/imgs/map-screening-titile-bg.png') no-repeat center center;
background-size: 100% 100%;
font-family: "PangMen";
font-size: 14px;
}
</style>
<style scoped>
.el-radio /deep/ .el-radio__label {
font-size: 12px;
font-family: "YouSheBiaoTiHei";
}
</style>
vite.config.ts
......@@ -53,8 +53,8 @@ export default defineConfig({
port: 8080,
proxy: {
"/dev-api": {
target: "http://192.168.19.84:8081",
// target: "http://192.168.19.9:8081",
// target: "http://192.168.19.84:8081",
target: "http://192.168.19.9:8081",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/dev-api/, ""),
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment