• home > GIS > Leaflet >

    leaflet-geoman使用小结

    Author:zhoulujun Date:

    leaflet清除通过geoman(pm)插件绘制的图形,如何获取绘制图形的坐标。官方文档我是没有看出啥东东出来

    使用leaflet.js,一般直接使用 https://github.com/geoman-io/leaflet-geoman

    文档翻译:https://blog.csdn.net/DI_ID/article/details/106861135

    但是,leaflet清除通过geoman(pm)插件绘制的图形,如何获取绘制图形的坐标。官方文档我是没有看出啥东东出来

    leaflet清除通过geoman(pm)插件绘制的图形  https://blog.csdn.net/di_id/article/details/107085188

    按照上面的操作,还是不行

    启用Geoman绘制工具条


    this.map.pm.addControls({
      position: 'topright',
      drawMarker: false,
      drawPolyline: false,
      cutPolygon: false,
      drawCircleMarker: false,
    });
    this.map.pm.setLang('zh');

    监听绘制图形

    this.map.on('pm:create', (shape, layer) => {
      // const graphic = LMapUtil.getGraphics(workingLayer);
      //  LMapUtil不知道这个哪里引入的
      console.log(shape, layer);
      if (this.isCanAdd) {
        this.isCreatedMap = true;
        this.map.pm.disableDraw('Circle');
        this.map.pm.disableDraw('Rectangle');
        this.map.pm.disableDraw('Polygon');
        this.mapLayers.push(shape);
      }
      // this.$emit('edited', graphic);
    });


    清除图形方法

    //注意:graphic.layer才是真正添加到map的图层;不是graphic。clearGraphics(map){
     map.graphics.forEach(graphic =>{
     map.removeLayer(graphic.layer);
     })}

    但是,我的项目中map.graphics为undefined。参考:graphic.layer才是真正添加到map的图层;不是graphic。

    所以我只有如此实现

    this.mapLayers.forEach((graphic) => {
      console.log(graphic);
      graphic.layer && this.map.removeLayer(graphic.layer);
    });


    Geoman中编辑多边形后如何获取latlngs值?

    ensureMap() {
      const shapes = this.mapLayers[this.mapLayers.length - 1];
      // 坐标
      console.log(shapes.layer._rings);
      //  经纬度
      console.log(shapes.layer._latlngs);
      //  完成后,
      this.$emit('createHeadMap', shapes);
    },

    我没有直接找到方法


    最后,还是推荐大家,使用maptalks吧!


    转载本站文章《leaflet-geoman使用小结》,
    请注明出处:https://www.zhoulujun.cn/html/GIS/Leaflet/8692.html

    上一篇:First page
    下一篇:Last page