図形の形や色を変更する

実行結果

次の例では、ボタンを押した際に図形の形や色を変更します。
ソースコードと解説

図形の形や色を変更するには、ZDC.Polylineクラス、ZDC.Polygonクラス、ZDC.Ovalクラスの、setOptions(options)を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
  // オブジェクト
  var map, pli, plg, ov;

  // 中心点の緯度経度（東京駅）
  const lat = 35.681406, lng = 139.767132;

  // ZMALoader
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
      console.error(error)
      return
    }

    // マップオプションをデフォルト値から変更する
    mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定
    mapOptions.zoom = 10;

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function() {
        // Success callback

        /* 線の頂点を作成 */
        var latlngs = [];
        latlngs.push(new ZDC.LatLng(35.70, 139.63));
        latlngs.push(new ZDC.LatLng(35.70, 139.72));
        latlngs.push(new ZDC.LatLng(35.66, 139.65));
        /* 線を作成 */
        pli = new ZDC.Polyline(
          latlngs,
          {
            color: '#FF0000',
            width: 2
          }
        );
        /* 線を地図に追加 */
        map.addWidget(pli);

        /* 頂点の配列(外側)を作成 */
        var latlngs1 = [];
        latlngs1.push(new ZDC.LatLng(35.6607694489887, 139.7419563985648));
        latlngs1.push(new ZDC.LatLng(35.6845229143682, 139.7286721190967));
        latlngs1.push(new ZDC.LatLng(35.7057395047171, 139.7473525622848));
        latlngs1.push(new ZDC.LatLng(35.7032096194981, 139.7793172849411));
        latlngs1.push(new ZDC.LatLng(35.6794617174330, 139.7926015644093));
        latlngs1.push(new ZDC.LatLng(35.6582381374606, 139.7739211212211));
        /* 頂点の配列(内側)を作成 */
        var latlngs2 = [];
        latlngs2.push(new ZDC.LatLng(35.6921309732335, 139.7584403258811));
        latlngs2.push(new ZDC.LatLng(35.6789032912005, 139.7484184084603));
        latlngs2.push(new ZDC.LatLng(35.6705924719100, 139.7661655538930));
        latlngs2.push(new ZDC.LatLng(35.6856869918577, 139.7757698914212));
        /* ポリゴン(多角形)を作成 */
        plg = new ZDC.Polygon([latlngs1,latlngs2], {
          fill: '#FF0000',
          strokeWidth: 3,
          propagation: true
        });
        /* ポリゴン(多角形)を追加 */
        map.addWidget(plg);

        /* 円を作成 */
        ov = new ZDC.Oval(
          new ZDC.LatLng(35.70, 139.85),
          {x: 2000, y: 2000},
          {
            fill: '#00FF00',
            stroke: '#FF0000',
            strokeWidth: '2',
            opacity: 0.4
          }
        );
        /* 円を地図に追加 */
        map.addWidget(ov);

        // 再描画ボタン押下時のイベントを設定
        const button = document.getElementById('redraw-button');
        button.addEventListener('click', () => {
          setOptions_Geometry();
        },
        { once: true });

      },
      function() {
        // Failure callback
      }
    );
  });

  /* ★設定変更 */
  function setOptions_Geometry() {
    /* 線のオプションを変更 */
    pli.setOptions(
      {
        color: '#0000FF',
        width: 4
      }
    );
    /* 線の形状を変更 */
    var latlngs = pli.getShape();
    latlngs.push(new ZDC.LatLng(35.70, 139.63));
    pli.setShape(latlngs);
    /* 多角形のオプションを変更 */
    plg.setOptions(
      {
        fill: '#F000F0',
        strokeWidth: 3,
        opacity: 0.4
      }
    );
    /* 多角形の形状を変更 */
    var fullLatlngs = plg.getFullShape();
    fullLatlngs[0].pop();
    fullLatlngs[1].pop();
    plg.setShape(fullLatlngs);
    /* 円のオプションを変更 */
    ov.setOptions(
      {
        fill: '#00FFFF',
        stroke: '#FFFF00',
        strokeWidth: '5',
        opacity: 0.8
      }
    );
    /* 円の形状を変更 */
    var radius = ov.getRadius();
    radius.x = 1000;
    radius.y = 2000;
    ov.setRadius(radius);
  }
</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
  <div class="mb-2" id="IBox">
    <input type="button" value="再描画" id="redraw-button">
  </div>
</body>
</html>