jqGrid 行を挿入

[ コード例 ]

      
      // 列の値をセット //
      const loadaveval = info["LOADAVE"].split(",")[0];
      const msval = info["MYSQLRSSTOTAL"].toString().replace(",", "");
      const javaval = info["JAVARSSTOTAL"].toString().replace(",", "");
      const httpdval = info["HTTPDRSSTOTAL"].toString().replace(",", "");
      
      // ID //
      const gid = "OSINFOWS_" + cntWSMessage;
      // 行 //
      const insdata = {id: gid, free: info["FREE"], loadave: loadaveval,
        javarsstotal: javaval, 
        tomcat_sscnt: info["TOMCAT_SSCNT"], 
        mysqlrsstotal: msval,
        httpdrsstotal:httpdval, httpdpscount: info["HTTPDPSCOUNT"],
        disk_used: info["DISK_USED"], 
        tm_add: info["DATENOW_FORMAT"]
      };
      
      // 最初の行に挿入 // 
      $("#osinfo").jqGrid("addRowData", undefined, insdata, "first");

Leaflet Javascript のベースレイヤーでMapboxのレイヤーを使う

[ コード例 ]

レイヤー定義クラス



/**
 * Leaflet地図レイヤークラス
 * @type type
 */
class MapLayers {

  constructor() {
  }

  /**
   * 明暗種別取得
   * @param {type} label
   * @returns 
   */
  getLDType(label) {

    const mpl = new MapLayers();
    const ary = mpl.getLeafletBaseMapLayerArray();
    for (let j = 0; j < ary.length; j++) {
      if (label === ary[j]["label"]) {
        return ary[j]["ldtp"];
      }
    }

  }

  /**
   * ベースレイヤー
   * @returns {Array}
   */
  getLeafletBaseMapLayerArray() {
    const LEAFLET_LAYERS = [
      {
        label: '国土地理院標準',
        url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        attr: {attribution: "地理院標準"},
        ldtp: "L"
      },
      {
        label: '国土地理院淡色',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        attr: {attribution: "地理院淡色"},
        ldtp: "L"
      },
      {
        label: 'オープンストリートマップ',
        url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
        attr: {attribution: "OpenStreetMap contributors"},
        ldtp: "L"
      },
      {
        label: 'グーグル衛星',
        url: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
        attr: {
          maxZoom: 20,
          subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        },
        ldtp: "D"
      },

      // 2021-04-11 //
      {
        label: 'USGS 衛星 Topo',
        url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles courtesy of the U.S. Geological Survey"},
        ldtp: "D"
      },

      {
        label: 'Esri 衛星',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"},
        ldtp: "D"
      },

      {
        label: 'Stadia Maps Dark',
        url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
        attr: {
          attribution: "Stadia Maps"},
        ldtp: "D"
      },
      // 2021-04-11 終わり //

      // 2021-04-12 //
      {
        label: 'CartoDB DarkMatter',
        url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
        attr: {
          attribution:
                  '© OpenStreetMap contributors © CARTO'
        },
        ldtp: "D"
      },

      {
        label: '白地図',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
        attr: {id: 'blankmap', attribution: "地理院白地図"},
        ldtp: "L"
      },
      {
        label: 'Stamen Toner-Background',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-background'
        },
        ldtp: "D"
      },

      {
        label: 'Stamen Toner-Lite',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-lite'
        },
        ldtp: "L"
      },
      {
        label: 'Stamen Watercolor',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'watercolor'
        },
        ldtp: "L"
      },
      {
        label: 'Esri World Topo Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: 'Tiles ©  Esri Japan '
        },
        ldtp: "L"
      },
      {
        label: 'Esri Ocean Base Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
        attr: {
          maxZoom: 13,
          attribution: 'Tiles by  Esri Japan '
        },
        ldtp: "L"
      },
      
      // From mapbox //
      {
        label: 'Mapbox dark',
        url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite streets',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox night traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-night-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox day traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox outdoor',
        url: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox light',
        url: 'https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      /* {
        label: 'Mapbox decimal',
        url: 'https://api.mapbox.com/styles/hisashitanaka/ckj2fjsoj0alp19pqqtcvfk0i/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },*/
      
    ];
    return LEAFLET_LAYERS;
  }
  
  // mapboxgl.accessToken = "pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ";
  
  /**
   * OpenWeatherMap気象レイヤー Ver 1
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArray() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'http://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'http://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Temperture",
        url: 'http://{s}.tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];
    return WEATHER_LAYERS;

  }
  
  /**
   * OpenWeatherMap気象レイヤー Ver 2
   * Freeライセンスでは利用不可
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArrayV2() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'https://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'https://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Wind with direction",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/WND/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速風向',
          opacity: 0.9
        }
      },
      
      {
        label: "Temparture",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];


    return WEATHER_LAYERS;

  }

}

地図描画クラス

    // -- ベースレイヤー設定 -- //
    // -C
    const layersclass = new MapLayers();
    let leyers = layersclass.getLeafletBaseMapLayerArray();
    //alert(leyers.length);

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

      //console.log("curkey:" + curkey);
      //console.log("LDTP:" + itm["ldtp"]);
    });

    // -- OpenWeatherMap設定 -- //
    // -C
    leyers = layersclass.getLeafletWeatherMapLayerArray();
    let weatherMaps = [];

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


    // 天気選択を加えたレイヤーコントロール //
    L.control.layers(baseMaps, weatherMaps, /*{collapsed: false}*/).addTo(lmap);
    // ベースマップを乗せる //
    let baseadd = baseMaps[layerkey].addTo(lmap);

