首页 / 浏览问题 / Web / 问题详情
vue编写动态绘制只能绘制一次,点击其他图形绘制报错
zhouchoa  (38分)  初出茅庐
12月20日, 2021

第一次点击一个图形可以进行绘制,当你点击其他图形绘制时就会报错???

当第二次点击其他图形绘制时,就会报以下错:

在vue中我是给每张图片设置了监听事件:

methods:{
  // 图形监听事件
    imageClick(val) {
      var viewer=window.viewer;
      console.log(val,'viewer');
      const plotting = new Plotting(viewer);
      if (plotting) {
        plotting.DrawCellClick(val);
      }
    },
}

在js文件中我将开源中的方法都给提取了出来,自己进行了编写;

这是 plotting.js  文件中的代码:

class Plotting {
  constructor(viewer) {
    this.viewer = viewer;
    this.host = 'http://support.supermap.com.cn:8090';
    this.cesium = Cesium;
    this.scene = viewer.scene;
    this.scene.globe.depthTestAgainstTerrain = false;
    this.serverUrl = this.host + '/iserver/services/plot-jingyong/rest/plot';
    this.plotting;
    this.plottingLayer;
    this.plotEditControl;
    this.plotDrawControl;
    this.plotPanel;
    this.stylePanel;
    this.InitPlot();
  }
  InitPlot() {
    var self = this;
    if (!this.viewer) {
      return;
    }
    self.plottingLayer = new self.cesium.PlottingLayer(
      self.scene,
      'plottingLayer',
    );
    self.scene.plotLayers.add(self.plottingLayer);

    self.plotEditControl = new self.cesium.PlotEditControl(
      self.scene,
      self.plottingLayer,
    ); //编辑控件
    self.plotDrawControl = new self.cesium.PlotDrawControl(
      self.scene,
      self.plottingLayer,
    ); //绘制控件

    self.plotDrawControl.drawControlEndEvent.addEventListener(()=>{
      //标绘结束,激活编辑控件

      self.plotEditControl.activate();
    });

    self.plotting = self.cesium.Plotting.getInstance(
      self.serverUrl,
      self.scene,
    );
    //标绘面板
    // initPlotPanel("plotPanel", serverUrl, plotDrawControl, plotEditControl, plotting);
    // 属性面板
    // self.stylePanel = new StylePanel(
    //   'stylePanel',
    //   self.plotEditControl,
    //   self.plotting,
    // );
  }
  DrawCellClick(drawCellparam) {
    console.log(drawCellparam,'drawcell');
    console.log(this.plotDrawControl,'plotDraw');
    var self = this;
    if (self.plotDrawControl !== null) {
      self.plotDrawControl.deactivate();
      self.plotDrawControl.libID = drawCellparam.libID;
      self.plotDrawControl.code = drawCellparam.symbolCode;
      
      //设置标号默认的模型路径
      self.plotDrawControl.drawFinishEvent.addEventListener(function (geo) {
        if (geo.symbolType === SuperMap.Plot.SymbolType.DOTSYMBOL) {
          geo.modelPath = './SampleData/plot/Cesium_Air.gltf';
          geo.picturePath = './SampleData/plot/blupin.png';
        }
      });
      self.plotDrawControl.serverUrl = self.serverUrl;

      self.plotDrawControl.activate();
      if (undefined !== self.plotEditControl) {
        self.plotEditControl.deactivate();
      }
    }
  }
  //删除指定标号
  deleteSeleGeo() {
    var self = this;
    self.plottingLayer.removeGeoGraphicObject(
      self.plottingLayer.selectedFeature,
    );
  }
  //获取属性面板GridDom
  getGridDomObdect() {
    var self = this;
    return self.stylePanel.getDomObject();
  }

  //     // 想要通过该方法来暴露x
  //     showX () {
  //         return this.x
  //     }
}
export default Plotting;

1个回答

你好,开源问题请移步github提issue,会有专人进行回复。此外你可以直接用我们封装好的js,不用自己去进行重写
卷饼先生  (6,037分)  登峰造极
12月20日, 2021
这git上面也没有人回答呀!!
这js代码就是在开源中提取出来的,因为我只要基本标号,所以就只把基本标号给提取了出来
...