Sigfox Global Coverage를 웹 사이트에 표시

17473 단어 SigFox자바스크립트leaflet맵
Sigfox API V2에서 새로운 Global Coverage 레이어를 얻을 수 있습니다. Sigfox 사의 문서는 여기
여기에서는 Leaflet JavaScript 라이브러리를 사용하여 OpenStreetMap 위에 Sigfox Global Coverage 레이어를 추가하는 예를 소개합니다.

페이지 준비



먼저 Sigfox Global Coverage를 받기 전에 표시할 페이지에 Leaflet을 준비해야 합니다.
  • 문서의 head 섹션에 Leaflet용 CSS를 기재합니다.

    • sample.html
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>
  • Leaflet CSS 다음에 Leaflet용 Japascript를 기재합니다.

    • sample.html
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
     crossorigin=""></script>
  • 맵을 표시하고 싶은 곳에 아래와 같이 맵용의 ID와 함께 div 엘리먼트를 추기합니다.

    • sample.html
    <div id="mapid"></div>
  • 표시하는 맵 사이즈를 정의하기 위해서 CSS상 내지는, 아래와 같이 style에 기재합니다.

    • sample.css
    <style> #mapid { height: 500px; } </style>

    이것으로 Leaflet의 준비가 완료되었습니다. 그런 다음 OpenStreetMap과 Sigfox Global Coverage를 맵에 레이어 추가합니다.

    OpenStreetMap 보기



    OpenStreetMap을 표시하지만 나중에 레이어 컨트롤을 할 수 있도록 약간 중복 코드로 두십시오.

    openstreetmap.js
    <script>
  //OpenStreetMapのレイヤを生成
  var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
  {
    maxZoom: 11,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
  });

  //マップを新規生成
  var map = L.map('mapid', {
    layers: [osm]
  });

  var baseMaps = {
    "OpenStreetMap" : osm
  };

  //マップにOpenStreetMapレイヤを追加
  L.control.layers(baseMaps).addTo(map);

  //マップの中心とZoomを設定
  map.setView([35.641604,139.741086], 8);
</script>

    이제 배경 맵인 OpenStreetMap을 볼 수 있습니다.

    Sigfox Global Coverage 추가



    Sigfox Global Coverage를 표시하려면 다음 두 단계가 필요합니다.
  • Coverage 레이어를 얻기위한 Token 얻기
  • Coverage 레이어를 구성하는 Tile 얻기

    • Coverage 레이어를 얻기 위한 Token 얻기



    아래 API [GET]에 의해 Token을 취득 가능합니다.
    htps : // 바 c 켄 d.しgふぉx. 코 m / 아피 / v2 / 치 s / 뿌 b ぃ c - 코 ょ 라게

    하지만 이 API를 사용하려면 Sigfox 클라우드에서 만든 API 자격 증명이 필요합니다. API의 이용 방법에 대해서는 여기를 참조해 주세요.

    이 API의 응답으로 다음 JSON을 얻을 수 있습니다.

    public-coverage.json
    {
  "baseImgUrl": "https://tiles.sigfox.com/{TOKEN}",
  "tmsTemplateUrl": "https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png",
  "bounds": {
    "sw": {
      "lat": -80,
      "lng": -180
    },
    "ne": {
      "lat": 80,
      "lng": 180
    }
  }
}

    여기서 {TOKEN} 부분이 Coverage 레이어를 취득하기 위한 Token이 됩니다만, 이 Token의 유효기간은 72시간이므로, 계속적으로 맵 표시되고 싶은 경우는, 자동적으로 Token를 갱신한다 메커니즘을 넣어야합니다.
    여기서 만료일은 무시합니다.

    또, 이 후, Leaflet을 사용해 레이어를 추가할 때에는, tmsTemplateUrl를 오버레이 맵으로서 추가하게 됩니다.

    Sigfox Global Coverage 레이어 추가



    이전에 OpenStreetMap을 표시하는 스크립트에 아래와 같이 정의하는 Sigfox Global Coverage 레이어를 추가합니다.

    sigfox.js
      var sigfox = L.tileLayer('https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png',
  {
    zoomOffset: 0,
    maxZoom: 11,
    maxNativeZoom: 11,
    zIndex: 500,
    opacity: 0.7,
    attribution: ' <a href="https://sigfox.com">sigfox</a>',
    id: 'sigfox.coverage'
  });

    그런 다음 레이어 작업 부분의 스크립트를 변경하면 OpenStreetMap과 Sigfox Global Coverage를 매핑 할 수 있습니다.


    마지막으로 샘플 소스



    여기에서 사용한 샘플을 아래에 적는다. 코드가 길어지고 있기 때문에, 읽어 날아 주셔서 상당합니다.

    sample.html
    <!doctype html >
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
     integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
     crossorigin=""></script>
     <title>Sigfox Coverage</title>
     <style>
      #mapid {
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="mapid"></div>
    <script>
      var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
      {
        maxZoom: 11,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
      });
      var sigfox = L.tileLayer('https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png',
      {
        zoomOffset: 0,
        maxZoom: 11,
        maxNativeZoom: 11,
        zIndex: 500,
        opacity: 0.7,
        attribution: ' <a href="https://sigfox.com">sigfox</a>',
        id: 'sigfox.coverage'
      });
      var map = L.map('mapid', {
        layers: [osm, sigfox]
      });
      var baseMaps = {
        "OpenStreetMap" : osm
      };
      var overlayMaps = {
        "Sigfox" : sigfox
      };
      L.control.layers(baseMaps, overlayMaps).addTo(map);
      map.setView([35.641,139.741], 8);
    </script>
  </body>
</html>

    Sigfox Japan KCCS
    folium에서 표시 시점에서 정보를 popup하는 설정에 고생한 이야기(Google Colab)
    Leaflet에서 만델브로 모음 보기 (1)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage