leaflet-geoman使用小结

使用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