diff --git a/src/apps/AppBuilding/components/searchMap.vue b/src/apps/AppBuilding/components/searchMap.vue index 852af85a..2e1823ba 100644 --- a/src/apps/AppBuilding/components/searchMap.vue +++ b/src/apps/AppBuilding/components/searchMap.vue @@ -108,7 +108,7 @@ import {mapState} from 'vuex' export default { - name:"searchMap", + name: "searchMap", data() { return { ops: {}, @@ -169,7 +169,55 @@ export default { getMarkerCluster(points, count = 0) { let {lib: TMap, map} = this if (map) { - map.setCenter(this.config.latlng) + class ClusterBubble extends TMap.DOMOverlay { + constructor(options) { + super(options); + } + + onInit(options) { + this.content = options.content; + this.position = options.position; + this.customClass = options.customClass + }; + + onDestroy() { + this.dom.removeEventListener('click', this.onClick); + this.removeAllListeners(); + } + + createDOM() { + let dom = document.createElement('div'); + dom.classList.add(this.customClass || 'marker'); + dom.innerText = this.content; + + // 监听点击事件,实现zoomOnClick + this.onClick = this.onClick.bind(this); + // pc端注册click事件,移动端注册touchend事件 + dom.addEventListener('click', this.onClick); + dom.addEventListener('touchend', this.onClick); + return dom; + }; + + updateDOM() { + if (!this.map) { + return; + } + // 经纬度坐标转容器像素坐标 + let pixel = this.map.projectToContainer(this.position); + + // 使文本框中心点对齐经纬度坐标点 + let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'; + let top = pixel.getY() - this.dom.clientHeight / 2 + 'px'; + this.dom.style.transform = `translate(${left}, ${top})`; + this.emit('dom_updated'); + }; + + onClick() { + this.emit('click'); + } + } + + this.config.latlng && map.setCenter(this.config.latlng) let MarkerCluster = new TMap.MarkerCluster({ map, gridSize: 60, enableDefaultStyle: false, // 关闭默认样式 @@ -180,7 +228,7 @@ export default { })) || [], zoomOnClick: true }) - let geometries = [], marker, markers = [] + let markers = [], cls = [] MarkerCluster.on('cluster_changed', () => { if (markers.length) { markers.forEach(function (item) { @@ -188,67 +236,24 @@ export default { }) markers = []; } - geometries = [] + cls.forEach(e => e.destroy()) + cls = [] let clusters = MarkerCluster.getClusters() clusters.forEach((item) => { if (item.geometries?.length > 1) { //聚合样式 - geometries.push({ - styleId: 'cluster', + let clusterBubble = new ClusterBubble({ + map, position: item.center, - properties: {...item}, - content: item.geometries.length?.toString() || "0" + content: item.geometries.length, + customClass: 'cluster' }) + clusterBubble.on('click', () => { + map.fitBounds(item.bounds); + }); + cls.push(clusterBubble) } else { //点标记样式 - // 创建气泡DOM元素 - class ClusterBubble extends TMap.DOMOverlay { - constructor(options) { - super(options); - } - - onInit(options) { - this.content = options.content; - this.position = options.position; - }; - - onDestroy() { - this.dom.removeEventListener('click', this.onClick); - this.removeAllListeners(); - } - - createDOM() { - let dom = document.createElement('div'); - dom.classList.add('marker'); - dom.innerText = this.content; - - // 监听点击事件,实现zoomOnClick - this.onClick = this.onClick.bind(this); - // pc端注册click事件,移动端注册touchend事件 - dom.addEventListener('click', this.onClick); - dom.addEventListener('touchend', this.onClick); - return dom; - }; - - updateDOM() { - if (!this.map) { - return; - } - // 经纬度坐标转容器像素坐标 - let pixel = this.map.projectToContainer(this.position); - - // 使文本框中心点对齐经纬度坐标点 - let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'; - let top = pixel.getY() - this.dom.clientHeight / 2 + 'px'; - this.dom.style.transform = `translate(${left}, ${top})`; - this.emit('dom_updated'); - }; - - onClick() { - this.emit('click'); - } - } - let {content} = item.geometries?.[0] || {}, overlay = new ClusterBubble({map, position: item.center, content}) overlay.on('click', () => { @@ -258,28 +263,6 @@ export default { markers.push(overlay) } }); - if (marker) { - marker.setGeometries(geometries) - } else { - marker = new TMap.MultiMarker({ - map, enableCollision: true, geometries, - styles: { - cluster: new TMap.MarkerStyle({ - width: 48, - height: 48, - anchor: {x: 24, y: 24}, - src: this.$cdn + "/map/cluster.png", - color: '#fff', - // direction: 'center', - size: 18 - }) - }, - }) - marker.on('click', (e) => { - let {bounds} = e.geometry.properties - map.fitBounds(bounds) - }) - } }) return Promise.resolve() } else { @@ -593,5 +576,16 @@ export default { border-top-color: #5088FF; } } + + ::v-deep.cluster { + color: #fff; + border-radius: 50%; + height: 120px; + width: 120px; + background: radial-gradient(circle, #5088ff 50%, rgba(#5088ff, .4) 100%); + display: flex; + align-items: center; + justify-content: center; + } }