[ 画面例 ]

Mapbox Night Traffic

Leaflet Javascript に OpenWeatherMap の天気レイヤーを重ねる

ここで教えていただきました。
https://blog.kazu634.com/labs/leaflet-js-mapbox-js/001-leaflet-js-tutorial/

[ コード例 ]


   
/**
 * Leaflet地図レイヤークラス
 * @type type
 */
class MapLayers {

  constructor() {
  }

  /**
   * 明暗種別取得
   * @param {type} label
   * @returns 
   */
  getLDType(label) {

    const mpl = new MapLayers();
    const ary = mpl.getLeafletBaseMapLayerArray();
    for (let j = 0; j < ary.length; j++) {
      if (label === ary[j]["label"]) {
        return ary[j]["ldtp"];
      }
    }

  }

  /**
   * ベースレイヤー
   * @returns {Array}
   */
  getLeafletBaseMapLayerArray() {
    const LEAFLET_LAYERS = [
      {
        label: '国土地理院標準',
        url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        attr: {attribution: "地理院標準"},
        ldtp: "L"
      },
      {
        label: '国土地理院淡色',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        attr: {attribution: "地理院淡色"},
        ldtp: "L"
      },
      {
        label: 'オープンストリートマップ',
        url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
        attr: {attribution: "OpenStreetMap contributors"},
        ldtp: "L"
      },
      {
        label: 'グーグル衛星',
        url: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
        attr: {
          maxZoom: 20,
          subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        },
        ldtp: "D"
      },

      // 2021-04-11 //
      {
        label: 'USGS 衛星 Topo',
        url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles courtesy of the U.S. Geological Survey"},
        ldtp: "D"
      },

      {
        label: 'Esri 衛星',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"},
        ldtp: "D"
      },

      {
        label: 'Stadia Maps Dark',
        url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
        attr: {
          attribution: "Stadia Maps"},
        ldtp: "D"
      },
      // 2021-04-11 終わり //

      // 2021-04-12 //
      {
        label: 'CartoDB DarkMatter',
        url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
        attr: {
          attribution:
                  '© OpenStreetMap contributors © CARTO'
        },
        ldtp: "D"
      },

      {
        label: '白地図',
        url: 'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
        attr: {id: 'blankmap', attribution: "地理院白地図"},
        ldtp: "L"
      },
      {
        label: 'Stamen Toner-Background',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-background'
        },
        ldtp: "D"
      },

      {
        label: 'Stamen Toner-Lite',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'toner-lite'
        },
        ldtp: "L"
      },
      {
        label: 'Stamen Watercolor',
        url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
        attr: {
          attribution: 'Map tiles by Stamen Design, ',
          variant: 'watercolor'
        },
        ldtp: "L"
      },
      {
        label: 'Esri World Topo Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        attr: {
          attribution: 'Tiles ©  Esri Japan '
        },
        ldtp: "L"
      },
      {
        label: 'Esri Ocean Base Map',
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
        attr: {
          maxZoom: 13,
          attribution: 'Tiles by  Esri Japan '
        },
        ldtp: "L"
      },
      
      // From mapbox //
      {
        label: 'Mapbox dark',
        url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox satellite streets',
        url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox night traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-night-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },
      {
        label: 'Mapbox day traffic',
        url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox outdoor',
        url: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      {
        label: 'Mapbox light',
        url: 'https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "L"
      },
      
      /* {
        label: 'Mapbox decimal',
        url: 'https://api.mapbox.com/styles/hisashitanaka/ckj2fjsoj0alp19pqqtcvfk0i/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
        attr: {
          maxZoom: 13,
          attribution: 'mapbox'
        },
        ldtp: "D"
      },*/
      
    ];
    return LEAFLET_LAYERS;
  }
  
  // mapboxgl.accessToken = "pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ";
  
  /**
   * OpenWeatherMap気象レイヤー Ver 1
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArray() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'http://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'http://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Temperture",
        url: 'http://{s}.tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];
    return WEATHER_LAYERS;

  }
  
  /**
   * OpenWeatherMap気象レイヤー Ver 2
   * Freeライセンスでは利用不可
   * @returns {Array}
   */
  getLeafletWeatherMapLayerArrayV2() {

    const WEATHER_LAYERS = [
      {
        label: "Precipitation",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '降水',
          opacity: 0.9
        }
      },

      {
        label: "Clouds",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
        attr: {attribution: '',
          opacity: 0.9
        }
      },

      {
        label: "Pressure",
        url: 'https://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気圧',
          opacity: 0.9
        }
      },

      {
        label: "Wind",
        url: 'https://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速',
          opacity: 0.9
        }
      },
      
      {
        label: "Wind with direction",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/WND/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '風速風向',
          opacity: 0.9
        }
      },
      
      {
        label: "Temparture",
        url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
        attr: {
          attribution: '気温',
          opacity: 0.9
        }
      }
    ];


    return WEATHER_LAYERS;

  }

}

