フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

(非同期() => {
 // -- 新しいマップを作成します -- バックグラウンドで新しい CAD マップを作成し、それをフロントエンドで開きます // js コード let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 doc を新しい vjmap.DbDocument() にします。
 エンティティを [] とします。
 line1 を新しい vjmap.DbLine() とします。
 行1.開始 = [0, 0]
 行1.終了 = [0, 15]
 エンティティ.push(行1)
 
 line2 を新しい vjmap.DbLine() とします。
 行2.開始 = [0, 14.1]
 2行目終了 = [2.99, 14.1]
 エンティティ.push(行2)
 
 line3 を新しい vjmap.DbLine() にします。
 行3.開始 = [0, 0.9]
 3行目終了 = [2.99, 0.9]
 エンティティ.push(行3)
 
 line4 を新しい vjmap.DbLine() にします。
 行4.開始 = [0, 9.95]
 行4.終了 = [5.8, 9.95]
 エンティティ.push(行4)
 
 line5 を新しい vjmap.DbLine() にします。
 5行目.開始 = [0, 5.05]
 5行目終了 = [5.8, 5.05]
 
 ハッチを新しいvjmap.DbHatch()にします。
 hatch.pattern = "SOLID";
 ハッチングの色 = 0xB43F32;
 hatch.points = [line4.start, line4.end, line5.end, line5.start];
 エンティティをプッシュします(ハッチ);
 エンティティ.push(行4)
 エンティティ.push(行5)
 
 line6 を新しい vjmap.DbLine() にします。
 6行目開始 = [5.8, 5.05]
 6行目終了 = [5.8, 9.95]
 エンティティ.push(6行目)
 
 arc1 を新しい vjmap.DbArc() とします。
 弧1の中心 = [5.7963, 7.504];
 arc1の半径 = 1.8014;
 arc1.開始角度 = 270 * Math.PI / 180.0;
 arc1.endAngle = 90 * Math.PI / 180.0;
 エンティティ.push(arc1)
 
 arc2 を新しい vjmap.DbArc() とします。
 弧2の中心 = [5.7963, 7.504];
 arc2の半径 = 1.8014;
 arc2.開始角度 = 90 * Math.PI / 180.0;
 arc2.endAngle = 270 * Math.PI / 180.0;
 //arc2.linetype = "破線"
 エンティティ.push(arc2)
 
 arc3 を新しい vjmap.DbArc() とします。
 arc3.center = [1.575, 7.5];
 arc3.半径 = 6.75;
 arc3.開始角度 = 282 * Math.PI / 180.0;
 arc3.endAngle = 78 * Math.PI / 180.0;
 エンティティ.push(arc3)
 
 ブロックを新しい vjmap.DbBlock() にします。
 block.name = "ボール";
 ブロックの原点 = [0, 0]
 block.entitys = エンティティ;
 doc.appendBlock(ブロック);
 
 blockRef1 を新しい vjmap.DbBlockReference() とします。
 blockRef1.blockname = "ボール";
 ブロックRef1.位置 = [0, 0];
 doc.appendEntity(ブロック参照1);
 
 blockRef2 を新しい vjmap.DbBlockReference() にします。
 blockRef2.blockname = "ボール";
 ブロック参照2.位置 = [28, 15];
 blockRef2.rotation = Math.PI;
 doc.appendEntity(ブロック参照2);
 
 otherEnts = [ とする
  新しい vjmap.DbLine({
   開始: [0, 15],
   終了: [28, 15]
  }）、
  新しい vjmap.DbLine({
   開始: [0, 0],
   終了: [28, 0]
  }）、
  新しい vjmap.DbLine({
   開始: [14, 0],
   終了: [14, 15],
   カラーインデックス: 1
  }）、
  新しい vjmap.DbCircle({
   中央:[14, 7.5],
   半径: 1.83、
   色: 0xFF0000
  }）、
  新しい vjmap.DbText({
   位置: [14, 16],
   内容：「バスケットボールコート図」、
   カラーインデックス: 1,
   水平モード: 4,
   高さ: 1,
  })
 ]
 
 doc.appendEntity(その他のエンティティ)。
 
 // js コード let res = await svc.updateMap({
  mapid: "バスケットボールコート",
  ファイルドキュメント: doc.toDoc(),
  マップオープンウェイ: vjmap.MapOpenWay.Memory、
  style: vjmap.openMapDarkStyle() // div の背景色が暗い場合は、暗い背景のスタイルもここに渡されます})
 （res.error）の場合{
  メッセージ.エラー(res.エラー)
 }
 mapExtent = vjmap.GeoBounds.fromString(res.bounds); とします。
 prj = new vjmap.GeoProjection(mapExtent); とします。
 
 var map = 新しい vjmap.Map({
  container: 'map', // コンテナID
  スタイル: svc.rasterStyle(),
  中心: prj.toLngLat(mapExtent.center()),
  ズーム: 2,
  レンダリングワールドコピー: false
 });
 マップをアタッチします(svc、prj);
 マップの境界にフィットします。
 
 map.addControl(新しい vjmap.NavigationControl());
 map.addControl(新しいvjmap.MousePositionControl({showZoom: true}));
 
 map.enableLayerClickHighlight(svc, e => {
  e && message.info(`type: ${e.name}, objectid: ${e.objectid}, レイヤー: ${e.layerindex}`);
 })
})();

doc を新しい vjmap.DbDocument() にします。
/** データの取得元となるマップ。このマップ上でデータが変更、追加、または削除されます。形式は、exam/v1 などの mapid/version です。 */
doc.from = "バスケットボールコート/v1";
 
// `objectid` エンティティハンドルを渡してエンティティを変更または削除します。`objectid` がない場合は、追加することを意味します。let modifyEnts = [
    /*改訂*/
    新しい vjmap.DbCircle({
        objectid: "71", // エンティティ ハンドル。エンティティ ハンドルが渡された場合、このエンティティを変更または削除することを意味します。 
        カラーインデックス: 2
    }）、
    /*消去*/
    新しい vjmap.DbText({
        objectid: "73", // エンティティ ハンドル。エンティティ ハンドルが渡された場合、このエンティティを変更または削除することを意味します。 
        delete: true // 削除を意味します}),
    /*新しく追加されました (オブジェクトIDは渡されません)*/
    新しい vjmap.DbMText({
        位置: [14, -2],
        内容:「私は複数行のテキストです」
        カラーインデックス: 3,
        添付ファイル: 2,
        高さ: 1,
    })
]
doc.appendEntity(Ents を変更します);
 
// js コード let res = await svc.updateMap({
    mapid: "新しいバスケットボールコート",
    ファイルドキュメント: doc.toDoc(),
    マップオープンウェイ: vjmap.MapOpenWay.Memory、
    style: vjmap.openMapDarkStyle() // div の背景色が暗い場合は、暗い背景のスタイルもここに渡されます})