From dda7d12ed9520176a43edc64651b8d220e470f93 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 17:01:41 +0800
Subject: [PATCH] feat:修改高德地图区域
---
src/views/daoAnOffice/center/map.vue | 110 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 93 insertions(+), 17 deletions(-)
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index 2adb5ef..133bad3 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) // 鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
});
}
@@ -233,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);
@@ -249,6 +304,7 @@
height: 100%;
position: absolute;
z-index: 0;
+ box-shadow: inset 0px 0px 100px 18px #081729;
.map-content {
width: 100%;
@@ -272,7 +328,8 @@
.item-tb-img {
width: 20px;
- height: 20px;
+ object-fit: contain;
+ margin-right: 5px;
}
.info-div-p {
@@ -317,11 +374,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