// ****** 描画用メソッド ****** //

    // -- ベースレイヤー設定 -- //
    // -C
    const layersclass = new MapLayers();
    let leyers = layersclass.getLeafletBaseMapLayerArray();
    //alert(leyers.length);

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

      //console.log("curkey:" + curkey);
      //console.log("LDTP:" + itm["ldtp"]);
    });

    // -- OpenWeatherMap設定 -- //
    // -C
    leyers = layersclass.getLeafletWeatherMapLayerArray();
    let weatherMaps = [];

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


    // 天気選択を加えたレイヤーコントロール //
    L.control.layers(baseMaps, weatherMaps, /*{collapsed: false}*/).addTo(lmap);
    // ベースマップを乗せる //
    let baseadd = baseMaps[layerkey].addTo(lmap);

 

[ 画面例 ]

turf.js で Bスプライン曲線

飛行機の航跡データをturf.jsでBスプライン曲線に変換して地図で描画してみました。

調べたところ、Bスプライン曲線は渡した実際の座標からはずれた座標にも線を引くので、業務用としては不向きかと思いますが、今回実装してみたアプリについては業務用途では使われないので、気にしなくてよいかと思います。

APIドキュメント

[ コード例 ]

ラッパークラスを使ってます。

GoogleMap 呼び出し側


const geojsonfnm = "geojson/SimpleLine.json";

