leaflet怎么去掉放大缩小按钮，去掉测量，绘制框

最新推荐文章于 2024-03-11 08:30:00 发布

wu_223

最新推荐文章于 2024-03-11 08:30:00 发布

阅读量3.5k

点赞数

分类专栏： leaflet相关问题 angular4 文章标签： leaflet去掉绘制属性 leaflet去掉放大缩小按钮

本文链接：https://blog.csdn.net/qq_34790644/article/details/103800578

版权

angular4 同时被 2 个专栏收录

78 篇文章

订阅专栏

leaflet相关问题

46 篇文章

订阅专栏

本文介绍了一种地图操作的封装方法，包括放大缩小控制、绘图功能的初始化等。通过将常用的地图操作封装成方法，如addZoomCtrl和initDraw，可以简化地图应用的开发流程，提高代码复用性和维护性。

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

1. 在封装的地方，init下边不放上这些属性

2.把这些封装成方法


  addZoomCtrl() {
    //放大缩小按钮
    L.control
      .zoom({
        zoomInTitle: "放大",
        zoomOutTitle: "缩小",
        position: "bottomright"
      })
      .addTo(this._map);
  }


  initDraw() {
    // 初始化DrawControl
    //绘制框，编辑和删除
    this.drawControl = new L.Control.Draw({
      draw: {
        polygon: true,
        marker: false,
        circle: false,
        polyline: false,
        rectangle: true,
        circlemarker: false
      },
      edit: {
        featureGroup: this._drawnFeauresLayer,
        edit: true
      },
      delete: {
        removeAllLayers: false
      },
      position: "bottomright"
    });



    this._map.addControl(this.drawControl);
    this._map.addLayer(this._drawnFeauresLayer);

    // 开始绘制监听事件，清除上一次绘制的图形
    this._map.on("draw:drawstart", e => {
      this._drawnFeauresLayer.clearLayers();
      this.setQueryBounds(null);
    });

    // 创建查询矩形
    this._map.on("draw:created", e => {
      const type = e.layerType,
        layer = e.layer;
      this._drawnFeauresLayer.addLayer(layer);
      console.log(layer.getBounds());
      const bounds = layer.getBounds(),
        south = bounds.getSouth().toFixed(4),
        east = bounds.getEast().toFixed(4),
        west = bounds.getWest().toFixed(4),
        north = bounds.getNorth().toFixed(4);
      this.setQueryBounds({ east, west, south, north });
    });

    this._map.on("draw:edited", e => {
      console.log("draw:edited");
    });
  }

3. 这样再使用的时候，调用这个封装的方法然后放上就可以了