关于 leafletjs 渲染图层，点击对应图层，触发事件，进行业务数据展示

最新推荐文章于 2024-05-26 09:45:50 发布

donghuzi1

最新推荐文章于 2024-05-26 09:45:50 发布

阅读量1k

点赞数

分类专栏：前端文章标签： js leafletjs gis

本文链接：https://blog.csdn.net/qq_43614518/article/details/128245032

版权

前端专栏收录该内容

22 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

 getGateshpData(typeName)  { 
      return axios.get("/geoserver/图层地址", {
        params: {
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typeName,   //图层类型名称
          maxFeatures: "10000",
          outputFormat: "application/json"

        }
      });
    },

//被执行时调用此方法addshpfileLayer()

 addshpfileLayer() {
      this.getGateshpData("图层类型名称").then((response) => {
      // console.log(response);
        L.Icon.Default.imagePath = "./";   //如果图层中有点位信息，此处的点位icon默认可自定义为项目./（public）下的图片，图片名需要改为marker-icon.png  

        const that = this;

        L.geoJSON(response.data, {   
          style: () => {
            return {
              color: "#a87b35",
              weight: 3,
              stroke: true
            };
          },
          onEachFeature(featuce, layer) {
            layer.on("click", () => {   //图层点击事件
              api.get(`根据图层数据需要去处理的接口请求}`).then((res) => {
                 // 业务逻辑
              });
            });
          }
        }).addTo(this.map);    //渲染图层
      }); 
    },