From 47fa84717d17477b69bcb8c2a6794bd8189e1bf3 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 07 三月 2024 14:41:41 +0800
Subject: [PATCH] refactor:重构街道地图功能
---
src/views/daoAnOffice/center/map.vue | 102 ++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 84 insertions(+), 18 deletions(-)
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index eb4fa85..dc1c3ad 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,15 +35,15 @@
import { require } from '@/utils/require.js';
-import icon1 from '@/assets/img/sgyfd.png';
-import icon2 from '@/assets/img/zdlytd.png';
-import icon3 from '@/assets/img/djyjq.png';
-import icon4 from '@/assets/img/jlpb.png';
-import icon5 from '@/assets/img/dwsg.png';
-import icon6 from '@/assets/img/jtysqy.png';
-import icon7 from '@/assets/img/zdlytd.png';
-import icon8 from '@/assets/img/gjxl.png';
-import icon9 from '@/assets/img/aqyh.png';
+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);
@@ -177,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) // 鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
});
}
@@ -243,9 +243,54 @@
trafficLayer.setMap(mapInstance);
- // test();
- // console.log(markers.value[0]);
- // mapInstance.add(markers.value[0].markerList);
+
+ const options = {
+ subdistrict: 0,
+ extensions: "all",
+ level: "district",
+ };
+
+ // 闄愬埗涓�涓尯鍩熻疆寤�
+ AMap.plugin("AMap.DistrictSearch", function () {
+ //鍦ㄥ洖璋冨嚱鏁颁腑瀹炰緥鍖栨彃浠讹紝骞朵娇鐢ㄦ彃浠跺姛鑳�
+ const district = new AMap.DistrictSearch(options);
+ district.search("閮芥睙鍫板競", (status, result) => {
+ const outer = [
+ new AMap.LngLat(-360, 90, true),
+ new AMap.LngLat(-360, -90, true),
+ new AMap.LngLat(360, -90, true),
+ new AMap.LngLat(360, 90, true),
+ ];
+ const holes = result.districtList[0].boundaries;
+
+ const pathArray = [outer];
+ pathArray.push.apply(pathArray, holes);
+ const polygon = new AMap.Polygon({
+ pathL: pathArray,
+ //绾挎潯棰滆壊锛屼娇鐢�16杩涘埗棰滆壊浠ｇ爜璧嬪�笺�傞粯璁ゅ�间负#006600
+ strokeColor: "rgb(20,164,173)",
+ strokeWeight: 4,
+ //杞粨绾块�忔槑搴︼紝鍙栧�艰寖鍥碵0,1]锛�0琛ㄧず瀹屽叏閫忔槑锛�1琛ㄧず涓嶉�忔槑銆傞粯璁や负0.9
+ strokeOpacity: 0.5,
+ //澶氳竟褰㈠～鍏呴鑹诧紝浣跨敤16杩涘埗棰滆壊浠ｇ爜璧嬪�硷紝濡傦細#FFAA00
+ fillColor: "rgba(0,0,0)",
+ //澶氳竟褰㈠～鍏呴�忔槑搴︼紝鍙栧�艰寖鍥碵0,1]锛�0琛ㄧず瀹屽叏閫忔槑锛�1琛ㄧず涓嶉�忔槑銆傞粯璁や负0.9
+ fillOpacity: 1,
+ //杞粨绾挎牱寮忥紝瀹炵嚎:solid锛岃櫄绾�:dashed
+ strokeStyle: "solid",
+ /*鍕惧嫆褰㈢姸杞粨鐨勮櫄绾垮拰闂撮殭鐨勬牱寮忥紝姝ゅ睘鎬у湪strokeStyle 涓篸ashed 鏃舵湁鏁堬紝 姝ゅ睘鎬у湪
+ ie9+娴忚鍣ㄦ湁鏁� 鍙栧�硷細
+ 瀹炵嚎锛歔0,0,0]
+ 铏氱嚎锛歔10,10] 锛孾10,10] 琛ㄧず10涓儚绱犵殑瀹炵嚎鍜�10涓儚绱犵殑绌虹櫧锛堝姝ゅ弽澶嶏級缁勬垚鐨勮櫄绾�
+ 鐐圭敾绾匡細[10,2,10]锛� [10,2,10] 琛ㄧず10涓儚绱犵殑瀹炵嚎鍜�2涓儚绱犵殑绌虹櫧 + 10涓儚绱犵殑瀹�
+ 绾垮拰10涓儚绱犵殑绌虹櫧 锛堝姝ゅ弽澶嶏級缁勬垚鐨勮櫄绾�*/
+ strokeDasharray: [10, 2, 10],
+ });
+ polygon.setPath(pathArray);
+ mapInstance.add(polygon);
+ });
+ });
+
})
.catch((e) => {
console.log(e);
@@ -259,6 +304,7 @@
height: 100%;
position: absolute;
z-index: 0;
+ box-shadow: inset 0px 0px 100px 18px #081729;
.map-content {
width: 100%;
@@ -282,7 +328,8 @@
.item-tb-img {
width: 20px;
- height: 20px;
+ object-fit: contain;
+ margin-right: 5px;
}
.info-div-p {
@@ -320,18 +367,37 @@
.road {
position: absolute;
- bottom: 202px;
+ bottom: 180px;
left: 2434px;
z-index: 999;
width: 65px;
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