leaflet 点击地图marker，popup弹框展示chart图效果实现

最新推荐文章于 2024-09-20 09:58:05 发布

勤劳@小蚂蚁

最新推荐文章于 2024-09-20 09:58:05 发布

阅读量5.6k

点赞数 7

分类专栏： leaflet

本文链接：https://blog.csdn.net/zcylyzhi4/article/details/112345207

版权

leaflet 专栏收录该内容

7 篇文章 6 订阅

订阅专栏

该博客介绍了如何利用Leaflet库在地图上绘制Marker，并为Marker添加点击事件。当点击Marker时，会弹出一个包含站点信息的popup窗口。popup内容包括站点名称、当日雨量以及一个ECharts图表，展示近7日雨量过程线。此外，还展示了具体的代码实现和最终效果。

摘要由CSDN通过智能技术生成

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添加点击事件
         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);
   
   // 判断当前是否有绘制chart的数据，如果有，则显示chart图，如果没有则提示，暂无数据
   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);
 },