From 26ab0d5c9dba0b1bb8605f49195a8ebfd0e822e9 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 16:29:57 +0800
Subject: [PATCH] fix:修改图表颜色
---
src/views/daoAnOffice/center/map.vue | 59 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 45 insertions(+), 14 deletions(-)
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index 2adb5ef..0a4df18 100644
--- a/src/views/daoAnOffice/center/map.vue
+++ b/src/views/daoAnOffice/center/map.vue
@@ -2,7 +2,7 @@
<div class="map-container">
<div class="map-content" id="map" ref="map"></div>
-
+ <div class="shadow"></div>
<!-- 鍥炬爣鑿滃崟 -->
<div class="info-box">
<!-- right鑿滃崟-->
@@ -35,6 +35,16 @@
import { require } from '@/utils/require.js';
+import icon1 from '@/assets/img/icon/icon1.png';
+import icon2 from '@/assets/img/icon/icon2.png';
+import icon3 from '@/assets/img/icon/icon3.png';
+import icon4 from '@/assets/img/icon/icon4.png';
+import icon5 from '@/assets/img/icon/icon5.png';
+import icon6 from '@/assets/img/icon/icon6.png';
+import icon7 from '@/assets/img/icon/icon7.png';
+import icon8 from '@/assets/img/icon/icon8.png';
+import icon9 from '@/assets/img/icon/icon9.png';
+
const map = ref(null);
let mapInstance = null;
@@ -53,7 +63,7 @@
name: '浜嬫晠鏄撳彂澶氬彂璺',
num: 78,
type: 1,
- icon: require('@/assets/img/sgyfd.png'),
+ icon: icon1,
positions: [[103.647593, 30.981856], [103.646627, 30.988235], [103.650077, 30.988074]],
isActive: false
},
@@ -63,7 +73,7 @@
type: 2,
num: 178,
positions: [[103.647888, 30.985006], [103.650983, 30.986252], [103.641461, 30.984588]],
- icon: require('@/assets/img/zdlytd.png'),
+ icon: icon2,
isActive: false
},
{
@@ -72,7 +82,7 @@
num: 278,
positions: [[103.637916, 30.986298], [103.636751, 30.989508], [103.64093, 30.99344]],
type: 3,
- icon: require('@/assets/img/djyjq.png'),
+ icon: icon3,
isActive: false
},
{
@@ -81,7 +91,7 @@
num: 348,
positions: [[103.646413, 30.996714], [103.634337, 31.0026], [103.620841, 31.001253]],
type: 4,
- icon: require('@/assets/img/jlpb.png'),
+ icon: icon4,
isActive: false
},
{
@@ -90,7 +100,7 @@
num: 578,
positions: [[103.62134, 30.996972], [103.622005, 30.991923], [103.63062, 30.986588]],
type: 5,
- icon: require('@/assets/img/dwsg.png'),
+ icon: icon5,
isActive: false
},
{
@@ -99,7 +109,7 @@
num: 788,
positions: [[103.640319, 30.984486], [103.644916, 30.986956], [103.646853, 30.992143]],
type: 1,
- icon: require('@/assets/img/jtysqy.png'),
+ icon: icon6,
isActive: false
},
{
@@ -108,7 +118,7 @@
num: 758,
positions: [[103.651482, 30.995956], [103.639654, 30.995206], [103.631119, 30.987425]],
type: 7,
- icon: require('@/assets/img/zdlytd.png'),
+ icon: icon7,
isActive: false
},
{
@@ -117,7 +127,7 @@
num: 758,
positions: [[103.652716, 30.974745], [103.668166, 30.976447], [103.672511, 30.979961]],
type: 8,
- icon: require('@/assets/img/gjxl.png'),
+ icon: icon8,
isActive: false
},
{
@@ -126,7 +136,7 @@
num: 718,
positions: [[103.674056, 30.988625], [103.668155, 30.996379], [103.660333, 30.998098]],
type: 9,
- icon: require('@/assets/img/aqyh.png'),
+ icon: icon9,
isActive: false
},
@@ -167,9 +177,9 @@
// 鍒涘缓鍥炬爣
const createIcon = (img) => {
return new AMap.Icon({
- size: new AMap.Size(34, 41), // 鍥炬爣灏哄
+ // size: new AMap.Size(43.8, 49.2), // 鍥炬爣灏哄
image: img, // Icon鐨勫浘鍍�
- imageSize: new AMap.Size(34, 41) // 鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
+ imageSize: new AMap.Size(43.8, 49.2) // 鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
});
}
@@ -249,6 +259,7 @@
height: 100%;
position: absolute;
z-index: 0;
+ box-shadow: inset 0px 0px 100px 18px #081729;
.map-content {
width: 100%;
@@ -272,7 +283,8 @@
.item-tb-img {
width: 20px;
- height: 20px;
+ object-fit: contain;
+ margin-right: 5px;
}
.info-div-p {
@@ -317,11 +329,30 @@
cursor: pointer;
.item-tb-p {
- font-family: PingFang SC;
+ font-family: 'PingFang SC';
+
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 42px;
}
}
+
+.shadow {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ box-shadow: inset 0px 0px 100px 120px #081729;
+ pointer-events: none;
+}
+
+:deep(.amap-logo) {
+ display: none !important;
+}
+
+:deep(.amap-copyright) {
+ visibility: hidden !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0