1.leaflet绘制地图marker,添加点击事件
drawWaterStMarker(arr){
if(!this.map){
return;
}
if(this.layerGroup !== null){
this.layerGroup.clearLayers();
}
if(arr.length === 0){
return;
}
const layers = [];
for (let item of arr) {
if(item.lgtd && item.lttd){
let imgSrc = 'market.jpg';
let str = `<p class="mapLetter">${item.name}</p>`;
var myIcon = L.divIcon({
iconSize: [32, 32],
iconAnchor: [16, 32],
html: `<div><img src="${imgSrc}"/>${str}</div>`
});
let marker = L.marker([item.lttd, item.lgtd], {
icon: myIcon
});
marker.on(`click`, () => {
this.handleMapMarerClick(item);
});
layers.push(marker);
}
}
this.layerGroup = L.layerGroup(layers);
this.map.addLayer(this.layerGroup);
},
2.点击弹框效果实现
handleMapMarerClick(item){
let drp = item.drp || '--';
let content = `<div class="boundaryMask-popup">`
+ `<p class="title">${item.stnm}</p>`
+ `<ul class="info">`
+ `<li><span>当日雨量:</span>${drp}</li>`
+`</ul>`
+ `<div style="width:100%;height:200px" id="pptnMapChart"></div>`
+` </div>`;
L.popup({minWidth : 350})
.setLatLng([item.lttd, item.lgtd])
.setContent(content)
.openOn(this.map);
if(item.dataList && item.dataList.length > 0){
this.drawPptnChart(item.dataList);
}else{
$("#pptnMapChart").html('<div class="no-data" style="padding-top:15px;">暂无数据</div>');
}
}
3.popup弹框chart效果实现
drawPptnChart(dataList){
var myChart=echarts.init(document.getElementById('pptnMapChart'));
let tmArr = [];
let dataOne = [];
for(let item of dataList){
tmArr.push(item.tm);
dataOne.push(item.dyp);
}
var option = {
color : ['#006AFF '],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top : 50,
left: 20,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: [{
type: 'category',
data: tmArr,
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 10
},
formatter(params) {
return params.substring(5,7) + '月' + params.substring(8,10) + '日'
}
},
}],
yAxis: [{
name: '近7日雨量过程线(mm)',
nameTextStyle : {
color : '#409EFF'
},
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#409EFF',
fontSize: 10
},
}
}],
series: [{
type: 'bar',
data: dataOne
}
]
};
myChart.setOption(option);
},
4.效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0cec2c24f62ecdd6a3bdf0028e18b7d5.png)