$.getJSON(geojsonfnm, function (data) {

      const geomes = data["geometry"]["coordinates"];
      
      let applyData = data;

      // -- スプライン指定している場合、turf.jsでスプライン変換 -- //
      if (isSpline) {
        //console.log("--- Splined");
        // -C 自作ラッパークラス //
        const myturf = new MyTurf({resolution: 20000, sharpness: 2});
        applyData = myturf.getSplinedGeometries(geomes);
      }
      
      // GeoJSON を描画 //
      let lines = gmapS.data.addGeoJson(applyData);
});

ラッパークラス

/**
 * turf.js用ラッパークラス
 * @type type
 */
class MyTurf {

  /**
   * コンストラクタ
   * @param {type} optionmap オプション値
   * @returns {MyTurf}
   */
  constructor(optionmap) {
    this.optionmap = optionmap;
  }

  /**
   * Bスプライン曲線
   * @param {type} line Feature  [[lat,lon], [lat,lon], [lat,lon]]
   * @returns {undefined} Feature  - curved line
   */
  getSplinedGeometries(geomes) {
    let line = turf.lineString(geomes);
    return turf.bezierSpline(line, this.optionmap);
  }
  
  /**
   * 中心点取得
   * @param {type} geomes
   * @returns {unresolved}
   */
  getCenter (geomes) {
    let features = turf.points(geomes);
    return turf.center(features);
  }

  /**
   * 2点位置指定方向取得
   * @param {type} p1
   * @param {type} p2
   * @returns {unresolved}
   */
  getBeaing(p1, p2) {
    return turf.bearing(p1, p2);
  }
  
   /**
   * 方向角配列
   * @returns {Array|drawMapLAFlightSP.splinedBearingArray.barray}
   */
  getSplinedBearingArray(coordinates) {


    let barray = [];
    let prevll;
    let tmpbearing;

    const myturf = new MyTurf();
    const pushToArray = (ll, idx) => {

      if (idx > 0) {

        prevll = coordinates[idx - 1];
        // turf.jsで方向角を求める //
        tmpbearing = myturf.getBeaing(prevll, ll);
        // 時計式角度を航空式角度に変換 //
        tmpbearing = tmpbearing < 0 ? Number(tmpbearing) + Number(360) : tmpbearing; // アイコン用整数に四捨五入 // tmpbearing = Math.round(tmpbearing); barray.push(tmpbearing); } }; coordinates.forEach((ll, idx) => pushToArray(ll, idx));

    //console.log("--- barray");
    //console.log(barray);
    return barray;

  }

}

[ 利用例 ]

実はあまり変わり映えないばかりか、小半径な旋回が見受けられます。
アクチャル座標データが少ない曲線表現では有効かも知れませんが、多い場合、逆効果です。

スプライン未適用

スプライン適用

jQuery JSONファイルの同期読込

jQueryであるJSONファイルを同期で読み込む必要がある場合に使ってます。
$.ajaxSetup, asyncのセットで出来ます。

[ コード例 ]


      $.ajaxSetup({async: false});     // 同期
      $.getJSON(geojsonfnmChart, function (data) {
        chartdata = data;
      });
      $.ajaxSetup({async: true});      // 同期解除

 

ここで教えていただきました。
https://jslob.repop.jp/2017/06/getjsonjson.html

Javascript forEach の活用

ECMA2015以降、forEachで配列の一括処理が出来て、コードがわかりやすくなるので使ってます。

[ コード例 ]


    const myturf = new MyTurf();
    const pushToArray = (ll, idx) => {

      if (idx > 0) {

        prevll = coordinates[idx - 1];
        // turf.jsで方向角を求める //
        tmpbearing = myturf.getBeaing(prevll, ll);
        // 時計式角度を航空式角度に変換 //
        tmpbearing = tmpbearing < 0 ? Number(tmpbearing) + Number(360) : tmpbearing;
        // アイコン用整数に四捨五入 //
        tmpbearing = Math.round(tmpbearing);

        barray.push(tmpbearing);
      }
    };
    
    // 位置配列を走査して方向角配列に追加して行く //
    coordinates.forEach((ll, idx) => pushToArray(ll, idx));

DOM操作を伴う場合、jQueryの$.eachの方がすっきり書けるので、jQueryを使ってます。
jQueryの場合、コールバックに渡す引数の要素番号が 先になり、forEachと逆です。

[ jQuery $.each 例 ]


$.each($("#" + itm["id"]).children("td"), function (j, itmc) {
  $(this).addClass("td_lsilver");
});

GoogleMap Javascript で ポリラインGeoJSON読込

GoogleMap JavascriptでGeoJSONファイルを読み込み、ポリラインを引いてみました。
線のスタイルが同じで、Futureがひとつの場合、かなり短く書けます。

[ コード例 ]


const geojsonfnm = "geojson/SimpleLine.json";

$.getJSON(geojsonfnm, function (data) {

      const geomes = data["geometry"]["coordinates"];


      // GeoJSON を描画 //
      let lines = gmapS.data.addGeoJson(data);
      linesThisG = lines;

      // 線の設定 //
      gmapS.data.setStyle({
        strokeColor: "#FFFF00", // 黄色
        strokeWeight: 2,
        geodesic: true         // 球面線
      });

});

[ geojson/SimpleLine.json の内容]

{
  geometry:{
    coordinates:[...]   <== ここに経緯度データが入ってる
    type:LineString
  }
  type:Feature
}

注意点として、Leafletでは type:Featureを省略しても使えましたが、GoogleMapの場合、厳密に評価するようで、Feature, Featuresがないとエラーになります。

[ Leafletで使えたGeoJSON ]

{
  crs:{...}
  coordinates:[...]
  type:LineString
}

Leaflet Javascript マーカーツールチップのカスタマイズ

Leaflet Javascript マーカーツールチップのカスタマイズについて備忘録しておきます。

1) スタイルの設定
2) ツールチップにスタイルとコンテンツをセット
3) マーカーにバインド

