Saoline Tips

CSSでLeafletの画像マーカーの色を変える

投稿日: 2023-04-01 投稿者: Hisa

Leafletでマーカーに画像ファイルを使ってる場合、同じ形のマーカーで動的に色を変えたい場合、以前は色を違えた別の画像ファイルを用意して、アイコンのURLをセットする方法を行ってましたが、色数が多くなったり中間色を使う場合、別のファイルを用意するのも大変なので何とかならないかと調べてましたところ、
CSSのhue-rotateで色相環の回転位置を使って同じ画像ファイルで色を変えることがわかり試してみました。

ここで教えていただきました。

< 使った画像 >

黄色

青

< コード例 >

CSS


  /* 色相環回転色 */
  .acmarker_aqua {
    filter: hue-rotate(150deg);   /* 黄色から150度 */
  }
  .acmarker_orange {
    filter: hue-rotate(-45deg);   /* 黄色から-45度 */
  }
  .acmarker_aquamarine {
    filter: hue-rotate(120deg);   /* 黄色から120度 */
  }
  
  .acmarker_red {
    filter: hue-rotate(-90deg);   /* 黄色から-90度 */
  }
  .acmarker_fuchsia {
    filter: hue-rotate(-135deg);  /* 黄色から-135度 */ 
  }
  .acmarker_yellow {
    filter: hue-rotate(0deg);   
  }
  .acmarker_lightgreen {
    filter: hue-rotate(45deg);   /* 黄色から-45度 */ 
  }
  .acmarker_blue {
    filter: hue-rotate(150deg);  /* 黄色から-150度 */ 
  }
  
  .acmarker_blue_red {
    filter: hue-rotate(150deg);   /* 青から150度 */ 
  }
  
  .acmarker_blue_green {
    filter: hue-rotate(250deg);   /* 青から250度 */ 
  }

javaScript


      // 色相環回転色適用CSSクラス //
      let markerClass = isAquaChange ? "acmarker_aqua" : ""

      if (!isByAltMarker) {
        markerClass = isOrangeChange ? "acmarker_orange" : markerClass
        markerClass = isAquaMarineChange ? "acmarker_aquamarine" : markerClass
        markerClass = isPinkChange ? "acmarker_red" : markerClass
        markerClass = isRedChange ? "acmarker_blue_red" : markerClass
        markerClass = isGreenChange ? "acmarker_blue_green" : markerClass
      }

      // 高度別マーカーの場合 //
      if (isByAltMarker) {

        // 色名ディレクトリ、クラス名取得 //
        const altclass = new Altitude()
        const map = altclass.getIconColorDirClassName(lineitm.altidx)

        const coldir = map["dir"]
        const iconfnm = ICON_URL_OTHEROPE.split("/")[3]
        ICON_URL_OTHEROPE = `Img/apbytype/${coldir}/${iconfnm}`
        markerClass = map["class"]

        // Img/acbytype/yellow/ac_787.png
      }

      // 対象オペレータ飛行中 //
      const acicon = L.icon({
        iconUrl: ICON_URL,
        iconRetinaUrl: ICON_URL,
        iconSize: [szInt, szInt],
        iconAnchor: [szIntHalf, szInt],
        popupAnchor: [0, ppAnchorY],

        className: markerClass
      })
      // 他オペレータ飛行中 //
      const acicon_other = L.icon({
        iconUrl: ICON_URL_OTHEROPE,
        iconRetinaUrl: ICON_URL,
        iconSize: [szInt, szInt],
        iconAnchor: [szIntHalf, szInt],
        popupAnchor: [0, ppAnchorY],

        className: markerClass
      })

