Delete demo.vue
This commit is contained in:
parent
cfd27691bc
commit
bbeeda0333
|
|
@ -1,229 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<div id="mapContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key==您申请的key值AMap.MarkerCluster"></script>
|
||||
<script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
cluster: null,
|
||||
points: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initMap() {
|
||||
this.map = new AMap.Map("mapContainer", {
|
||||
resizeEnable: true,
|
||||
center: [105, 42],
|
||||
zoom: 4,
|
||||
});
|
||||
// console.log(points)
|
||||
this.points = points;
|
||||
this.addCluster();
|
||||
},
|
||||
|
||||
addCluster(tag) {
|
||||
if (this.cluster) {
|
||||
this.cluster.setMap(null);
|
||||
}
|
||||
this.cluster = new AMap.MarkerCluster(this.map, this.points, {
|
||||
gridSize: 80,
|
||||
minClusterSize: 2, //1.x版本的把这里改成1就可以实现点数为1的水波纹效果，2.0的需要用_renderMarker
|
||||
renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
||||
renderMarker: this._renderMarker, // 自定义非聚合点样式
|
||||
});
|
||||
//默认样式
|
||||
// this.cluster = new AMap.MarkerCluster(this.map, this.points, {gridSize: 80});
|
||||
},
|
||||
|
||||
_renderClusterMarker(context) {
|
||||
var count = this.points.length;
|
||||
var factor = Math.pow(context.count / count, 1 / 18);
|
||||
var div = document.createElement('div');
|
||||
var Hue = 180 - factor * 180;
|
||||
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
|
||||
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
|
||||
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
||||
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
|
||||
// div.style.backgroundColor = bgColor;
|
||||
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
||||
div.style.width = div.style.height = size + 'px';
|
||||
// div.style.border = 'solid 1px ' + borderColor;
|
||||
div.style.borderRadius = size / 2 + 'px';
|
||||
// div.style.boxShadow = '0 0 5px ' + shadowColor;
|
||||
var content = `
|
||||
<div
|
||||
class="circle-marker-content"
|
||||
>
|
||||
<span class="item_count">${context.count}</span>
|
||||
<div class="item item1"
|
||||
style='
|
||||
height:${size}px;
|
||||
width:${size}px;
|
||||
'></div>
|
||||
<div class="item item2" style='
|
||||
height:${size + 0.4}px;
|
||||
width:${size + 0.4}px;
|
||||
'></div>
|
||||
<div class="item item3" style='
|
||||
height:${size + 0.8}px;
|
||||
width:${size + 0.8}px;
|
||||
'></div>
|
||||
<div class="item item4" style='
|
||||
height:${size + 1.2}px;
|
||||
width:${size + 1.2}px;
|
||||
'></div>
|
||||
<div class="item item5" style='
|
||||
height:${size + 1.6}px;
|
||||
width:${size + 1.6}px;
|
||||
'></div>
|
||||
</div>`
|
||||
div.innerHTML = content;
|
||||
div.style.lineHeight = size + 'px';
|
||||
div.style.color = fontColor;
|
||||
div.style.fontSize = '14px';
|
||||
div.style.textAlign = 'center';
|
||||
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||||
context.marker.setContent(div)
|
||||
},
|
||||
|
||||
_renderMarker(context) {
|
||||
var content = `<div
|
||||
class="circle-marker-content"
|
||||
>
|
||||
<span class="item_count">1</span>
|
||||
<div class="item item1"
|
||||
style='
|
||||
height:18px;
|
||||
width:18px;
|
||||
'></div>
|
||||
<div class="item item2" style='
|
||||
height:18.4px;
|
||||
width:18.4px;
|
||||
'></div>
|
||||
<div class="item item3" style='
|
||||
height:18.8px;
|
||||
width:18.8px;
|
||||
'></div>
|
||||
<div class="item item4" style='
|
||||
height:19.2px;
|
||||
width:19.2px;
|
||||
'></div>
|
||||
<div class="item item5" style='
|
||||
height: 19.6px;
|
||||
width: 19.6px;
|
||||
'></div>
|
||||
</div>`;
|
||||
var offset = new AMap.Pixel(-9, -9);
|
||||
context.marker.setContent(content)
|
||||
context.marker.setOffset(offset)
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
#mapContainer {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
@circleColor: #4196ff;
|
||||
|
||||
/deep/ .circle-marker-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 1.8vh;
|
||||
width: 1.8vh;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
background: @circleColor;
|
||||
border: 1px solid @circleColor;
|
||||
box-shadow: 0px 0px 14px @circleColor;
|
||||
|
||||
.item_count {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #1C77C3;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@keyframes scaless {
|
||||
0% {
|
||||
/* transform: scale(0); 将0改成1*/
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid @circleColor;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
background-color: @circleColor;
|
||||
animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
|
||||
}
|
||||
|
||||
.item1:before {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item2:before {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.item3:before {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.item4:before {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.item5::before {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue