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