效果：

leaflet地图容器的初始化和图层的加载就不说了，都是基础。 上图用的是天地图,以下是在vue中

步骤

上图效果图主要为地图页面，和右侧列表页面

主页面地图页面 index.vue 里（地图页面）列表页面queryResult

<query-result 
            @proQuery="proQuery" 
            @setPoint_zk="setPoint_zk" 
            @clear_marker_layer="clear_marker_layer"
            @clear_height_layer="clear_height_layer"
            @changeQueryListShow="changeQueryListShow"
            @detailBtnClick="detailBtnClick"
            ref="queryResultPage"
    ></query-result>

import queryResult from ‘./queryResult’
queryResult 为子组件，引入后在components: {queryResult }定义

接着在data(){ return } 里定义三个我们即将要用的图层

map: null, //地图容器
zkDetail: null, //绘制点 详情
markerLayer: null, //标记图层
HeightLayer: null, //高亮图层
queryListShow: true //显示列表

方法事件

//methods里
//关闭右侧页面查询结果  清空marker图层
    closeQueryTable(){
      this.queryDataTableVisible = false;
      this.clear_marker_layer()
    },
    changeQueryListShow(flag){
      this.queryListShow = flag
    },
   //接收子页面传来的要显示列表数据
    proQuery(queryResult){
            let _this = this
            let bound_zk = []
            for(var i=0;i<queryResult.length;i++){
                if(queryResult[i].chahba&&queryResult[i].chahbb){
                    _this.setPoint_zk(queryResult[i],'normal',i)
                    bound_zk.push([queryResult[i].chahba,queryResult[i].chahbb])
                }
            }
            //以下注释代码为把视图平移到点集显示中心（两种方法）
            // var bounds_zk = new L.latLngBounds(bound_zk);
            // _this.map.fitBounds(bounds_zk);
            // this.mapObj.map.setView([queryResult[0].chahbb,queryResult[0].chahba],(_this.map._maxZoom));
            // _this.map.panTo([queryResult[0].chahbb,queryResult[0].chahba],{animate: true });//平移
        },
        
        // 绘制地图点事件  分别为普通和高亮，根据传入的type决定
        setPoint_zk(point,type,index){// 绘制搜索结果
                let _this = this
                let className = ''
                _this.zkDetail ={}
                if(type=='normal'){
                    let geojson = {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [point.chahba,point.chahbb],//注意经纬度顺序[经度，纬度]chahba为经度
                    },
                    'crs': {
                        'type': 'name',
                        'properties': {
                            'name': 'urn:ogc:def:crs:EPSG::4326'
                        }
                    }
                };
                  //这里的className很重要，为显示图片
                    className = 'point-div-icon_zk'
                    L.geoJson(geojson, {
                        'pointToLayer': function(feature, latlng) {
                            var myIcon = L.divIcon({
                                html: index>-1?'<div>'+(index+1)+'<div>':'<div><div>',
                                className: className,
                                //图标大小
                                iconSize: [16, 16],
                            });
                            let code = point.gceabc?point.gceabc:''
                            let Marker = L.marker([latlng.lat,latlng.lng],{  //注意： 纬度，经度 lat纬度
                                icon:myIcon
                            }).addTo(_this.markerLayer) //.bindTooltip('<p>'+code+'</p>');  这一句跟(_this.markerLayer)后面 点击点有提示 
                        }
                    });
                }else{
                    _this.zkDetail = point
                    // 清空高亮图层
                    _this.HeightLayer.clearLayers()
                    let geojson = {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [point.chahba,point.chahbb],//注意经纬度顺序[经度，纬度]
                        },
                        'crs': {
                            'type': 'name',
                            'properties': {
                                'name': 'urn:ogc:def:crs:EPSG::4326'
                            }
                        }
                    };
                        //高亮样式
                        className = 'highlight-div-icon_zk'
                        L.geoJson(geojson, {
                            'pointToLayer': function(feature, latlng) {
                                let html = index>-1?'<div>'+(index+1)+'<div>':'<div><div>'
                                var myIcon = L.divIcon({
                                    html: html,
                                    className: className,
                                    //图标大小
                                    iconSize: [16, 16],
                                });
                                let Marker = L.marker([latlng.lat,latlng.lng],{
                                    icon:myIcon
                                }).addTo(_this.HeightLayer);
                            }
                        });  
                }
            },
       //-----清空图层显示
        clear_marker_layer(){
            this.markerLayer.clearLayers()
            this.HeightLayer.clearLayers()
        },
        //清空高亮图层
        clear_height_layer(){
            this.HeightLayer.clearLayers()
        },
        //查询数据的方法，
        query(){
        //查到数据后调用子组件方法
        let tableData = []
        let total = 0
        ...
        this.$refs.queryResultPage.searchClick(tableData,total)
        }

style

<style lang='stylus' scoped>
@import './../assets/stylus/mainCss.styl'
.point-div-icon_zk
    icon-style(18px !important,26px !important,url('./../assets/red.png'))
    &:hover
      icon-style(18px !important,26px !important,url('./../assets/red.png'))
.highlight-div-icon_zk
    icon-style(18px !important,26px !important,url('./../assets/blue.png'))
</style>

mainCss.styl

$mainColor #0089ff
box(w,h,color-name = false)
    width w
icon-style(width,height,url)
    width width
    height height
    display inline-block
    text-align center
    color #ffffff
    font-style normal
    background url
    background-size 100% 100%

