609 lines
14 KiB
HTML
609 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>资产地图（聚合版）</title>
|
|||
|
|
|
|||
|
|
<!-- Leaflet -->
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|||
|
|
|
|||
|
|
<!-- MarkerCluster -->
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
|
|||
|
|
|
|||
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|||
|
|
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
|||
|
|
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: Arial, Helvetica, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#map {
|
|||
|
|
height: 100vh;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部 */
|
|||
|
|
#topStats {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statInline {
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
|||
|
|
backdrop-filter: blur(6px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statItem {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statNumber {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 不同颜色 */
|
|||
|
|
.statNumber.total {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statNumber.rented {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statNumber.vacant {
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分隔线 */
|
|||
|
|
.divider {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 16px;
|
|||
|
|
background: #eee;
|
|||
|
|
margin: 0 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索 */
|
|||
|
|
.searchInput {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
width: 280px; /* 这里加长了 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searchBtn {
|
|||
|
|
margin-left: 8px;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
background: #27ae60;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索结果 */
|
|||
|
|
.searchPanel {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 65px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(5%);
|
|||
|
|
width: 280px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searchItem {
|
|||
|
|
padding: 10px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searchItem:hover {
|
|||
|
|
background: #f5f5f5
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧面板 */
|
|||
|
|
#assetPanel {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 360px;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
transition: 0.3s;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#assetPanel.show {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panelHeader {
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #f7f8fa;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panelTitle {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.closeBtn {
|
|||
|
|
float: right;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panelMeta {
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.assetList {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.assetItem {
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-small {
|
|||
|
|
background-color: rgba(231, 76, 60, 0.6) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-small div {
|
|||
|
|
background-color: rgba(231, 76, 60, 0.8) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.marker-cluster-medium {
|
|||
|
|
background-color: rgba(231, 76, 60, 0.6) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-medium div {
|
|||
|
|
background-color: rgba(231, 76, 60, 0.8) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.marker-cluster-large {
|
|||
|
|
background-color: rgba(192, 57, 43, 0.6) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-large div {
|
|||
|
|
background-color: rgba(192, 57, 43, 0.85) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-custom {
|
|||
|
|
background: transparent !important;
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-custom .cluster-inner {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(231, 76, 60, 0.85);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marker-cluster-custom .cluster-inner span {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.assetTenant,
|
|||
|
|
.assetManager,
|
|||
|
|
.assetOwner,
|
|||
|
|
.assetStatus,
|
|||
|
|
.assetPurpose,
|
|||
|
|
.assetAddress,
|
|||
|
|
.assetRemark,
|
|||
|
|
.assetArea {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="app">
|
|||
|
|
|
|||
|
|
<!-- 顶部统计 -->
|
|||
|
|
|
|||
|
|
<!-- 顶部 -->
|
|||
|
|
<div id="topStats">
|
|||
|
|
<div class="statInline">
|
|||
|
|
|
|||
|
|
<div class="statItem">
|
|||
|
|
<span class="statNumber total">总资产: {{allAssetsCount}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
|
|||
|
|
<div class="statItem">
|
|||
|
|
<span class="statNumber rented">已出租: {{rentedCount}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
<div class="statItem">
|
|||
|
|
<span class="statNumber vacant">未出租: {{vacantCount}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索 -->
|
|||
|
|
<input v-model="searchKeyword" @keyup.enter="searchLocation" class="searchInput" placeholder="输入详细地址">
|
|||
|
|
|
|||
|
|
<button @click="searchLocation" class="searchBtn">搜索</button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索结果 -->
|
|||
|
|
<div v-if="searchResults.length" class="searchPanel">
|
|||
|
|
<div class="searchItem" v-for="(item,index) in searchResults" :key="index"
|
|||
|
|
@click="selectSearchResult(item)">
|
|||
|
|
{{item.assetName || item.address}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="map"></div>
|
|||
|
|
|
|||
|
|
<!-- 右侧资产面板 -->
|
|||
|
|
<div id="assetPanel" :class="{show:panelVisible}">
|
|||
|
|
<div class="panelHeader">
|
|||
|
|
<span class="panelTitle">{{currentRegion.address}}</span>
|
|||
|
|
<span class="closeBtn" @click="closePanel">✕</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panelMeta">
|
|||
|
|
资产数量：{{currentRegion.assets ? currentRegion.assets.length : 0}}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="assetList">
|
|||
|
|
<div class="assetItem" v-for="(a,index) in currentRegion.assets" :key="index" @click="goToDetail(a)">
|
|||
|
|
<div class="assetManager">运营单位：{{a.manager}}</div>
|
|||
|
|
<div class="assetOwner">产权单位：{{a.owner}}</div>
|
|||
|
|
<div class="assetPurpose">用途：{{a.purpose}}</div>
|
|||
|
|
<div class="assetAddress">地址：{{a.address}}</div>
|
|||
|
|
<div class="assetStatus">资产状态：{{a.status || 未知}}</div>
|
|||
|
|
<div class="assetArea">面积：{{a.area}}㎡</div>
|
|||
|
|
<div class="assetRemark">备注：{{a.remark || '暂无'}}</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
new Vue({
|
|||
|
|
|
|||
|
|
el: "#app",
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
host: 'http://' + 'www.ycgongxiao.xyz:52100',
|
|||
|
|
searchKeyword: "",
|
|||
|
|
searchResults: [],
|
|||
|
|
searchMarker: null,
|
|||
|
|
map: null,
|
|||
|
|
markerGroup: null,
|
|||
|
|
regions: [],
|
|||
|
|
allAssetsCount: 0,
|
|||
|
|
rentedCount: 0,
|
|||
|
|
vacantCount: 0,
|
|||
|
|
panelVisible: false,
|
|||
|
|
currentRegion: {}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.initMap()
|
|||
|
|
this.queryAssetsRegionsInfo()
|
|||
|
|
this.countAllAssets()
|
|||
|
|
this.countRentedAssets()
|
|||
|
|
this.countRestAssets()
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 输入清空自动隐藏
|
|||
|
|
searchKeyword(val) {
|
|||
|
|
if (!val) {
|
|||
|
|
this.searchResults = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
// 🗺️ 初始化地图
|
|||
|
|
initMap() {
|
|||
|
|
|
|||
|
|
this.map = L.map('map').setView([30.630608, 111.375863], 10)
|
|||
|
|
|
|||
|
|
L.tileLayer('./map/{z}/{x}/{y}/tile.png', {
|
|||
|
|
maxZoom: 18,
|
|||
|
|
minZoom: 8
|
|||
|
|
}).addTo(this.map)
|
|||
|
|
|
|||
|
|
// ⭐ 核心：自定义聚合
|
|||
|
|
this.markerGroup = L.markerClusterGroup({
|
|||
|
|
|
|||
|
|
iconCreateFunction: (cluster) => {
|
|||
|
|
|
|||
|
|
let total = 0
|
|||
|
|
|
|||
|
|
let markers = cluster.getAllChildMarkers()
|
|||
|
|
|
|||
|
|
markers.forEach(m => {
|
|||
|
|
let region = m.options.regionData
|
|||
|
|
total += (region && region.assets ? region.assets.length : 0)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return L.divIcon({
|
|||
|
|
html: `
|
|||
|
|
<div class="cluster-inner">
|
|||
|
|
<span>${total}</span>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
className: 'marker-cluster-custom',
|
|||
|
|
iconSize: L.point(40, 40)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.map.addLayer(this.markerGroup)
|
|||
|
|
|
|||
|
|
// 点击地图关闭弹窗
|
|||
|
|
// 点击地图空白关闭面板
|
|||
|
|
this.map.on('click', () => {
|
|||
|
|
this.searchResults = []
|
|||
|
|
this.panelVisible = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
countAllAssets() {
|
|||
|
|
fetch(this.host + "/seeyon/rest/assetsRegion/countAssets", {
|
|||
|
|
method: 'GET'
|
|||
|
|
})
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(res => {
|
|||
|
|
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.error("接口错误", res.message)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.allAssetsCount = res.data || 0
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error("加载失败", err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
countRentedAssets() {
|
|||
|
|
fetch(this.host + "/seeyon/rest/assetsRegion/countAssets?type=1", {
|
|||
|
|
method: 'GET'
|
|||
|
|
})
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(res => {
|
|||
|
|
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.error("接口错误", res.message)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.rentedCount = res.data || 0
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error("加载失败", err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
countRestAssets() {
|
|||
|
|
fetch(this.host + "/seeyon/rest/assetsRegion/countAssets?type=2", {
|
|||
|
|
method: 'GET'
|
|||
|
|
}).then(res => res.json())
|
|||
|
|
.then(res => {
|
|||
|
|
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.error("接口错误", res.message)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.vacantCount = res.data || 0
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error("加载失败", err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 📡 请求数据
|
|||
|
|
queryAssetsRegionsInfo() {
|
|||
|
|
|
|||
|
|
fetch(this.host + "/seeyon/rest/assetsRegion/getall", {
|
|||
|
|
method: 'POST'
|
|||
|
|
})
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(res => {
|
|||
|
|
|
|||
|
|
if (res.code !== 0) {
|
|||
|
|
console.error("接口错误", res.message)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.regions = res.data || []
|
|||
|
|
this.renderMarkers()
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
console.error("加载失败", err)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 📊 面积计算
|
|||
|
|
calcArea(list) {
|
|||
|
|
let sum = 0
|
|||
|
|
list.forEach(a => {
|
|||
|
|
sum += Number(a.area || 0)
|
|||
|
|
})
|
|||
|
|
return sum
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 📍 渲染 marker（核心）
|
|||
|
|
renderMarkers() {
|
|||
|
|
|
|||
|
|
// 清空旧数据
|
|||
|
|
this.markerGroup.clearLayers()
|
|||
|
|
|
|||
|
|
this.regions.forEach(r => {
|
|||
|
|
|
|||
|
|
let marker = L.marker([r.lat, r.lng])
|
|||
|
|
|
|||
|
|
marker.options.regionData = r
|
|||
|
|
|
|||
|
|
// 点击打开右侧面板
|
|||
|
|
marker.on("click", () => {
|
|||
|
|
this.showAssetPanel(r)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// hover提示
|
|||
|
|
marker.on("mouseover", () => {
|
|||
|
|
|
|||
|
|
let area = this.calcArea(r.assets || [])
|
|||
|
|
let owner = r.owner || ""
|
|||
|
|
let manager = r.manager || ""
|
|||
|
|
let count = (r.assets || []).length
|
|||
|
|
|
|||
|
|
let html =
|
|||
|
|
"<b>位置：" + r.address + "</b><br>" +
|
|||
|
|
"运营单位：" + manager + "<br>" +
|
|||
|
|
"产权单位：" + owner + "<br>" +
|
|||
|
|
"面积：" + area + "㎡<br>" +
|
|||
|
|
"资产数量：" + count
|
|||
|
|
|
|||
|
|
marker.bindPopup(html).openPopup()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
marker.on("mouseout", () => {
|
|||
|
|
marker.closePopup()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ⭐ 加入聚合组
|
|||
|
|
this.markerGroup.addLayer(marker)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 搜索
|
|||
|
|
searchLocation() {
|
|||
|
|
|
|||
|
|
if (!this.searchKeyword) return
|
|||
|
|
|
|||
|
|
fetch(this.host + "/seeyon/rest/assetsRegion/search", {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json"
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
keyword: this.searchKeyword
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.then(res => res.json())
|
|||
|
|
.then(res => {
|
|||
|
|
if (res.code !== 0) return
|
|||
|
|
|
|||
|
|
let list = res.data || []
|
|||
|
|
|
|||
|
|
if (!Array.isArray(list)) {
|
|||
|
|
list = [list]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.searchResults = list
|
|||
|
|
// this.selectSearchResult(list[0])
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goToDetail(item) {
|
|||
|
|
let id = item.id
|
|||
|
|
let baseUrl =
|
|||
|
|
`http://www.ycgongxiao.xyz:52100/seeyon/cap4/businessTemplateController.do?v=V10_0SP1_251022_222110_0&method=formContent&type=browse&rightId=-51300951786173064.-7277875919159408408&moduleId=${id}&formTemplateId=3171356881354704902&viewConditionId=&conditionIdDeal=&columnId=3171356881354704902&moduleType=42&isUnFlowDrawer=true&needUpdate=1&tplId=850010&btnId=&comeFrom=list&_v=1776323480999`
|
|||
|
|
window.open(baseUrl)
|
|||
|
|
},
|
|||
|
|
// 选择搜索结果
|
|||
|
|
selectSearchResult(item) {
|
|||
|
|
|
|||
|
|
// 定位
|
|||
|
|
this.map.setView([item.lat, item.lng], 18);
|
|||
|
|
|
|||
|
|
// 移除之前的搜索标记
|
|||
|
|
if (this.searchMarker) {
|
|||
|
|
this.markerGroup.removeLayer(this.searchMarker);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==============================================
|
|||
|
|
// ✅ 最佳方案：找到原有的那个 marker，直接高亮/打开弹窗
|
|||
|
|
// ==============================================
|
|||
|
|
let targetMarker = null;
|
|||
|
|
|
|||
|
|
// 遍历聚合组里所有原有 marker，匹配数据
|
|||
|
|
this.markerGroup.eachLayer((layer) => {
|
|||
|
|
if (layer.regionData && layer.regionData.id === item.id) {
|
|||
|
|
targetMarker = layer;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 直接打开原有 marker 的弹窗（不新增任何标记）
|
|||
|
|
if (targetMarker) {
|
|||
|
|
targetMarker.fire('mouseover');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 如果没找到（新地点），再创建一个底层标记
|
|||
|
|
// this.searchMarker = L.marker([item.lat, item.lng], {
|
|||
|
|
// zIndexOffset: -1000,
|
|||
|
|
// }).addTo(this.markerGroup);
|
|||
|
|
this.searchResults = []
|
|||
|
|
},
|
|||
|
|
// 📌 打开面板
|
|||
|
|
showAssetPanel(region) {
|
|||
|
|
this.currentRegion = region
|
|||
|
|
this.panelVisible = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// ❌ 关闭面板
|
|||
|
|
closePanel() {
|
|||
|
|
this.panelVisible = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|