leaflet marker设置及根据zoom改变样式_leaflet marker设置大小-CSDN博客

本文链接：https://blog.csdn.net/Bruce_byan/article/details/111244449

这篇博客详细介绍了如何在Leaflet中设置Marker，并根据地图的Zoom级别改变其样式。内容包括数据获取、地图设置、Marker与标签的创建、多图层管理和Zoom事件监听，实现了动态调整Marker显示效果的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取数据

queryData(){//调用接口查询城市数据
      let params={time:this.selectedTime,type:this.timeType};
      Promise.all([getAllCityAirMoniListOnChina(params), getAllSiteAirMoniListOnChina(params)]).then(res => {
        if (res[0].success&& res[1].success) {
          this.cityArr = res[0].result.length>0?res[0].result:[];
          this.siteArr = res[1].result.length>0?res[1].result:[];
          this.drawMapLayer();
          //this.processingData();
        }
      })
    },

2.设置地图

setMap1(){
      //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
      var url = 'http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}';
      //初始化 地图
      //map = L.map('mapid').setView([35.717, 112.6333], 5);
      map = L.map("mapid", {//添加
        minZoom: 5,//最小缩放值
        maxZoom: 12,//最大缩放值
        crs: L.CRS.EPSG3857,//几乎所有免费和商业磁贴提供商都使用的最常见的在线地图CRS。使用球形墨卡托投影。在地图crs选项中默认设置。
        center: this.centerpoint,//中心坐标
        zoom: this.zoomlevel,//默认缩放等级
        fullscreenControl: false,
        zoomControl: false,//缩放控件不添加
        attributionControl: false//归因控件不添加
      });
      this.baseLayer=L.tileLayer("http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}");//基础图层添加
      map.addLayer(this.baseLayer);
      this.imageLayer =L.imageOverlay('', this.imageBounds,{opacity:0.8});//天气颜色图层
      map.addLayer(this.imageLayer);
      this.chinaLineLayer=L.tileLayer("http://124.163.214.106:18065/arcgis/rest/services/shenjie/MapServer/tile/{z}/{y}/{x}",{pane: 'overlayPane'});//城市图层
      map.addLayer(this.chinaLineLayer);
      //this.graphicLayer = L.layerGroup([]);
      //map.addLayer(this.graphicLayer);
      //将图层加载到地图上，并设置最大的聚焦还有map样式
     /* L.tileLayer(url, {
        minZoom: 5,
        maxZoom: 12,
        id: 'mapbox.streets'
      }).addTo(map);
      map.addLayer(L.tileLayer("http://124.163.214.106:18065/arcgis/rest/services/shenjie/MapServer/tile/{z}/{y}/{x}",{pane: 'overlayPane'}));*/
      // //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
      // L.marker([35.717, 112.6333]).addTo(map)
      //   .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
      /*//增加一个圈，设置圆心、半径、样式
      L.circle([35.717, 112.6333], 5000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 1,
        //radius:5000
      }).addTo(leafletMap).bindPopup("I am a circle.");
      //增加多边形
      L.polygon([
        [35.717, 112.6333],
        [49, 121],
        [41, 126]
      ]).addTo(leafletMap).bindPopup("I am a polygon.");*/
      //为点击地图的事件 增加popup
      var popup = L.popup();
      function onMapClick(e) {
        popup
          .setLatLng(e.latlng)
          .setContent("You clicked the map at " + e.latlng.toString())
          .openOn(map);
      }
      map.on('click', onMapClick);
    },

3.设置地图标签并合并为同一图层

drawCityLayer(){//城市和站点数据查询之后，开始绘制graphicLayer
      var thisObj=this;

      this.cityArr.forEach(item=>{//遍历城市
        item.latlng = {lat:item.lat,lng:item.lon};
        item.name = item.stationname;
        item.code = item.stationcode;
        this.cityLayerMarkGroup.addLayer(this.getMarker(item,item.latlng));
      })
      //this.cityLayerMarkGroup.addTo(map);
      /*console.log(this.cityLayerMarkGroup);*/
    },

drawSiteLayer(){//城市和站点数据查询之后，开始绘制graphicLayer
      var thisObj=this;


      this.siteArr.forEach(item => {//遍历站点
        item.latlng = {lat:item.lat,lng:item.lon};
        item.name = item.stationname;
        item.code = item.stationcode;
        this.siteLayerMarkGroup.addLayer(this.getMarker(item,item.latlng));//添加marker
      })
      //this.siteLayerMarkGroup.addTo(map);
      /*console.log(this.siteLayerMarkGroup);*/
    },

生成marker及其提示框方法

getMarker(item, latlng){//graphicLayer中，获取地图marker样式
      /*console.log(latlng);*/
      let zoom = map.getZoom();
     //let marker= zoom<8 ? L.marker(latlng, { icon: this.getMarkerIcon(item) }) : L.marker(latlng, { icon: this.getMarkerIcon(item) }).bindTooltip(item.name,{direction:'bottom',permanent:true}).openTooltip();//坐标 图像样式
      let marker = L.marker(latlng, { icon: this.getMarkerIcon(item) });
      return marker;
    },

图片样式方法

