leaflet marker点击高亮

上一篇初始化地图的链接 https://blog.csdn.net/KK_vicent/article/details/125451475?spm=1001.2014.3001.5502https://blog.csdn.net/KK_vicent/article/details/125451475?spm=1001.2014.3001.5502

实现方法

       步骤一 .

        在初始化地图的时候，定义一个新的图层，专门用来将所有的图标画到该图层上。

const initMap = () => {
    //矢量地图
    const tiandituMap =  L.tileLayer(`http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    //注记
    const tiandituText =  L.tileLayer(`http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    const layers = L.layerGroup([tiandituMap,tiandituText])
    mapObj = L.map('myMap',{
      center:[39.56,116.20], //初始地图中心
      zoom:10, //初始缩放等级
      maxZoom:18, //最大缩放等级
      minZoom:0, //最小缩放等级
      zoomControl:false,//不显示缩放小控件
      layers:[layers]
    })
    //新的图层，下面将图标画在新图层上。
    paintLayer = new L.FeatureGroup()
    mapObj.addLayer(paintLayer)
    // console.log(mapObj)
  }

不建议直接画在定义的地图上。

        原因：

        1.如果想在地图上画两类图形，线和点。如果都画在地图上，调用清除图层函数的时候就把它全部清除掉了，如果在地图上加两个图层，线图层 lineLayer和点图层pointLayer,如果不要线了就执行 lineLayer.clearLayer()。

        2.都加载在地图上，数据量很大时会很杂乱，不容易找到对应的数据。

        步骤二.

               创建画图标函数，定义好图标之后，给图标添加点击事件，当触发点击事件的时候就遍历整个图标图层，通过指定的参数找到找到当前点击的图标，使用setIcon重新替换图标。

        leaflet的各种函数可以在leaflet官网上查看。leaflet官网地址https://leafletjs.com/reference.htmlhttps://leafletjs.com/reference.html   

const paintMarker = () => {
    //坐标数组
    let markerArrs = [
      {
        lat: 39.1, //纬度
        lng: 116.1, //经度
        title: '1'
      },
      {
        lat: 39.6,
        lng: 116.6,
        title: '2'
      }
    ]
    let iconSrc = require('../assets/image/greenIcon.png') //assets下的照片需要用require引入
    markerArrs.forEach(item => {
      let icon = L.icon({
        iconUrl: iconSrc, //图片地址
        iconSize: [25,25] //图片大小
      })
      let marker = L.marker([item.lat,item.lng],{
        icon: icon, //图标
        title: item.title, //图标名称
      })
      marker.on('click',(e) => {
        // console.log(e)
        //设置点击图标高亮显示
        //实现方式：遍历图标的图层，现将所有图标设置为旧图标，判断找到当前点击的图标，将点击的图标替换为新图标。
        paintLayer.eachLayer(function(layer) {
            console.log(layer)
            let iconSrc = require("../assets/image/redIcon.png")
            let newIcon  = L.icon({
                //图标地址
                iconUrl: iconSrc,
                //图标大小
                iconSize: [25, 25]
            })
            layer.setIcon(icon) //旧图标
            if (layer.options.title === e.target.options.title) {  //通过title找到当前点击的图标
                layer.setIcon(newIcon) //替换为新图标
            }
          }
        )
        let pop = L.popup().setLatLng([e.latlng.lat, e.latlng.lng]).setContent(`四喜大丸子${e.target.options.title}`) //定义泡泡弹框
        pop.addTo(mapObj) //添加泡泡弹框到到地图上
        pop.on('remove',()=>{
            paintLayer.clearLayers()
            paintMarker()
        })
      })
      marker.addTo(paintLayer)
    })
  }

效果展示

marker点击高亮

完整代码

<template>
    <!-- leaflet 地图容器 -->
    <div id="myMap"></div> 
</template>
<script setup>
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css'
  import 'leaflet.pm'
  import 'leaflet.pm/dist/leaflet.pm.css'
  import {onMounted} from 'vue'
  let tdtKey = '242c568d3a7aafcb08f001e4e5437b6f'
  let mapObj = null
  let paintLayer = null
  const initMap = () => {
    //矢量地图
    const tiandituMap =  L.tileLayer(`http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    //注记
    const tiandituText =  L.tileLayer(`http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
    const layers = L.layerGroup([tiandituMap,tiandituText])
    mapObj = L.map('myMap',{
      center:[39.56,116.20], //初始地图中心
      zoom:10, //初始缩放等级
      maxZoom:18, //最大缩放等级
      minZoom:0, //最小缩放等级
      zoomControl:false,//不显示缩放小控件
      layers:[layers]
    })
    //新的图层，下面将图标画在新图层上。
    paintLayer = new L.FeatureGroup()
    mapObj.addLayer(paintLayer)
    // console.log(mapObj)
  }
  const paintMarker = () => {
    //坐标数组
    let markerArrs = [
      {
        lat: 39.1, //纬度
        lng: 116.1, //经度
        title: '1'
      },
      {
        lat: 39.6,
        lng: 116.6,
        title: '2'
      }
    ]
    let iconSrc = require('../assets/image/greenIcon.png') //assets下的照片需要用require引入
    markerArrs.forEach(item => {
      let icon = L.icon({
        iconUrl: iconSrc, //图片地址
        iconSize: [25,25] //图片大小
      })
      let marker = L.marker([item.lat,item.lng],{
        icon: icon, //图标
        title: item.title, //图标名称
      })
      marker.on('click',(e) => {
        // console.log(e)
        //设置点击图标高亮显示
        //实现方式：遍历图标的图层，现将所有图标设置为旧图标，判断找到当前点击的图标，将点击的图标替换为新图标。
        paintLayer.eachLayer(function(layer) {
            console.log(layer)
            let iconSrc = require("../assets/image/redIcon.png")
            let newIcon  = L.icon({
                //图标地址
                iconUrl: iconSrc,
                //图标大小
                iconSize: [25, 25]
            })
            layer.setIcon(icon) //旧图标
            if (layer.options.title === e.target.options.title) {  //通过title找到当前点击的图标
                layer.setIcon(newIcon) //替换为新图标
            }
          }
        )
        let pop = L.popup().setLatLng([e.latlng.lat, e.latlng.lng]).setContent(`四喜大丸子${e.target.options.title}`) //定义泡泡弹框
        pop.addTo(mapObj) //添加泡泡弹框到到地图上
        pop.on('remove',()=>{
            paintLayer.clearLayers()
            paintMarker()
        })
      })
      marker.addTo(paintLayer)
    })
  }
  onMounted(()=>{
    initMap()
    paintMarker()
  })
</script>
<style lang="stylus" scoped>
#myMap
  z-index 10
  width: 100%
  height: 100%
</style>