Skip to content

I
iot-web
Commit b4c7a74a by 吴春元
Options

优化地图组件，添加设备筛选下拉框，调整样式，清理无用代码

parent d85c4224
Showing with 43 additions and 58 deletions
node_modules/.vue-global-types/vue_3.5_0.d.ts
......@@ -2,6 +2,8 @@
export {};
; declare global {
var __VLS_PROPS_FALLBACK: Record<string, unknown>;
const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
const __VLS_unref: typeof import('vue').unref;
const __VLS_placeholder: any;
......@@ -35,7 +37,7 @@ export {};
attrs?: any;
slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>;
emit?: T extends { $emit: infer Emit } ? Emit : {};
props?: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>;
props?: typeof props;
expose?: (exposed: T) => void;
};
};
......
src/assets/styles/_variables.scss
// 深蓝色主题变量
$primary-color: #1890FF; // 主蓝色
$secondary-color: #003a8c; // 次级蓝色
$text-color: #FFFFFF; // 白色文字
$dark-blue-bg: #001529; // 深蓝背景
$dark-blue-border: #004d99; // 边框蓝色
$light-gray-text: #D9D9D9; // 浅灰色文字
$blue-hover: #40a9ff; // 悬停蓝色
$primary-color: #1890ff; // 主蓝色
$secondary-color: #003a8c; // 次级蓝色
$text-color: #ffffff; // 白色文字
$dark-blue-bg: #001529; // 深蓝背景
$dark-blue-border: #004d99; // 边框蓝色
$light-gray-text: #d9d9d9; // 浅灰色文字
$blue-hover: #40a9ff; // 悬停蓝色
// 扩展的颜色变量
$success-color: #52c41a;
......@@ -19,10 +19,10 @@ $sidebar-width: 200px;
$container-padding: 20px;
// 字体变量
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;
// 边框变量
$border-radius: 4px;
\ No newline at end of file
$border-radius: 4px;
src/style.css
......@@ -80,6 +80,7 @@ button:focus-visible {
height: 100%;
padding: 20px;
}
/* 全局字体 */
@font-face {
font-family: "PangMen";
......
src/views/components/Map.vue
<template>
<!-- map-container上面加一个下拉框 -->
<div class="map-container w-full h-full relative" id="container">
<div class="absolute top-2 left-2 z-10">
<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]">
<el-tree-select
style="width: 150px"
v-model="treeDataValue"
......@@ -35,13 +35,19 @@ let infoWindow = null;
var points = ref([]);
const treeDataValue = ref([]);
const treeDataList = ref([]);
const treeDataAllList = ref([]);
const oneTypeId = ref("");
const twoTypeId = ref("");
const threeTypeId = ref("");
const fourTypeId = ref("");
const fiveTypeId = ref("");
const sixTypeId = ref("");
const map_opt = [
{
city: "太原",
color: "red",
},
];
const props = defineProps({
deptId: {
type: Number,
......@@ -56,7 +62,7 @@ onMounted(() => {
});
function handleSceneChange(val) {
treeDataList.value.forEach((item) => {
treeDataAllList.value.forEach((item) => {
if (item.id === val) {
const parentIds = item.parentIds;
const ids = parentIds
......@@ -83,7 +89,11 @@ function handleSceneChange(val) {
}
}
});
// getDeviceList();
// 先清除现有地图（如果存在）
if (map) {
map.clearMap(); // 清除覆盖物而不是销毁地图
}
getDeviceList();
}
function initMap() {
......@@ -106,6 +116,7 @@ function initMap() {
extensions: "all",
level: "province",
});
district.search("山西", function (status, result) {
// 查询成功时，result即为对应的行政区信息
const bounds = result.districtList[0].boundaries;
......@@ -113,6 +124,7 @@ function initMap() {
for (let i = 0; i < bounds.length; i++) {
mask.push([bounds[i]]);
}
const map = new AMap.Map("container", {
pitch: 30, // 倾斜角度
zoom: 6.7, // 设置当前显示级别
......@@ -133,6 +145,8 @@ function initMap() {
strokeColor: "blue", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
strokeWeight: 5, // 轮廓线宽度,默认为:2
// map:map // 这种方式相当于: polyline.setMap(map);
fillColor: "#80d8ff", // 填充颜色，使用16进制颜色代码赋值。默认值为#00D3FC
strokeColor: "blue", // 轮廓线颜色，使用16进制颜色代码赋值。默认值为#00D3FC
});
polyline.setMap(map);
}
......@@ -230,46 +244,7 @@ var closeInfoWindow = function () {
infoWindow.close();
};
//聚合点样式
var _renderClusterMarker = function (context) {
// debugger;
// let clusterCount = context.count; //聚合点内点数量
// let clusterData = context.clusterData; //聚合点数组
// let mainKey = context.index.mainKey; //聚合点对应索引
// let constData = clusterData[0][mainKey]; //当前层级（市/区）展示名
// 构建聚合点的显示内容
let content;
content = `
<div style="display: flex; align-items: center; justify-content: center; text-align: center;">
<img style="width:60px; height: 60px;" src="http://webapi.amap.com/theme/v1.3/m1.png"/>
<div style="font-size: 12px; text-align: center;">${111}</div>
</div>`;
context.marker.setContent(content);
// 自定义点击事件
context.marker.on("click", function (e) {
// touchend 移动端点击事件；mouseup pc点击
// let clickType = e.originEvent.type;
//创建窗体实例
// let infoWindow = new AMap.InfoWindow({
// content: "test", //窗体内容,支持插入dom.innerHTML
// anchor: "top-right", //锚点，窗体相对鼠标点击位置
// });
// //显示窗体
// //map:地图实例，[lng,lat]:窗体在地图中位置
// infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
// let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
// infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
// 移动端
// if (clusterData.length != 0 && mainKey == "building") {
// setTimeout(() => {
// emits("pointsClick", clusterData); //向父组件传递点位信息
// }, 100);
// }
});
};
var _renderClusterMarker = function (context) {};
onUnmounted(() => {
map?.destroy();
......@@ -290,12 +265,13 @@ function getDeviceList() {
item.lnglat = [item.longitude, item.latitude];
item.weight = 1;
});
initMap(); //
initMap();
});
}
function getDeviceTypeList() {
deviceTypeList().then((res) => {
treeDataAllList.value = res.data;
treeDataList.value = handleTree(res.data, "id");
});
}
......@@ -319,4 +295,11 @@ getDeviceTypeList();
margin-top: 3px;
font-family: "YouSheBiaoTiHei";
}
.amap-copyright {
display: none !important;
}
.amap-logo {
display: none !important;
}
</style>
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