JavaScript 画像ディレクトリ、クラス名関数


  /**
   * 高度レベル別飛行機マーカーディレクトリ名クラス名
   * @param {type} level 高度レベル
   * @returns {Altitude.getIconColorDirClassName.map}
   */
  getIconColorDirClassName(level) {

    let map = {"dir": "white", "class": ""}


    if (level === 0) {
      map = {"dir": "blue", "class": "acmarker_blue_green"}
    }
    else if (level === 1) {
      map = {"dir": "blue", "class": "acmarker_blue_red"}
    }
    else if (level === 2) {
      map = {"dir": "fuchsia", "class": ""}  // Fucisia
    }
    else if (level === 3) {
      map = {"dir": "yellow", "class": ""}    // Yellow
    }
    else if (level === 4) {
      map = {"dir": "lightgreen", "class": ""}     // LightGreen
    }
    else if (level === 5) {
      map = {"dir": "blue", "class": ""}     // Blue
    }
    else if (level === 6) {
      map = {"dir": "yellow", "class": "acmarker_aqua"}    // Aqua
    }
    else if (level === 7) {
      map = {"dir": "white", "class": ""}     // white
    }

    return map
  }

< 画面例 >

3AFB Aviaton

飛行機の高度でアイコンの色を変えています。

画像ファイルにない色を使う。

Python Selenium で要素は見つかるが、クリックが発火しない時の対応

投稿日: 2023-03-07 投稿者: Hisa

作成中

チャップリン・礼儀作法

投稿日: 2023-03-03 投稿者: Hisa

私たちがみんなで、小さな礼儀作法に気をつけたなら、人生はもっと暮らしやすくなる。

チャップリン・直感

投稿日: 2023-03-03 投稿者: Hisa

いいかい、もし、良いと思ったら、どうやろうかなどと決して心配するな。
つまり直感だよ。

ベンジャミン・フランクリン・井戸

投稿日: 2023-03-03 投稿者: Hisa

井戸が干上がってはじめて、
人は水の価値を理解する。

ベンジャミン・フランクリン・行動

投稿日: 2023-03-03 投稿者: Hisa

事実よりも
考え方が重要である。

考え方よりも
行動が重要である。

行動が
最良の結果を生み出してくれる

< コード例 >

HTML
Bootstrap4のモーダルダイアログのタイトル

        <div class="pull-left mt-0 histrangeclass">

          <!-- ポーズ再開ボタン -->
          <button id="histpause" type="button" class="btn btn-sm btn-primary tippyspan histshow pauseresume"
                    title="Pause live"><i class="fa fa-pause"></i></button>
          <button id="histresume" type="button" class="btn btn-sm btn-primary tippyspan histshow pauseresume dsp_none"
                    title="Resume live"><i class="fa fa-play"></i></button>          

          <!-- ヒストリースライダー -->
          <input id="histrange" type="range" class="histshow dsp_none curpo" min="1" max="200" step="1">  
          <span id="range_pos" class="histshow dsp_none">126/200</span>

          <!-- インターバルボタンズ --> 
          <span id="hist_int_buttons">

            <button id="histint_2" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 2 sec interval">2</button>
            <button id="histint_3" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 3 sec interval">3</button>

            <button id="histint_7" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 7 sec interval">7</button>

            <button id="histint_15" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 15 sec interval">15</button>

            <button id="histint_22" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 22 sec interval">22</button>

            <button id="histint_33" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 33 sec interval">33</button>

            <button id="histint_45" type="button" class="btn btn-sm btn-primary tippyspan histshow intbtns"
                    title="Change to 45 sec interval">45</button>

          </span>  

        </div>

