月: 2023年7月

Leaflet Javascript AlmostOver でポリラインのイベント

投稿日: 投稿者:

Leaflet Javascriptで、GeoJSONから読み込んだポリラインに対してイベントをつける必要があり、
mouseover, mouseoutのイベントが発火しにくいので、調べてましたところ AlmostOver のプラグインで解決しました。

< コード例 >

HTML


<!-- Leaflet almostover -->
<script type="text/javascript" src="Script/js/leaflet.almostover.js"></script>

Javascript


        // almost over //
        lmap.almostOver.addLayer(DrawLine.amlinejson);

        // @@ 線をクリックした時 @@ //
        lmap.on('almost:click', function (e) {
         
         if (DrawLine.thickLines) {
         lmap.removeLayer(DrawLine.thickLines)
         }
         // if (RailLines.stationsjson) {
         //   lmap.removeLayer(RailLines.stationsjson)
         // }
         
         
         //console.log("--- e.target")
         //console.log(e.target)
         
         const layer = e.layer
         const pp = layer.feature.properties
         
         // 線を太くする //
         const tgtjson = new getComlineJSON(datas, pp.NAME)
         //console.log(tgtjson)
         
         DrawLine.thickLines = L.geoJson(tgtjson, {
         
         // スタイル //
         style: {color: "#00FFFF", weight: 7}
         
         }).addTo(lmap)
         
         //const comline = pp.NM_COM + " " + pp.NM_LINE
         //$("#raillinespn").text(comline)
         
         // リクエスト引数リスト名 //
         //const listnm = "国交 " + pp.NM_COM + " " + pp.NM_LINE
         //alert(listnm)
         
         // 駅簡略化マーカー描画 //
         //const rl = new RailLines()
         //rl.getStationsMarker(listnm)
         
         });

< 画面例 >

マウスが乗った線を太くする

国土交通省 国土数値情報

投稿日: 投稿者:

飛行機のライブ地図で空港の境界線もわかれば面白いので、探してましたところ、国土交通省・国土数値情報・空港データでできることがわかり使ってみました。

https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-C28-v2_4.html

< コード例 >

直接GeoJSONを読み込むわけではなく、データベースに問い合わせて対象リストのGeoJSONを生成するAPIを使ってますので、長くなるので省略

< 画面例 >

Leaflet JavaScript OpenRailwayMap

投稿日: 投稿者:

Leafletの地図に鉄道線路、駅を表示する必要があり、探しましたところベースレイヤーでOpenRailwayMapというのが見つかり使ってみました。

 

< コード例 >

レイヤー選択にOpenRailwayMapを加える


{
        label: '鉄道路線図',
        url: 'http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',
        attr: {
          minZoom: 2,
          maxZoom: 19,
          tileSize: 256,
          attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>, Style: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> and OpenStreetMap'
        },
        ldtp: "L"
      },

OpenStreetMapを重ねる必要があります。


   let baseMaps = {};
    let curkey = "";
    let objlayer;
    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      baseMaps[curkey] = objlayer;
    });

    // layersコントロールにbaseMapsオブジェクトを設定して地図に追加
    // コントロール内にプロパティ名が表示される

    L.control.layers(baseMaps).addTo(lmap);
   
    let tgtbase = baseMaps[layerkey];
    tgtbase.addTo(lmap);

    //baseMaps["OpenRailwayMap"].addTo(lmap)

    // 鉄道地図の場合、OpenStreetmapも重ねる必要あるので //
    if (layerkey.includes("OpenRailwayMap")) {
      const addmap = layerkey.includes("satellite") ? "Google satellite" : "Open street map"
      const osbase = baseMaps[addmap]
      try {
        osbase.addTo(lmap);
      }
      catch (e) {
      }

    }
    else {
      $("#legend").hide()
    }

< 画面例 >