[ コード例 ]

// ツールチップスタイルのセット //
const tooltipStyleWP = {direction: 
            "right",
            offset: L.point(-30, 24), // x, y <= のオフセット位置
            opacity: 0.8,
            permanent: isPermanetTooltip || isPermanentTarget ? true : false,
            className: "waypointTTClass" + CLASS_TAIL

          };

// ツールチップ、スタイルとコンテントのセット //
const ttp = L.tooltip(tooltipStyleWP).setContent(feature.properties.ident);

// マーカーアイコンのセット //
icn = L.icon({
            iconUrl: feature.properties.icon,
            iconSize: [12, 12]
          });

// マーカーにバインド //
L.marker(latlng, {icon: icn}).bindTooltip(ttp);

 

[ className CSS例 ]


      /* 飛行機マーカーツールチップ */
      /* 暗色 */
      .aircraftTTClass {
        background: transparent;
        border: 1px solid #FFFFFF;
        font-size: 13px;
        color: #FFFFFF;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .aircraftTTClassL {
        background: #f2f2f2;
        border: 1px solid navy;
        font-size: 13px;
        color: #222222;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClassL::before {
        border-right-color: transparent;
      }

      /* Waypointマーカーツールチップ */
      /* 暗色 */
      .waypointTTClass {
        background: transparent;
        border: 1px solid #FFFF00;
        font-size: 11px;
        color: #FFFF00;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .waypointTTClassL {
        background: transparent;
        border: 1px solid navy;
        font-size: 11px;
        color: #868600;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClassL::before {
        border-right-color: transparent;
      }  

[ 画面例 ]

GoogleMap Javascript でAntimeridianライン (太平洋上日付変更線越え線の適正化)

Leafletで国際線飛行機の航跡ラインを描画したところ、日付変更線を通過するラインがおかしいままなので(プラグインをラップして使うと正しくなるようですが、まだ調べ切れてないので)、利用頻度少なく、課金もさほどないと思い、GoogleMapを使ってみました。

[ 描画例 ]

GoogleMap

Leaflet