タイマー関数


    /**
     * 飛行機マーカー描画タイマー関数
     * @param {type} interval タイマーインターバル (ms)
     * @returns {undefined}
     */
    const timerFunc = (interval) => {

      $("#timerint").removeClass("dsp_none")
      $("#timerint").show()
      $("#timerint").text("T:" + parseInt(interval / 1000))

      HistoryMap.histTimer = setInterval(() => {

        if (!isPaused) {

          const slidepos = eval(recpos) + eval(1)

          // スライダーを動かす //
          $("#histrange").val(recpos)
          $("#range_pos").text(`${slidepos}/${recs.length}`)

          console.log("TimerPos:" + recpos)
          const tmpdata = JSON.parse(recs[recpos]["TXT_JSON"])

          // 時計更新 //
          const currtmtxt = recs[recpos]["TM_ADD"].slice(5, 16).replace("-", "/") + "(JST)"
          const currtmtxtUTC = recs[recpos]["TM_ADD_UTC"].slice(5, 16).replace("-", "/") + "(UTC)"
          const postxt = `${eval(recpos) + eval(1)}/${recs.length}`
          console.log(currtmtxt)

          $("#historymap_time").text(currtmtxt + "  " + currtmtxtUTC + "  " + postxt)

          // 中心、ズーム //
          const clat = recs[recpos]["CLAT"]
          const clon = recs[recpos]["CLON"]
          const zoom = recs[recpos]["ZOOM"]
          //lmap.setView([clat, clon], zoom)
          lmap.flyTo([clat, clon], zoom)
          //lmap.panTo([clat, clon], zoom)


          // 飛行機マーカー描画 //
          const mmp = new MoveMarkerParent("", this.userId, false,
                  false, "", "")
          mmp.setTypeAndVoice("HISTORY", recs[recpos]["MP3_MSG"])
          const mkres = mmp.drawAircraftMarkers(lmap, tmpdata, false, false)
          console.log(mkres)

          recpos++;

          if (recpos === recs.length) {
           
            recpos = 0
          }

        }

      }, interval)

    }

初回読込


    let isPaused = false    // 停止用フラグ
    let recpos = 1          // 再生位置
 
    let intvl = Math.floor(this.firstInterval * 3 / 4 * 1000)

    // 初期インターバルボタン強調 //
    $("#histint_" + parseInt(intvl / 1000)).removeClass("btn-primary")
    $("#histint_" + parseInt(intvl / 1000)).addClass("btn-dark")

    // ライブ受信ランプ 受信コストを常に消す //
    $("#liveramp, #t2scost, #livecost").addClass("dsp_none")
    $("#liveramp, #t2scost, #livecost").hide()

    //alert(intvl)
    // 飛行機マーカー描画タイマー関数 //
    timerFunc(intvl)

停止、再開ボタンのリスナー


    // @@ 停止再開ボタンを押した時 @@ //
    $(".pauseresume").on("click", function (e) {

      const id = $(this).attr("id")
      isPaused = id === "histpause"
      $(this).addClass("dsp_none")
      $(this).hide()

      const opobtnid = isPaused ? "#histresume" : "#histpause"
      $(opobtnid).removeClass("dsp_none")
      $(opobtnid).show()

    })

スライダーでの位置変更


    $("#histrange").off("input")

    // @@ レンジスライダーの値が変わる時 @@ //
    // ユーザーが変えた場合発生、タイマーからは発生しない //
    $("#histrange").on("input", function (e) {

      const val = $(this).val()
      console.log("# input # slider pos is " + val)

      $("#range_pos").text(`${val}/${recs.length}`)

      isPaused = true

    })

再生インターバル変更ボタンのリスナー


    $(".intbtns").off("click")

    // @@ インターバル変更ボタンを押した時 @@ //
    $(".intbtns").on("click", function (e) {

      const val = $(this).text()
      //alert(val)

      $(".intbtns").removeClass("btn-dark")
      $(".intbtns").addClass("btn-primary")
      $(this).addClass("btn-dark")

      // タイマー再セットインターバル変更 //
      try {
        clearInterval(HistoryMap.histTimer)
      }
      catch (e) {
      }

      // 飛行機マーカー描画タイマー関数 //
      timerFunc(val * 1000)


    })

< 画面例 >
ボタンのテキストはインターバルの秒数です。
スライダーはHTMLの標準のを使ってスタイルはここを真似ました。