The front end creates and modifies CAD graphics details through JavaScript

(async () => {
 // --Create a new map--Create a new CAD map in the background, and then open it in the front end // js code let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 let doc = new vjmap.DbDocument();
 let entities = [];
 let line1 = new vjmap.DbLine();
 line1.start = [0, 0]
 line1.end = [0, 15]
 entities.push(line1)
 
 let line2 = new vjmap.DbLine();
 line2.start = [0, 14.1]
 line2.end = [2.99, 14.1]
 entities.push(line2)
 
 let line3 = new vjmap.DbLine();
 line3.start = [0, 0.9]
 line3.end = [2.99, 0.9]
 entities.push(line3)
 
 let line4 = new vjmap.DbLine();
 line4.start = [0, 9.95]
 line4.end = [5.8, 9.95]
 entities.push(line4)
 
 let line5 = new vjmap.DbLine();
 line5.start = [0, 5.05]
 line5.end = [5.8, 5.05]
 
 let hatch = new vjmap.DbHatch();
 hatch.pattern = "SOLID";
 hatch.color = 0xB43F32;
 hatch.points = [line4.start, line4.end, line5.end, line5.start];
 entities.push(hatch);
 entities.push(line4)
 entities.push(line5)
 
 let line6 = new vjmap.DbLine();
 line6.start = [5.8, 5.05]
 line6.end = [5.8, 9.95]
 entities.push(line6)
 
 let arc1 = new vjmap.DbArc();
 arc1.center = [5.7963, 7.504];
 arc1.radius = 1.8014;
 arc1.startAngle = 270 * Math.PI / 180.0;
 arc1.endAngle = 90 * Math.PI / 180.0;
 entities.push(arc1)
 
 let arc2 = new vjmap.DbArc();
 arc2.center = [5.7963, 7.504];
 arc2.radius = 1.8014;
 arc2.startAngle = 90 * Math.PI / 180.0;
 arc2.endAngle = 270 * Math.PI / 180.0;
 //arc2.linetype = "DASHED"
 entities.push(arc2)
 
 let arc3 = new vjmap.DbArc();
 arc3.center = [1.575, 7.5];
 arc3.radius = 6.75;
 arc3.startAngle = 282 * Math.PI / 180.0;
 arc3.endAngle = 78 * Math.PI / 180.0;
 entities.push(arc3)
 
 let block = new vjmap.DbBlock();
 block.name = "ball";
 block.origin = [0, 0]
 block.entitys = entities;
 doc.appendBlock(block);
 
 let blockRef1 = new vjmap.DbBlockReference();
 blockRef1.blockname = "ball";
 blockRef1.position = [0, 0];
 doc.appendEntity(blockRef1);
 
 let blockRef2 = new vjmap.DbBlockReference();
 blockRef2.blockname = "ball";
 blockRef2.position = [28, 15];
 blockRef2.rotation = Math.PI;
 doc.appendEntity(blockRef2);
 
 let otherEnts = [
  new vjmap.DbLine({
   start: [0, 15],
   end: [28, 15]
  }),
  new vjmap.DbLine({
   start: [0, 0],
   end: [28, 0]
  }),
  new vjmap.DbLine({
   start: [14, 0],
   end: [14, 15],
   colorIndex: 1
  }),
  new vjmap.DbCircle({
   center:[14, 7.5],
   radius: 1.83,
   color: 0xFF0000
  }),
  new vjmap.DbText({
   position: [14, 16],
   Contents: "Basketball court diagram",
   colorIndex: 1,
   horizontalMode: 4,
   height: 1,
  })
 ]
 
 doc.appendEntity(otherEnts);
 
 // js code let res = await svc.updateMap({
  mapid: "basketballCourt",
  filedoc: doc.toDoc(),
  mapopenway: vjmap.MapOpenWay.Memory,
  style: vjmap.openMapDarkStyle() // When the div has a dark background color, the dark background style is also passed here})
 if (res.error) {
  message.error(res.error)
 }
 let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
 let prj = new vjmap.GeoProjection(mapExtent);
 
 var map = new vjmap.Map({
  container: 'map', // container ID
  style: svc.rasterStyle(),
  center: prj.toLngLat(mapExtent.center()),
  zoom: 2,
  renderWorldCopies: false
 });
 map.attach(svc, prj);
 map.fitMapBounds();
 
 map.addControl(new vjmap.NavigationControl());
 map.addControl(new vjmap.MousePositionControl({showZoom: true}));
 
 map.enableLayerClickHighlight(svc, e => {
  e && message.info(`type: ${e.name}, objectid: ${e.objectid}, layer: ${e.layerindex}`);
 })
})();

let doc = new vjmap.DbDocument();
/** The map from which the data is derived. The data will be modified, added or deleted on this map. The format is mapid/version, such as exam/v1. */
doc.from = "basketballCourt/v1";
 
// Modify or delete an entity by passing the `objectid` entity handle. If there is no `objectid`, it means adding let modifyEnts = [
    /*Revise*/
    new vjmap.DbCircle({
        objectid: "71", // Entity handle. If the entity handle is passed, it means to modify or delete this entity. 
        colorIndex: 2
    }),
    /*delete*/
    new vjmap.DbText({
        objectid: "73", // Entity handle. If the entity handle is passed, it means to modify or delete this entity. 
        delete: true // means delete}),
    /*Newly added (no objectid passed)*/
    new vjmap.DbMText({
        position: [14, -2],
        contents: "I am a multi-line text",
        colorIndex: 3,
        attachment: 2,
        height: 1,
    })
]
doc.appendEntity(modifyEnts);
 
// js code let res = await svc.updateMap({
    mapid: "newBasketballCourt",
    filedoc: doc.toDoc(),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: vjmap.openMapDarkStyle() // When the div has a dark background color, the dark background style is also passed here})