【Cesium】 Draw标绘类

cesium Draw标绘类

mars3d.Draw是实体类，标绘控制处理类，提供文字、点、线、面、立体、模型等各类entity对象的绘制。

需求：拿取请求的json数据绘制区域

书写基础绘制方法

新建draw.js 书写点线面绘制方法

var drawControl;
// 绘制初始化
function initDrawControl (hasEdit = false) {
  drawControl = new mars3d.Draw(window.viewer, { hasEdit: hasEdit });
  //事件监听(可以自行加相关代码实现业务需求，此处主要做示例)
  drawControl.on(mars3d.draw.event.DrawStart, function (e) {
    console.log('开始绘制');
  });
  drawControl.on(mars3d.draw.event.DrawAddPoint, function (e) {
    console.log('绘制过程中增加了点');
  });
  drawControl.on(mars3d.draw.event.DrawRemovePoint, function (e) {
    console.log('绘制过程中删除了点');
  });
  drawControl.on(mars3d.draw.event.DrawCreated, function (e) {
    console.log('创建完成');
  });
  drawControl.on(mars3d.draw.event.EditStart, function (e) {
    console.log('开始编辑');
  });
  drawControl.on(mars3d.draw.event.EditMovePoint, function (e) {
    console.log('编辑修改了点');
  });
  drawControl.on(mars3d.draw.event.EditRemovePoint, function (e) {
    console.log('编辑删除了点');
  });
  drawControl.on(mars3d.draw.event.EditStop, function (e) {
    console.log('停止编辑');
  });
  drawControl.on(mars3d.draw.event.Delete, function (e) {
    console.log('删除了对象');
  });
}

加载绘制对象

/**
 *  加载绘制对象
 * @param {Boolean}  json geojson
 * @param {Boolean}  hasEdit 是否可编辑
 */
function loadDrawJson (json, hasEdit) {
  if (!drawControl) {
    initDrawControl(hasEdit)
  }
  drawControl.loadJson(json, {
    clear: true,
    flyTo: true
  });
}

清除绘制图形

function clearDraw () {
  if (drawControl) {
    drawControl.clearDraw();
  }
}

业务代码

    /**
     *  绘制图形的方法
     * @param {Boolean}  drawOrCancel true为绘制，false为擦除图像
     */
    async drawAnyArea (drawOrCancel = true) {
      // 若标识位为false则擦除图像并return
      if (!drawOrCancel) return clearDraw()
      //  调用接口获得需要绘制的图形
      const queryData = {
        xxxid: xxid
      }
      let data = await this.$awaitWraper(xxxApi.getList(queryData))
      //  申明图形json数据格式  
      let json = {
        type: "FeatureCollection",
        features: []
      }
      //  生成绘制器   
      initDrawControl()
      // 将请求来的数据推入json对象的features中  
      if (data != null) {
        for (let item of data) {
          if (item.positionJson && item.positionJson != '') {
            json.features.push(JSON.parse(item.positionJson).features[0])
          }
        }
      }
      // 将json数据加载到绘制器中   
      loadDrawJson(json, false)
    },

知识点

• var drawControl = new mars3d.Draw(viewer, {hasEdit: true }); .Draw生成实体类，提供点线面、模型等entity对象的绘制
• 绘制图形的流程，.Draw生成绘制器 => 准备json对象 => .loadJson生成器将json数据加载图形
• .clearDraw为清除绘制图形