カテゴリー: API

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

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

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

HTMLで地図を配置したdiv内に画像用divを配置して、CSSで画像用divの位置をセットします。

< コード例 >
HTML
#livemap_photoのsrcはJavascriptでダイナミカリーにセットしています。

<!-- Leaflet伸縮地図 -->
<div id="livemap-container" class="z-depth-1-half map-container p-0">
<!-- 省略 -->
<!-- Planespotter 機材写真 -->
    <figure>
        <div id="livemap_photo_div" class="dsp_none">
            <a id="livemap_photo_a" href="" target="_blank">
                <img id="livemap_photo" src="" width="240" class="border border-primary rounded fade-in"></img>
            </a>
            <figcaption id="livemap_photo_figcap" class="flagcap_dark">..</figcaption>

        </div>
    </figure>
</div>

CSS

positionを absoluteにする
bootom, top, left. right で地図内でのパッディングをセットする
z-indexを地図より大きくする

/* ライブ地図機材写真 */
#livemap_photo_div {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 99999;
    color: white;
    font-size: 14px;
    opacity: 0.8
}

< 画面例 >