<template>
|
<div class="home_div">
|
<div id="container" style="height: 100%; width: 100%"></div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
import { listAllTenant } from '../../system/tenant/tenant.api'
|
import { onMounted, ref } from 'vue'
|
import { router } from '/@/router'
|
const tenants = ref([])
|
const points = ref([])
|
|
const initMap = () => {
|
window._AMapSecurityConfig = {
|
securityJsCode: 'c1fa6ceb212b62bf9489da9c9986eb5e',
|
}
|
AMapLoader.load({
|
key: '1582675884a1ef3c90b5ae1769c765a7', // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
|
}).then((AMap) => {
|
var map = new AMap.Map('container', {
|
viewMode: '2D', // 是否为3D地图模式
|
zoom: 5, // 地图显示的缩放级别
|
zooms: [2, 22], // 地图缩放范围
|
// center: arr, // 地图中心点坐标
|
layers: [new AMap.createDefaultLayer()], //设置图层,可设置成包含一个或多个图层的数组
|
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
|
resizeEnable: true, // 是否监控地图容器尺寸变化
|
})
|
|
var clusterIndexSet = {
|
//定义点聚合规则
|
city: {
|
minZoom: 2,
|
maxZoom: 9,
|
},
|
district: {
|
minZoom: 9,
|
maxZoom: 11,
|
},
|
building: {
|
minZoom: 11,
|
maxZoom: 22,
|
},
|
}
|
|
function getStyle(context) {
|
var clusterData = context.clusterData // 聚合中包含数据
|
var index = context.index // 聚合的条件
|
var count = context.count // 聚合中点的总数
|
var marker = context.marker // 聚合绘制点 Marker 对象
|
var color = ['66,130,198', '107,174,214', '78,200,211']
|
var indexs = ['city', 'district', 'building']
|
var i = indexs.indexOf(index['mainKey'])
|
var text = clusterData[0][index['mainKey']]
|
var size = Math.round(30 + Math.pow(count / points.value.length, 1 / 5) * 70)
|
if (i <= 1) {
|
var extra = '<span class="showCount">' + context.count + '家</span>'
|
text = '<span class="showName">' + text + '</span>'
|
text += extra
|
} else {
|
size = 12 * text.length + 20
|
}
|
var style = {
|
bgColor: 'rgba(' + color[i] + ',.8)',
|
borderColor: 'rgba(' + color[i] + ',1)',
|
text: text,
|
size: size,
|
index: i,
|
color: '#ffffff',
|
textAlign: 'center',
|
boxShadow: '0px 0px 3px rgba(0,0,0,0.6)',
|
}
|
return style
|
}
|
function getPosition(context) {
|
var key = context.index.mainKey
|
var dataItem = context.clusterData && context.clusterData[0]
|
var districtName = dataItem[key]
|
if (!district[districtName]) {
|
return null
|
}
|
var center = district[districtName].center.split(',')
|
var centerLnglat = new AMap.LngLat(center[0], center[1])
|
return centerLnglat
|
}
|
function _customRender(data) {
|
const keys = Object.keys(data.clusterData)
|
let markers = []
|
for (var i = 0; i < keys.length; i++) {
|
var key = keys[i]
|
var cluster = data.clusterData[key]
|
var position = cluster.data[0].lnglat
|
var marker = new AMap.LabelMarker({
|
position: position,
|
text: {
|
content: cluster.data.length.toString(),
|
style: {
|
fillColor: '#ffffff',
|
},
|
},
|
})
|
markers.push(marker)
|
}
|
return {
|
type: 'type',
|
layer: null,
|
markers: markers,
|
}
|
}
|
|
//聚合点样式
|
// var _renderClusterMarker = function (context) {
|
// //context 为回调参数，
|
// console.log("context", context)
|
// //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
|
// var clusterCount = context.count //聚合点内点数量
|
// context.marker.setContent('<div style="background-color:#00ff00">' + clusterCount + '</div>')
|
// }
|
// 自定义聚合点样式
|
function _renderClusterMarker(context) {
|
var clusterData = context.clusterData // 聚合中包含数据
|
var index = context.index // 聚合的条件
|
var count = context.count // 聚合中点的总数
|
var marker = context.marker // 聚合点标记对象
|
var styleObj = getStyle(context)
|
// 自定义点标记样式
|
var div = document.createElement('div')
|
div.className = 'amap-cluster'
|
div.style.backgroundColor = styleObj.bgColor
|
div.style.width = styleObj.size + 'px'
|
if (styleObj.index <= 1) {
|
div.style.height = styleObj.size + 'px'
|
// 自定义点击事件
|
context.marker.on('click', function (e) {
|
console.log(e)
|
var curZoom = map.getZoom()
|
if (curZoom < 9) {
|
curZoom = 9
|
} else if (curZoom < 11) {
|
curZoom = 11
|
}
|
map.setZoomAndCenter(curZoom, e.lnglat)
|
})
|
} else {
|
// 自定义点击事件
|
context.marker.on('click', function (e) {
|
let innerText = e.target.dom.innerText;
|
tenants.value.forEach(item => {
|
if(item.companyAddress.includes(innerText)) {
|
//router.push({ path: '/tongjitang/bigworkshop', params: { tenant: item.id } })
|
// router.push( {path: '/tongjitang/bigworkshop/' + item.id} )
|
// router.push( '/tongjitang/bigworkshop/' + item.id )
|
let href = '/tongjitang/bigworkshop/' + item.id;
|
window.open(href, '_blank');
|
}
|
})
|
})
|
console.log(router)
|
}
|
div.style.border = 'solid 1px ' + styleObj.borderColor
|
div.style.borderRadius = styleObj.size + 'px'
|
div.innerHTML = styleObj.text
|
div.style.color = styleObj.color
|
div.style.textAlign = styleObj.textAlign
|
div.style.boxShadow = styleObj.boxShadow
|
context.marker.setContent(div)
|
// 自定义聚合点标记显示位置
|
// var position = getPosition(context);
|
// if(position){
|
// context.marker.setPosition(position);
|
// }
|
context.marker.setAnchor('center')
|
}
|
|
map.plugin(['AMap.IndexCluster'], function () {
|
console.log('cluster', points.value)
|
var indexCluster = new AMap.IndexCluster(map, points.value, {
|
renderClusterMarker: _renderClusterMarker, //自定义聚合点样式
|
clusterIndexSet: clusterIndexSet, //聚合规则
|
})
|
})
|
})
|
}
|
|
const getTenants = () => {
|
listAllTenant().then((res) => {
|
tenants.value = res
|
res.forEach((item) => {
|
let point = JSON.parse(item.companyAddress)
|
points.value.push(point)
|
})
|
initMap()
|
//console.log('points', points.value)
|
})
|
}
|
|
getTenants()
|
onMounted(() => {})
|
</script>
|
<style>
|
.amap-cluster {
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
font-size: 12px;
|
}
|
.showName {
|
font-size: 14px;
|
}
|
.showCount,
|
.showName {
|
display: block;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
overflow: hidden;
|
width: 80%;
|
}
|
</style>
|
<style scoped lang="less">
|
.home_div {
|
height: 100%;
|
width: 100%;
|
padding: 0px;
|
margin: 0px;
|
position: relative;
|
}
|
|
</style>
|
