109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
import { getApi } from "@/utils/common.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: 29.519418, // 纬度
|
||
longitude: 106.687094, // 经度
|
||
allMarkers: [] // 标记点
|
||
}
|
||
},
|
||
onReady() {
|
||
// 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性
|
||
this.mapContext = uni.createMapContext("alarm_map", this);
|
||
// 2.请求数据
|
||
this.getallStations()
|
||
},
|
||
methods: {
|
||
getallStations() {
|
||
uni.showLoading()
|
||
let obj = {
|
||
id: id,
|
||
stationQuery: query
|
||
}
|
||
getApi(obj).then(res => {
|
||
uni.hideLoading();
|
||
if (res.code == 0) {
|
||
if (!Array.isArray(res.data) || res.data.length <= 0) return
|
||
// 拿到请求数据后，把数据传给点聚合功能；
|
||
this.setMarkersAndCluster(res.data) // 3、调用聚合功能
|
||
}
|
||
})
|
||
},
|
||
// 聚合功能
|
||
setMarkersAndCluster(markerList) {
|
||
// 1.组装数据之后，并赋值给地图上的marker
|
||
this.allMarkers = Array.from(markerList).map((item, i) => {
|
||
return {
|
||
...item,
|
||
width: 41,
|
||
height: 41,
|
||
iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||
joinCluster: true, // 这个属性很重要，必须要
|
||
callout: { // 自定义标记点上方的气泡窗口
|
||
content: '***聚合1',
|
||
display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
|
||
padding: 5,
|
||
textAlign: 'center',
|
||
color: '#C2874D',
|
||
borderRadius: 4
|
||
},
|
||
label: { // 为标记点旁边增加标签
|
||
content: '你好，marker',
|
||
borderColor: '#ff0000',
|
||
bgColor: '#ffffff'## 标题
|
||
},
|
||
}
|
||
});
|
||
|
||
// 2.初始化点聚合的配置，未调用时采用默认配置
|
||
this.mapContext.initMarkerCluster({
|
||
enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
|
||
zoomOnClick: true,
|
||
gridSize: 60,
|
||
complete(res) {
|
||
console.log('initMarkerCluster', res)
|
||
}
|
||
});
|
||
|
||
// 3.发生聚合时，给聚合点设置marker标签
|
||
this.mapContext.on('markerClusterCreate', res => {
|
||
const clusters = res.clusters // 新产生的聚合簇
|
||
const zhou = clusters.map(item=> {
|
||
const {
|
||
center, // 聚合点的经纬度数组
|
||
clusterId, // 聚合簇id
|
||
markerIds // 已经聚合了的标记点id数组
|
||
} = item
|
||
|
||
return {
|
||
...center,
|
||
width: 50,
|
||
height: 50,
|
||
clusterId, // 必须有
|
||
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
|
||
borderRadius: 8,
|
||
joinCluster: true,
|
||
label: { // 定制聚合点样式
|
||
content: markerIds.length + '',
|
||
fontSize: 14,
|
||
width: 18,
|
||
height: 18,
|
||
color: '#ffffff',
|
||
bgColor: '#C2874D',
|
||
borderRadius: 6,
|
||
textAlign: 'center',
|
||
anchorX: 25,
|
||
anchorY: -60,
|
||
}
|
||
}
|
||
})
|
||
|
||
// 4. 添加聚合簇标签
|
||
this.mapContext.addMarkers({
|
||
markers: zhou,
|
||
clear: false, //是否先清空地图上所有的marker
|
||
})
|
||
})
|
||
}
|
||
}
|