From 8350978c5e612acd8e9095429f3524623e7ac0a5 Mon Sep 17 00:00:00 2001
From: "978184212@qq.com" <978184212@qq.com>
Date: Wed, 19 Aug 2026 15:39:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE=E7=9A=84?=
=?UTF-8?q?=E7=82=B9=E8=81=9A=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/maps/index.vue | 559 ++++++++++++++++++++++---------------------
1 file changed, 290 insertions(+), 269 deletions(-)
diff --git a/pages/maps/index.vue b/pages/maps/index.vue
index 71a0967..caa4a47 100644
--- a/pages/maps/index.vue
+++ b/pages/maps/index.vue
@@ -1,6 +1,5 @@
-
-
-
-
-
-
@@ -72,15 +66,17 @@
stationInfo: [],
pestlightMarker: null,
stationlist: [],
- timerSet: null
+ timerSet: null,
+ // 点聚合相关
+ mapContext: null,
+ clusterMarkerIds: [], // 参与聚合的marker id列表
+ isClusterInited: false // 是否已初始化聚合
};
},
onLoad() {
- // this.isscd = true
- // this.getList()
- this.$nextTick(() => {
- this.getList()
- })
+ this.$nextTick(() => {
+ this.getList()
+ })
},
onShow() {
var that = this
@@ -96,14 +92,10 @@
console.log(res, 165)
if (res.data.code == 0) {
let userInfo = res.data.data;
- // uni.setStorageSync('third_session', userInfo.thirdSession);
if (!userInfo.id) {
uni.reLaunch({
url: '/packDetail/pages/login/login'
})
- } else {
- // that.isscd = true
- //
}
}
})
@@ -114,13 +106,137 @@
url: '/pages/loginindex'
})
}
-
},
onReady() {
- // 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性
- this.mapContext = uni.createMapContext("alarm_map", this);
+ // 获取地图上下文
+ this.mapContext = uni.createMapContext("map", this);
+ // 初始化点聚合
+ this.initCluster()
},
methods: {
+ // ===== 新增：初始化点聚合 =====
+ initCluster() {
+ if (!this.mapContext) {
+ setTimeout(() => {
+ this.initCluster()
+ }, 500)
+ return
+ }
+ // 1. 初始化聚合配置
+ this.mapContext.initMarkerCluster({
+ enableDefaultStyle: false, // 使用默认样式
+ zoomOnClick: true, // 点击聚合点时是否放大地图
+ gridSize: 60, // 聚合网格大小
+ complete: (res) => {
+ console.log('initMarkerCluster success', res)
+ this.isClusterInited = true
+ // 聚合初始化完成后，添加杀虫灯标记
+ this.addPestMarkersToCluster()
+ }
+ })
+
+ // 2. 监听聚合簇创建事件，自定义聚合簇样式
+ this.mapContext.on('markerClusterCreate', (res) => {
+ console.log('markerClusterCreate', res)
+ const clusters = res.clusters
+ const clusterMarkers = clusters.map((cluster) => {
+ // 获取该聚合簇中第一个marker的坐标作为中心点
+ const centerLat = cluster.center.latitude
+ const centerLng = cluster.center.longitude
+ const count = cluster.markerIds.length
+
+ return {
+ id: cluster.clusterId,
+ latitude: centerLat,
+ longitude: centerLng,
+ width: 40,
+ height: 40,
+ iconPath: '/static/zhandian_sahchong_dingwei.png',
+ label: {
+ content: count + '',
+ color: '#ffffff',
+ fontSize: 12,
+ fontWeight: 'bold',
+ anchorX: 0,
+ anchorY: -8,
+ borderWidth: 0,
+ bgColor: 'rgba(0,0,0,0.6)',
+ borderRadius: 10,
+ padding: 2
+ }
+ }
+ })
+ // 更新聚合簇样式
+ this.mapContext.addMarkers({
+ markers: clusterMarkers,
+ clear: false,
+ complete: (res) => {
+ console.log('add cluster markers success', res)
+ }
+ })
+ })
+ },
+
+ // ===== 新增：添加杀虫灯到聚合 =====
+ addPestMarkersToCluster() {
+ if (!this.isClusterInited) return
+
+ // 先移除之前的聚合标记
+ if (this.clusterMarkerIds.length > 0) {
+ this.mapContext.removeMarkers({
+ markerIds: this.clusterMarkerIds,
+ complete: (res) => {
+ console.log('remove old cluster markers', res)
+ }
+ })
+ this.clusterMarkerIds = []
+ }
+
+ // 如果杀虫灯开关是关闭状态，不添加
+ if (!this.isscd || this.pestlight.length === 0) return
+
+ // 准备聚合标记数据
+ const pestMarkers = []
+ this.pestlight.forEach((item, index) => {
+ const markerId = 10000 + index
+ pestMarkers.push({
+ id: markerId,
+ latitude: Number(item.latitude),
+ longitude: Number(item.longitude),
+ width: 15,
+ height: 20,
+ iconPath: '/static/zhandian_sahchong_dingwei.png',
+ joinCluster: true, // 参与聚合
+ inType: 'pestlight',
+ stationName: item.stationName,
+ stationCode: item.stationCode
+ })
+ this.clusterMarkerIds.push(markerId)
+ })
+
+ // 通过 addMarkers 添加参与聚合的标记
+ this.mapContext.addMarkers({
+ markers: pestMarkers,
+ clear: false,
+ complete: (res) => {
+ console.log('add pest markers to cluster success', res)
+ }
+ })
+ },
+
+ // ===== 修改：移除杀虫灯从聚合 =====
+ removePestMarkersFromCluster() {
+ if (this.clusterMarkerIds.length > 0 && this.mapContext) {
+ this.mapContext.removeMarkers({
+ markerIds: this.clusterMarkerIds,
+ complete: (res) => {
+ console.log('remove pest markers from cluster', res)
+ }
+ })
+ this.clusterMarkerIds = []
+ }
+ },
+
getList() {
this.markers = []
this.markersNoPest = []
@@ -131,103 +247,178 @@
});
this.$http.get('/applet/survStationInfo/stationMap').then(res => {
this.stationlist = [...res.data.data.pestlight, ...res.data.data.cusLocation, ...res.data.data.stationInfo]
- this.stationlist.forEach((item,index) => {
- item.id = index;
- if(item.inType == 'pestlight'){
- this.pestlight.push(item)
- }
- if(item.stationType == 'cusLocaltion'){
- this.cusLocation.push(item)
- }
- if(item.stationType == 'orient' || item.stationType == 'livestock'){
- this.stationInfo.push(item)
- }
- this.list.push({
- latitude:Number(item.stationLatitude),
- longitude: Number(item.stationLongitude),
- stationType:item.stationType,
- sortNo: item.sortNo,
- stationName: item.stationName,
- stationCode: item.stationCode
- })
- })
- this.issscd = false
- this.isssscd = false
- this.qiyeChange()
- this.list1query()
- this.list2query()
- uni.hideLoading();
- })
- },
- // 处理 stationlist 数据方法
- processStationList(stationlist) {
- if (stationlist) {
- stationlist.forEach(item => {
+ this.stationlist.forEach((item,index) => {
+ item.id = index;
+ if(item.inType == 'pestlight'){
+ this.pestlight.push(item)
+ }
+ if(item.stationType == 'cusLocaltion'){
+ this.cusLocation.push(item)
+ }
+ if(item.stationType == 'orient' || item.stationType == 'livestock'){
+ this.stationInfo.push(item)
+ }
this.list.push({
- latitude: item.inType === 'pestlight' ? Number(item.latitude) : Number(item
- .stationLatitude),
- longitude: item.inType === 'pestlight' ? Number(item.longitude) : Number(item
- .stationLongitude),
- stationType: item.inType === 'pestlight' ? 'pestlight' : item.stationType,
+ latitude:Number(item.stationLatitude),
+ longitude: Number(item.stationLongitude),
+ stationType:item.stationType,
sortNo: item.sortNo,
stationName: item.stationName,
stationCode: item.stationCode
})
})
+ this.issscd = false
+ this.isssscd = false
+ this.qiyeChange()
+ this.list1query()
+ this.list2query()
+
+ // 如果聚合已初始化，直接添加杀虫灯；否则等待初始化完成
+ if (this.isClusterInited) {
+ this.addPestMarkersToCluster()
+ }
+ uni.hideLoading();
+ })
+ },
+
+ // ===== 修改：杀虫灯开关控制 =====
+ switch1Change() {
+ this.isscd = !this.isscd;
+ if (this.isscd) {
+ // 打开 - 添加杀虫灯到聚合
+ this.addPestMarkersToCluster()
+ } else {
+ // 关闭 - 从聚合中移除杀虫灯
+ this.removePestMarkersFromCluster()
}
},
- // 生成 pointers 数据方法
- generatePointers() {
- const iconConfig = {
- // pestlight: {
- // iconPath: '/static/zhandian_sahchong_dingwei.png',
- // width: 15,
- // height: 20
- // },
- orient: {
- iconPath: '/static/zhandian_nongtian_dingwei.png',
- width: 35,
- height: 52
- },
- livestock: {
- iconPath: '/static/zhandian_xuqin_dingwei.png',
- width: 35,
- height: 52
- },
- cusLocaltion: {
- iconPath: '/static/qiyeIcon.png',
- width: 35,
- height: 52
- }
- }
- this.list.forEach((item, i) => {
- const config = iconConfig[item.stationType] || {}
- item.iconPath = config.iconPath || ''
- item.width = config.width || 0
- item.height = config.height || 0
- this.pointers.push({
- id: i,
+
+ // ===== 以下方法完全保持原样 =====
+ qiyeChange() {
+ for (let i = 0; i < this.cusLocation.length; i++) {
+ const item = this.cusLocation[i];
+ item.iconPath = '/static/qiyeIcon.png';
+ item.latitude = Number(item.stationLatitude);
+ item.longitude = Number(item.stationLongitude);
+ item.width = 35;
+ item.height = 52;
+ this.list.push({
+ latitude:Number(item.stationLatitude),
+ longitude: Number(item.stationLongitude),
+ stationType:item.stationType,
+ sortNo: item.sortNo,
+ stationName: item.stationName,
+ stationCode: item.stationCode
+ })
+ const markerItem = {
+ id: item.id,
iconPath: item.iconPath,
- latitude: Number(item.latitude),
- longitude: Number(item.longitude),
+ latitude: item.latitude,
+ longitude: item.longitude,
width: item.width,
height: item.height,
customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
+ anchorY: 0,
+ anchorX: 0,
+ display: 'ALWAYS'
},
stationType: item.stationType,
stationName: item.stationName,
stationCode: item.stationCode,
- joinCluster: true // 是否参与点聚合
+ joinCluster: true
+ };
+ this.markers.push(markerItem);
+ }
+ },
+ switch2Change() {
+ this.issscd = !this.issscd
+ this.list1query()
+ },
+ switch3Change() {
+ this.isssscd = !this.isssscd
+ this.list2query()
+ },
+ list1query(){
+ if (!this.issscd) {
+ for (let i = 0; i < this.stationInfo.length; i++) {
+ const item = this.stationInfo[i];
+ if(item.stationType === 'orient'){
+ item.iconPath = '/static/zhandian_nongtian_dingwei.png';
+ item.latitude = Number(item.stationLatitude);
+ item.longitude = Number(item.stationLongitude);
+ item.width = 35;
+ item.height = 52;
+ const markerItem = {
+ id: item.id,
+ iconPath: item.iconPath,
+ latitude: item.latitude,
+ longitude: item.longitude,
+ width: item.width,
+ height: item.height,
+ customCallout: {
+ anchorY: 0,
+ anchorX: 0,
+ display: 'ALWAYS'
+ },
+ stationType: item.stationType,
+ stationName: item.stationName,
+ stationCode: item.stationCode,
+ joinCluster: true
+ };
+ this.markers.push(markerItem);
+ }
+ }
+ } else {
+ this.markers = this.markers.filter((item)=>{
+ return item.stationType !== 'orient'
})
- })
+ }
+ },
+ list2query(){
+ if (!this.isssscd) {
+ for (let i = 0; i < this.stationInfo.length; i++) {
+ const item = this.stationInfo[i];
+ if(item.stationType === 'livestock'){
+ item.iconPath = '/static/zhandian_xuqin_dingwei.png';
+ item.latitude = Number(item.stationLatitude);
+ item.longitude = Number(item.stationLongitude);
+ item.width = 35;
+ item.height = 52;
+ const markerItem = {
+ id: item.id,
+ iconPath: item.iconPath,
+ latitude: item.latitude,
+ longitude: item.longitude,
+ width: item.width,
+ height: item.height,
+ customCallout: {
+ anchorY: 0,
+ anchorX: 0,
+ display: 'ALWAYS'
+ },
+ stationType: item.stationType,
+ stationName: item.stationName,
+ stationCode: item.stationCode,
+ joinCluster: true
+ };
+ this.markers.push(markerItem);
+ }
+ }
+ } else {
+ this.markers = this.markers.filter((item)=>{
+ return item.stationType !== 'livestock'
+ })
+ }
},
markertap(e) {
const index = e.detail.markerId
- console.log(e.detail,'index')
- if (['orient', 'livestock'].includes(this.list[index].stationType)) {
+ console.log(e.detail,'index')
+ // 判断是否点击的是聚合点
+ if (e.detail && e.detail.isCluster) {
+ console.log('点击了聚合点:', e.detail)
+ return
+ }
+ if (['orient', 'livestock'].includes(this.list[index]?.stationType)) {
uni.navigateTo({
url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
})
@@ -235,7 +426,7 @@
},
callouttap(e) {
const index = e.detail.markerId
- if (['orient', 'livestock'].includes(this.list[index].stationType)) {
+ if (['orient', 'livestock'].includes(this.list[index]?.stationType)) {
uni.navigateTo({
url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
})
@@ -243,174 +434,7 @@
},
todetails(item) {
console.log(item, '还是个然后')
- },
- switch1Change() {
- this.isscd = !this.isscd;
- let index = 0;
- if (!this.isscd) {
- this.pestlightMarker = [];
- this.timerSet = setInterval(() => {
- for (let i = 0; i < 50 && index < this.pestlight.length; i++) {
- const item = this.pestlight[index];
- item.iconPath = '/static/zhandian_sahchong_dingwei.png';
- item.latitude = Number(item.latitude);
- item.longitude = Number(item.longitude);
- item.width = 15;
- item.height = 20;
- // 创建符合 markers 格式的对象
- const markerItem = {
- id: item.id,
- iconPath: item.iconPath,
- latitude: item.latitude,
- longitude: item.longitude,
- width: item.width,
- height: item.height,
- customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
- },
- // stationType: item.stationType,
- inType: item.inType,
- stationName: item.stationName,
- stationCode: item.stationCode,
- joinCluster: false // 是否参与点聚合
- };
- this.markers.push(markerItem);
- index++;
- }
- // this.markers = this.markers.concat(aa);
- if (index >= this.pestlight.length) {
- clearInterval(this.timerSet);
- }
- }, 1000);
-
- } else {
- clearInterval(this.timerSet);
- this.markers = this.markers.filter((item)=>{
- return item.inType !== 'pestlight'
- })
- }
- },
- qiyeChange() {
- for (let i = 0; i < this.cusLocation.length; i++) {
- const item = this.cusLocation[i];
- item.iconPath = '/static/qiyeIcon.png';
- item.latitude = Number(item.stationLatitude);
- item.longitude = Number(item.stationLongitude);
- item.width = 35;
- item.height = 52;
- this.list.push({
- latitude:Number(item.stationLatitude),
- longitude: Number(item.stationLongitude),
- stationType:item.stationType,
- sortNo: item.sortNo,
- stationName: item.stationName,
- stationCode: item.stationCode
- })
- // 创建符合 markers 格式的对象
- const markerItem = {
- id: item.id,
- iconPath: item.iconPath,
- latitude: item.latitude,
- longitude: item.longitude,
- width: item.width,
- height: item.height,
- customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
- },
- stationType: item.stationType,
- stationName: item.stationName,
- stationCode: item.stationCode,
- joinCluster: true // 是否参与点聚合
- };
- this.markers.push(markerItem);
- }
- },
- switch2Change() {
- this.issscd = !this.issscd
- this.list1query()
- },
- switch3Change() {
- this.isssscd = !this.isssscd
- this.list2query()
- },
- list1query(){
- if (!this.issscd) {
- for (let i = 0; i < this.stationInfo.length; i++) {
- const item = this.stationInfo[i];
- if(item.stationType === 'orient'){
- item.iconPath = '/static/zhandian_nongtian_dingwei.png';
- item.latitude = Number(item.stationLatitude);
- item.longitude = Number(item.stationLongitude);
- item.width = 35;
- item.height = 52;
- // 创建符合 markers 格式的对象
- const markerItem = {
- id: item.id,
- iconPath: item.iconPath,
- latitude: item.latitude,
- longitude: item.longitude,
- width: item.width,
- height: item.height,
- customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
- },
- stationType: item.stationType,
- stationName: item.stationName,
- stationCode: item.stationCode,
- joinCluster: true // 是否参与点聚合
- };
- this.markers.push(markerItem);
- }
- }
- } else {
- this.markers = this.markers.filter((item)=>{
- return item.stationType !== 'orient'
- })
- }
- },
- list2query(){
- if (!this.isssscd) {
- for (let i = 0; i < this.stationInfo.length; i++) {
- const item = this.stationInfo[i];
- if(item.stationType === 'livestock'){
- item.iconPath = '/static/zhandian_xuqin_dingwei.png';
- item.latitude = Number(item.stationLatitude);
- item.longitude = Number(item.stationLongitude);
- item.width = 35;
- item.height = 52;
- // 创建符合 markers 格式的对象
- const markerItem = {
- id: item.id,
- iconPath: item.iconPath,
- latitude: item.latitude,
- longitude: item.longitude,
- width: item.width,
- height: item.height,
- customCallout: {
- anchorY: 0, // Y轴偏移量
- anchorX: 0, // X轴偏移量
- display: 'ALWAYS' // 一直展示
- },
- stationType: item.stationType,
- stationName: item.stationName,
- stationCode: item.stationCode,
- joinCluster: true // 是否参与点聚合
- };
- this.markers.push(markerItem);
- }
- }
- } else {
- this.markers = this.markers.filter((item)=>{
- return item.stationType !== 'livestock'
- })
- }
- }
+ }
}
}
@@ -418,7 +442,6 @@
+
\ No newline at end of file