getMarkerIcon(item){
      let zoom=map.getZoom();//缩放等级
      let icon=null;
      let value=item[this.airType];
      let bgcolor=getPollLevelColor(this.airType,value,this.timeType);//污染物背景颜色
      let txtcolor=getPollLevelTextColor(this.airType,value,this.timeType);//污染物字体颜色
      let namelength = item.name.length;
      if (value === -999 || value === 0)
      {
        bgcolor = "#a1a3a6";
        value = "-";
      }

      if (zoom < 6)
      {
        icon = L.divIcon({
          html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>",
          className: 'ss',
          data:item,
          iconSize: [7,15],
          iconAnchor: [7, 7]
        });
      } else if (zoom >= 6 && zoom < 8)//6,7
      {
        icon = L.divIcon({
          html: "<div style='width: "+namelength*14+"px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:"+txtcolor+";margin: 0 auto'>" + value + "</div><div style='background-color: #fff;width: "+namelength*14+"px;text-align: center'>" +item.name+ "</div></div>",
          className: 'ss',
          data:item,
          iconSize: [12,19],
          iconAnchor: [12, 9]
        });
      } else if (zoom >= 8&& zoom < 10)//8,9
      {
        icon = L.divIcon({
          html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>",
          className: 'ss',
          data:item,
          iconSize: [7,15],
          iconAnchor: [7, 7]
        });
      } else if (zoom >= 10)
      {
        icon = L.divIcon({
          html: "<div style='width: "+namelength*14+"px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:"+txtcolor+";margin: 0 auto'>" + value + "</div><div style='background-color: #fff;width: "+namelength*14+"px;text-align: center'>" +item.name+ "</div></div>",
          className: 'ss',
          data:item,
          iconSize: [12,19],
          iconAnchor: [12, 9]
        });
      }
      return icon;
    },

4.多图层切换及样式改变


    drawMapLayer(){
      this.cityLayerMarkGroup.clearLayers();
      this.siteLayerMarkGroup.clearLayers();

      /*if(cityLayer) map.removeLayer(cityLayer);
      if(siteLayer) map.removeLayer(siteLayer);*/

      this.drawCityLayer();
      this.drawSiteLayer();

      this.mapZoomChange();
    },

mapZoomChange(){
      let zoom=map.getZoom();
      console.log(zoom);
      if(zoom<8)//当缩放值小于8时，移除站点 添加城市
      {
        /*if (siteLayer)
        {
          map.removeLayer(siteLayer);
        }
        if (!map.hasLayer(cityLayer))
        {
          map.addLayer(cityLayer);
        }*/
        /*this.siteLayerMarkGroup.clearLayers();
        this.cityLayerMarkGroup.clearLayers();*/
          //map.removeLayer(this.siteLayerMarkGroup);
        //if(this.cityLayerMarkGroup.length == 0){
          if(map.hasLayer(this.siteLayerMarkGroup)){
            map.removeLayer(this.siteLayerMarkGroup);
          }
          if(!map.hasLayer(this.cityLayerMarkGroup)){
            //map.addLayer(this.cityLayerMarkGroup);
            /*this.cityLayerMarkGroup.clearLayers();
            this.drawCityLayer();*/
            this.cityLayerMarkGroup.addTo(map);
          }
        //}
          this.cityLayerMarkGroup.eachLayer(this.setEachIcon);
      }
      else//缩放值大于等于8时，移除城市 添加站点
      {
        /*map.removeLayer(cityLayer);
        if (!siteLayer)
        {
          this.drawSiteLayer();
        }
        if (!map.hasLayer(siteLayer))
        {
          map.addLayer(siteLayer);
        }*/
        if(map.hasLayer(this.cityLayerMarkGroup)){
          map.removeLayer(this.cityLayerMarkGroup);
        }
        if(!map.hasLayer(this.siteLayerMarkGroup)){
          //map.addLayer(this.siteLayerMarkGroup);
          /*this.siteLayerMarkGroup.clearLayers();
          this.drawSiteLayer();*/
          this.siteLayerMarkGroup.addTo(map);
        }
        /*this.siteLayerMarkGroup.clearLayers();
        this.cityLayerMarkGroup.clearLayers();
        map.removeLayer(this.cityLayerMarkGroup);*/
        //if(this.siteLayerMarkGroup.length = 0)
          /*this.drawSiteLayer();
          map.addLayer(this.siteLayerMarkGroup);*/
          this.siteLayerMarkGroup.eachLayer(this.setEachIcon);
      }

    },

setEachIcon(layer)//graphicLayer中，获取地图marker样式
    {
      let zoom = map.getZoom();
      let item = layer.options.icon.options.data;
      layer.setIcon(this.getMarkerIcon(item));
      //zoom < 8 ? layer.setIcon(this.getMarkerIcon(item)) : layer.setIcon(this.getMarkerIcon(item)).bindTooltip(item.name,{direction:'bottom',permanent:true}).openTooltip();//缩放时显示他的标签
    },

5.监听
全局
监听zoom事件

mounted() {//初始化 页面渲染后
    this.setMap1();
    map.on({zoomend: this.mapZoomChange},this);//地图zoom事件
  },