leaflet实现绘制省市区域边界并填充颜色

leaflet 实现绘制省市区域边界并填充颜色

 async initMap() {
      this.map = L.map("map", {
        center: [30.998257, 103.653534],
        zoom: 11,
        attributionControl: false, // 隐藏logo
        zoomControl: false,
        crs: L.CRS.Baidu,
      });
      // 添加底图
      L.tileLayer.baidu({ layer: "cms_blue_bg" }).addTo(this.map);
      this.drawBoundary();
      this.getFirmMap();
      this.map.on("zoomend", (e) => {
      });
      // 移动改变聚合点
      this.map.on("moveend", (e) => {
      });
    },


   async drawBoundary() {
      var style = {
        color: "#58eaf7", //边框颜色
        weight: 2, //边框粗细
        opacity: 0.7, //透明度
        fillColor: "#4fefea", //区域填充颜色
        fillOpacity: 0.3, //区域填充颜色的透明
      };
      L.geoJSON(jsonData, style).addTo(this.map); // jsonData就是 https://datav.aliyun.com/portal/school/atlas/area_selector 获取到的geoJson数据
    },

最终效果如图：

https://img-blog.csdnimg.cn/039d77a4d7b441a3aceb6921ac42a251.png

笔记原文

https://blog.csdn.net/m0_74149462/article/details/129143124?csdn_share_tail={"type"%3A"blog"%2C"rType"%3A"article"%2C"rId"%3A"129143124"%2C"source"%3A"m0_74149462"}