queryResult.vue

<template>
  <div class="searchZK-page" >
      <div class="search-result" v-if="showResult">
        <div class="resutl">
          <div class="surver-result-list">
            <div v-if="liData.length !==0">
              <div class="resutl-title">当前范围内, 共找到 {{total}} 个搜索结果</div>
              <ul>
                <li class="surver-result" v-for="(result,index) in liData" :key="index">
                  <div class="result-title" @click="getResultInfo_zk(result,index)" @mouseenter="mouse_enter(result,index)">
                    <div style="display:inline-block;float: left;width:10%"><i class="result-title-index">{{index+1}}</i></div>
                      <div style="display:inline-block;width:88%"><span >{{result.gceaba}}</span></div>
                  </div>
                  <!-- <p class="result-content" ><span>调查点名称</span>：<span>{{result.gceaba}}</span></p> -->
                </li>
              </ul>
            </div>
            <div v-else class="nodata">暂无数据</div>
          </div>
        </div>
       
      </div>
      <div class="search-result" v-if="showResultDetail">
        <div class="search-result-back" @click="goback"> <i class="el-icon-d-arrow-left"></i> 返回列表</div>
        
        <table cellspacing="0" style="width:98%">
          <tr>
            <td style="width:30%;font-weight:600;color:#606266">工程名称</td>
            <td style="text-align:left">{{detail.gceaba}}</td>
          </tr>
          
        </table>
      </div>
  </div>
</template>

<script>

  export default {
    name:'',
    props:['zkData'],
    data () {
      return {
        searchkey: '',
        total: 0,
        currentPage:1,
        liData: [],
        showResult: true,
        showResultDetail:false,
        detail: null,
        lookid: null,
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {
    },

    methods: {
    // 返回列表
      goback(){
        this.$emit('clear_height_layer')
        this.showResultDetail = false;
        this.showResult = true
        this.$emit("changeQueryListShow",true)
      },
      
      // 接收主页面查询到数据传过来的
      searchClick(data,total){
        let _this = this
        _this.liData = []
        _this.total = total
        _this.liData = data
        _this.showResult = true
        _this.showResultDetail = false
        _this.$emit("clear_marker_layer")
        // 调用父组件里绘制方法
        _this.$emit('proQuery',_this.liData)
      },
      //绘制某个高亮点
      getResultInfo_zk(item,index){
        if(index> -1){
          this.$emit("setPoint_zk",item,'highLight',index)
        }
        this.showResult = false;
        this.detail = item
        this.lookid = item.id
        this.showResultDetail = true;
        this.$emit("changeQueryListShow",false)
      },
      //鼠标进入，也就是鼠标放到列表上某一条数据时候
      mouse_enter(item,index){
        if(index> -1){
          this.$emit("setPoint_zk",item,'highLight',index)
        }
      },
     
      closeZkPage(){
        // this.$emit("clear_zk_layer")
        this.zkSearchShow = false
        this.showResult = false
        this.liData = []
      }
    },

    watch: {}

  }

</script>
<style lang='stylus' scoped>
@import './../assets/stylus/mainCss.styl'
.search-result-back
  text-align left
  font-size 13px
  padding 5px 0 5px 10px
  color #409eff
.searchZK-page>>>.el-input-group__append
  background #409eff
  padding 0 15px
.searchZK-page>>>.el-icon-search
  color #fff
.search-result >>>.el-pagination.is-background .el-pager li
  margin 0 1px
.searchZK-page
  position absolute
  z-index 10001
  margin-left  5px
  height 98%
  .search-result
    width 295px
    background #fff
    position relative
    height 98%
    .xiangqing
      position absolute
      bottom 15px
      right 10px
      font-size 13px
      padding 2px 0 2px 10px
      color #409eff
    td
      border-bottom 1px solid #ebeef5
      padding 10px
      font-size 14px
    p
      padding-left 10px
      text-align left
    .pagination
      width 100%
      position absolute
      bottom 0
      text-align center
    .resutl
      height calc(100% - 50px)
      background #fff
      overflow-y auto
      padding 5px
      .surver-result-list
        width 100%
        overflow auto
        .resutl-title
          text-align left
          font-size 13px
          padding 2px 0 2px 10px
          color #409eff
          background-color #f5f7fa
        .nodata 
          text-align center
          margin-top 15px
          font-size 15px
        ul
          padding 0
          margin 0
          .surver-result
            width 100%
            list-style none
            // border-bottom 1px solid #dcdcdc
            padding 14px 12px
            box-sizing border-box
            cursor default
            text-align left
            p
              margin 0
              padding 0
              line-height 22px
              font-size 14px
            .result-title 
              width 100%
              cursor pointer
              font-size 14px
              i 
                margin-right 8px
                font-size 12px
                line-height 18px
                vertical-align middle
              span    
                font-weight 500
                color #409EFF
              .result-title-index
                icon-style(18px,26px,url('./../assets/red.png'))
            &:hover
              .result-title
                  color #409EFF
                  .result-title-index
                    icon-style(18px,26px,url('./../assets/blue.png'))
            .result-content
              text-indent 26px
</style>

如果要把代码都放到一个页面里面，只需要index里的方法传入对应的值就可以了，绘制事件在index里 主要为 setPoint_zk方法，对应的css写对就能出来。
以上就是全部代码，从自己代码里抽出来一些，如果有问题的可以提问我。
对你有帮助点个赞哟