月: 2023年6月

Leaflet JavaScript マウスオーバーでポリラインを強調

投稿日: 投稿者:

鉄道路線図が入った地図で、ポリラインのセグメントにマウスが乗った時、その線を強調させてみました。

< コード例 >


    let thickLines

    // -- フィルターされたJSONのfeaturesを走査 -- //  
    const geojson = L.geoJson(json, {
      // 非強調、通常のスタイル //
      style: function (feature) {
        return {color: linecol, weight: 2.0}
      },
      onEachFeature: function (feature, layer) {

        const pp = feature.properties

        // @@ マウスが乗った時 @@ //
        layer.on('mouseover', function (e) {


          // 線を太くする //
          const tgtjson = new RailLines().getComlineJSON(json, pp.NM_COM, pp.NM_LINE)
          //console.log(tgtjson)

          thickLines = L.geoJson(tgtjson, {
            style: {color: linecol, weight: 7}
          }).addTo(lmap)

          const comline = pp.NM_COM + " " + pp.NM_LINE
          $("#raillinespn").text(comline /*+ " " + tgtjson["distKM"] + " Km"*/)


        })

        // @@ 乗ったマウスが外れた時 @@ //
        layer.on('mouseout', function (e) {
          //$("#raillinespn").text("")

          // 線を元に戻す //
          lmap.removeLayer(thickLines)

        })

      },
      pointToLayer: function (feature, latlng) {
      },
    })
    // マップに追加 //
    geojson.addTo(lmap);
    // 消去用配列に追加 //
    RailLines.lines.push(geojson)


  /**
   * 指定路線全線強調用GeoJSON取得
   * @param {type} json 全路線JSON
   * @param {type} com 会社名
   * @param {type} line 路線名
   * @returns {RailLines.getComlineJSON.raillinesAnonym$0} 連想配列
   */
  getComlineJSON(json, com, line) {

    const fts = json["features"]
    const tf = new MyTurf()

    let resfts = []
    let ttldst = 0

    fts.forEach((ft, i) => {
      const pp = ft.properties
      if (pp.NM_COM === com && pp.NM_LINE === line) {
        resfts.push(ft)


        const coords = ft.geometry.coordinates
        coords.forEach((cd, k) => {
          if (k > 0) {
            ttldst += tf.getDistanceM(cd, coords[k - 1])
          }
        })
        
      }
    })
    const distKM = Math.round(ttldst / 1000 * 100) / 100  // ???? 短い

    return {
      type: "FeatureCollection",
      features: resfts,
      distKM: distKM
    }

  }

< 画面例 >

Leaflet JavaScript マウスオーバーでマーカーを強調

投稿日: 投稿者:

< コード例 >

マウスオーバー用拡大アイコン


　// 通常サイズ用 //
  // 通常 //
        const icn = L.icon({
          iconUrl: "Img/aptower_50_" + iconcol + ".png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [sz, sz]
        });
　
 // マウスオーバー用 //
        const icnmon = L.icon({
          iconUrl: "Img/aptower_64_yellow.png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [38, 38]
        });

マウスが乗った時にマウスオーバー用拡大アイコンをセット
外れた時は元のサイズに戻す


// @@ マウスが乗った時 @@ //
        marker.on("mouseover", function (e) {
          // 大きい黄色のアイコンに変える //
          marker.setIcon(icnmon)
        })
        // @@ マウスが外れた時 @@ //
        marker.on("mouseout", function (e) {
          // からし色並サイズアイコンに戻す //
          marker.setIcon(icn)

        })

< 画面例 >

通常サイズ

拡大サイズ