text: // JavaScript source code
  var change_Line_Format;
  
  class ChangeLineFormat {
  
      constructor(container) {
          // Access Tokenを設定
          var accessToken = "<your access token here>";
  
          // Viewerを作成する
          this.viewer = new mapray.Viewer(
              container, {
                  image_provider: this.createImageProvider(),
                  dem_provider: new mapray.CloudDemProvider(accessToken)
              }
          );
  
          this.SetCamera();
  
          this.MakeUIFormatLine();
  
          this.SetLinePointStr();
      }
  
      // 画像プロバイダを生成
      createImageProvider() {
          // 国土地理院提供の汎用的な地図タイルを設定
          return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18);
      }
  
      SetCamera() {
          // カメラ位置の設定
  
          // 球面座標系（経度、緯度、高度）で視点を設定。皇居と東京タワーの中間点付近
          var home_pos = { longitude: 139.749486, latitude: 35.671190, height: 50 };
  
          // 球面座標から地心直交座標へ変換
          var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
          var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
  
          // 視線方向を定義
          var cam_pos = mapray.GeoMath.createVector3([0, 0, 7500]);
          var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
          var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
  
          // ビュー変換行列を作成
          var view_to_home = mapray.GeoMath.createMatrix();
          mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
  
          // カメラの位置と視線方向からカメラの姿勢を変更
          var view_to_gocs = this.viewer.camera.view_to_gocs;
          mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
  
          // カメラのnear、farの設定
          this.viewer.camera.near = 30;
          this.viewer.camera.far = 500000;
      }
  
      MakeUIFormatLine() {
          // 直線のエンティティを作成
          var entity = new mapray.MarkerLineEntity(this.viewer.scene);
  
          // 皇居の座標を設定
          var line_fast_position = { longitude: 139.7528, latitude: 35.685175, height: 350 };
  
          // 東京タワーの座標を設定
          var line_second_position = { longitude: 139.745433, latitude: 35.658581, height: 350 };
  
          // 各座標を配列に保存して、直線を追加
          var position_array = [line_fast_position.longitude, line_fast_position.latitude, line_fast_position.height,
                                line_second_position.longitude, line_second_position.latitude, line_second_position.height];
          entity.addPoints(position_array);
  
          // プルダウンの値取得
          var line_Width_Value = parseFloat(document.getElementById("LineWidthPullDown").value);
          var line_ColorChord = document.getElementById("LineColorPallet").value;
  
          // ColorChordをRBGに変換
          var RGBArray = this.convertColorChordToRGB(line_ColorChord);
  
          // プルダウンの値を設定
          entity.setLineWidth(line_Width_Value);
          entity.setColor(RGBArray);
  
          // エンティティをシーンに追加
          this.viewer.scene.addEntity(entity);
      }
  
      SetLinePointStr() {
          // 文字のエンティティを作成
          var entity = new mapray.TextEntity(this.viewer.scene);
  
          // 皇居より400mほど東の場所を設定
          var fast_font_position = { longitude: 139.758503, latitude: 35.685030, height: 350 };
  
          // GeoPointクラスを生成して、テキストを追加
          var fast_font_geopoint = new mapray.GeoPoint(fast_font_position.longitude, fast_font_position.latitude, fast_font_position.height);
          entity.addText( "The Imperial Palace", fast_font_geopoint, { color: [1, 1, 0], font_size: 25 } );
  
          // 東京タワーより300mほど東の場所を設定
          var second_font_position = { longitude: 139.749169, latitude: 35.658252, height: 350 };
  
          // GeoPointクラスを生成して、テキストを追加
          var second_font_geopoint = new mapray.GeoPoint(second_font_position.longitude, second_font_position.latitude, second_font_position.height);
          entity.addText( "Tokyo Tower", second_font_geopoint, { color: [1, 1, 0], font_size: 25 } );
  
          // エンティティをシーンに追加
          this.viewer.scene.addEntity(entity);
      }
  
      ChangeLineWidth() {
          // プルダウンの値取得
          var line_Width_Value = parseFloat(document.getElementById("LineWidthPullDown").value);
  
          // プルダウンの値を設定
          var lineEntity = this.viewer.scene.getEntity(0);
          lineEntity.setLineWidth(line_Width_Value);
      }
  
      ChangeLineColor() {
          // プルダウンの値取得
          var line_ColorChord = document.getElementById("LineColorPallet").value;
  
          // ColorChordをRBGに変換
          var RGBArray = this.convertColorChordToRGB(line_ColorChord);
  
          // プルダウンの値を設定
          var lineEntity = this.viewer.scene.getEntity(0);
          lineEntity.setColor(RGBArray);
      }
  
      convertColorChordToRGB(colorChord) {
          var colorChordChars = colorChord.split('');
  
          var r = parseInt(colorChordChars[1].toString() + colorChordChars[2].toString(), 16) / 255;
          var g = parseInt(colorChordChars[3].toString() + colorChordChars[4].toString(), 16) / 255;
          var b = parseInt(colorChordChars[5].toString() + colorChordChars[6].toString(), 16) / 255;
  
          return [r, g, b];
      }
  
  }
  
  function CreateChangeLineFormatInstance(container) {
      change_Line_Format = new ChangeLineFormat(container);
  }
  
  function LineWidthValueChanged() {
      change_Line_Format.ChangeLineWidth();
  }
  
  function LineColorValueChanged() {
      change_Line_Format.ChangeLineColor();
  }
  