接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式"
import noEmerIcon from "./img/emerManagement/noEmerIcon.png";
import emerIcon from "./img/emerManagement/emerIcon.png";
import noEmerIcon7 from "./img/emerManagement/icon7.png";
import noEmerIcon10 from "./img/emerManagement/icon10.png";
.......
.......
data(){
return{
/******************地图******************/
map:null,//高德地图实例
sectionMarker:null,//点标记
sectionTextMarker:null,//文字标记
sectionMarker_data:[],//存放图标点标记
sectionTextMarker_data:[],//存放省市名字点标记
sectionText:null,//点标记上的内层涟漪
sectionText2:null,//点标记上的外层涟漪
dataPosition:'',//坐标
adcode:'',//城市区码
sectionIcon:'',//点标记样式
sectionBorder:'',//点标记涟漪
icon:{//点标记样式
noEmerIcon:new AMap.Icon({
image: noEmerIcon,
imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
offset: new AMap.Pixel(0, 0)
}),
noEmerIcon7:new AMap.Icon({
image: noEmerIcon7,
imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
offset: new AMap.Pixel(0, 0)
}),
noEmerIcon10:new AMap.Icon({
image: noEmerIcon10,
imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
offset: new AMap.Pixel(0, 0)
}),
emerIcon:new AMap.Icon({
image: emerIcon,
imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
offset: new AMap.Pixel(0, 0)
}),
},
border:{//点标记涟漪
noEmerBorder:'5px solid green',
noEmerIcon7:'5px solid orange',
noEmerIcon10:'5px solid red',
emerIcon:'5px solid red'
},
}
},
/**********************************获取并绘制城市文字标记****************************************/
getCityName(adcode) {
if (adcode == undefined || adcode == null || adcode == "") {
adcode = "";
}
this.removeAreaText();//清空文字点标记
this.sectionTextMarker = null;
后台接口([{
citiesNo: adcode//城市编码
}]).then(data => {
for (var i = 0; i < data.result.length; i++) {
this.sectionTextMarker = new AMap.Marker({
content: "<h1 class = 'font2'>" + data.result[i].cities_name + " </h1> ",
position: [data.result[i].lot, data.result[i].lat],
offset: new AMap.Pixel(0, 0)
});
this.sectionTextMarker_data.push(this.sectionTextMarker);
}
this.map.add(this.sectionTextMarker_data);
});
},
// *****获取项目工程数据******/
getScreenSectionPoint(cityAdcode) {
this.removeMarker();
后台接口([{
cities_no:cityAdcode
}]).then(data =>{
if(data.statusCode == 200){
if(data.result.length>0){
for(let i=0;i<data.result.length;i++){
this.getSectionIcon(data.result[i])
let sectionArray={
value:[data.result[i].lng,data.result[i].lat],
type:data.result[i].type,//类型--用于判断点标记样式
}
this.addPositiion(sectionArray)
}
this.map.add(this.sectionMarker_data);
}
}else{
this.$message({
type:'error',
message:data.message
})
}
}).catch(()=>{})
},
/**************************动态添加点标记****************************************/
addPositiion(data) { //添加点标记
this.sectionText = new AMap.Text({
offset: new AMap.Pixel(-1, -23),
position: data.value,
text: " ",
style: {
"background": "none",
"width": "35px",
"height": "35px",
"border-radius": "100%",
"border":this.sectionBorder,
"animation": "myfirst 1.4s infinite"
}
});
this.sectionText2 = new AMap.Text({
offset: new AMap.Pixel(-1, -23),
position: data.value,
text: " ",
style: {
"background": "none",
"width": "45px",
"height": "45px",
"border-radius": "100%",
"border": this.sectionBorder,
"animation": "myfirst 1.6s infinite"
}
});
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0,-30),
/* isCustom:true,//信息窗体外框及内容完全按照content所设的值添加*/
/* anchor:'bottom-right',//信息窗体锚点*/
})
this.sectionMarker = new AMap.Marker({
position: data.value,
icon:this.sectionIcon
});
if(data.type==0||data.type==2||data.type==3){//无预警
this.sectionMarker.content = '<div class="mapBox"><div class="amap-info-content">'
+'<div class="emerScreen_sectionTooltip_boxNo">'
+'<i></i>'
+'<i></i>'
+'<i></i>'
+'<i></i>'
+'<span class="tooltip_spanNo" >项目工程：'+data.section_name+'</span>'
+'<span class="tooltip_spanNo">应急总次数：'+data.countId+'</span>'
+'<span class="tooltip_spanNo">应急总时长：'+data.times+'</span>'
+'</div>'
+'</div></div>'
}else{//有预警
this.sectionMarker.content = '<div class="mapBox"><div class="amap-info-content">'
+'<div class="emerScreen_sectionTooltip_box">'
+'<p><i></i>'
+'<span>'+data.warnType+'</span>'
+'<span>'+data.warnLevel+'</span>'
+'</p>'
+'<p >项目工程：'+data.section_name+'</p>'
+'</div>'
+'</div></div>'
}
/* marker.setAnimation('AMAP_ANIMATION_DROP');*/
this.sectionMarker.on("mouseover", infoOpen);
//注释后打开地图时默认关闭信息窗体
this.sectionMarker.on("mouseout", infoClose);
this.sectionMarker.on("click", newMAp);
//鼠标点击事件,设置地图中心点及放大显示级别
var that=this
function newMAp(e) {
that.map.setZoomAndCenter(10, e.target.getPosition());
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
infoWindow.open(that.map, e.target.getPosition());
setTimeout(() => {
that.$router.push({
name:'fieldScreen',
params:{section_id:data.section_id,lablename:data.section_name}
})
}, 500);
}
function infoClose(e) {
infoWindow.close(that.map, e.target.getPosition());
}
function infoOpen(e) {
console.log(e.target.content)
infoWindow.setContent(e.target.content);
// setTimeout(function() {
// setTimeout(function() {
// $(".amap-info-content .thelook").fadeIn("slow");
// }, 1200);
// }, 200);
infoWindow.open(that.map, e.target.getPosition());
}
this.sectionMarker_data.push(this.sectionText);
this.sectionMarker_data.push(this.sectionText2);
this.sectionMarker_data.push(this.sectionMarker);//最后添加marker,防止textMarker将marker遮盖无法鼠标悬浮信息窗体
},
/*******************************点标记样式*****************************************/
//可根据自己需求进行点标记样式判断
getSectionIcon(data){
if (data.type==0) {//无预警且无台风
this.sectionIcon =new AMap.Icon({
image: noEmerIcon,
imageSize: new AMap.Size(15, 15),
offset: new AMap.Pixel(0, 0)
});
this.sectionBorder='5px solid green';
} else if (data.type == 1) {//有预警
this.sectionIcon = new AMap.Icon({
image: emerIcon,
imageSize: new AMap.Size(15, 15),
offset: new AMap.Pixel(0, 0)
});
this.sectionBorder='5px solid #FF9F7F';
} else if (data.type == 2) {//无预警但受10级台风风圈影响
this.sectionIcon = new AMap.Icon({
image: noEmerIcon10,
imageSize: new AMap.Size(15, 15),
offset: new AMap.Pixel(0, 0)
});
this.sectionBorder='5px solid #EBDC3C';
} else if (data.type == 3) {//无预警但受7级台风风圈影响
this.sectionIcon = new AMap.Icon({
image: noEmerIcon7,
imageSize: new AMap.Size(15, 15),
offset: new AMap.Pixel(0, 0)
});
this.sectionBorder='5px solid #78C51A';
}
},
/************************************清除点标记*************************************************/
//清空点标记
removeMarker() {
this.map.remove(this.sectionMarker_data);
this.sectionMarker_data = [];
},
//清空省市文字点坐标
removeAreaText() {
this.map.remove(this.sectionTextMarker_data);
this.sectionTextMarker_data = [];
},
/*************************************清除点标记*****************************************/
<style lang="scss">
/**********地图点标记特效*********/
@keyframes myfirst {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
/***********地图悬浮窗样式***********/
.font2 {
font-size: 6px;
color: white;
width: 80px;
}
.amap-info-content {
background: none;
color: white;
border: none;
padding: 0;
box-shadow: none;
position: relative;
/*left: 5px;
top:15px;*/
}
.mapBox .amap-info-content:hover {
background: none;
color: white;
border: none;
padding: 0;
box-shadow: none;
position: relative;
/* left: 0px;
top: 12px;*/
}
.amap-info-sharp {
background: none;
}
.mapBox .amap-info-content {
.emerScreen_sectionTooltip_boxNo {
background:rgba(2,19,37,0.8);padding:10px;
i{
display:inline-block;height:20px;width:20px;position:absolute;
&:nth-child(1){
border-top:2px solid rgba(0,255,255,1);border-left:2px solid rgba(0,255,255,1);left:0px;top:0px;
}
&:nth-child(2){
border-bottom:2px solid rgba(0,255,255,1);border-left:2px solid rgba(0,255,255,1);left:0px;bottom:0px;
}
&:nth-child(3){
border-top:2px solid rgba(0,255,255,1);border-right:2px solid rgba(0,255,255,1);right:0px;top:0px;
}
&:nth-child(4){
border-bottom:2px solid rgba(0,255,255,1);border-right:2px solid rgba(0,255,255,1);right:0px;bottom:0px;
}
}
.tooltip_spanNo{display:block;line-height:32px;font-size:14px;color:#fff;}
}
.emerScreen_sectionTooltip_box{
background:rgba(2,19,37,0.8);border:2px solid rgba(0,255,255,1);display:flex;text-align: center;
p{
&:nth-child(1){
width:30%; display:inline-block;background:red;padding:5px 0px;
i{
display: inline-block;height:20px;width: 20px;border:4px solid #fff;border-radius: 50%;
}
span{display:block;color:#fff;font-size:14px;line-height:16px;}
}
&:nth-child(2){
display:inline-block;color:#fff;font-size:14px;line-height:32px;
}
}
}
}
.amap-info-close {
display: none;
}
</style>
图片
