برنامه نویسی

نقشه باران – جامعه dev

ek3nk4r 4 هفته پیش

0 1 خواندن این مطلب 1 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

نقشه های باران را با جزوه و Rainviewer درست کنید

شرح تصویر




  </span>Peta Hujan - RainViewer + Leaflet<span class="nt"/>
  <span class="nt"><meta/> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span>
  <span class="nt"><meta/> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span>
  <span class="nt"><link/> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"</span> <span class="nt">/></span>
  <span class="nt"/>
    <span class="nf">#map</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt"/>
<span class="nt"/>
<span class="nt"/>
  <span class="nt"><p> <span class="na">id=</span><span class="s">"map"</span><span class="nt">></span></p></span>

  <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"</span><span class="nt">></span>
  <span class="nt"><script/></span>
    <span class="c1">// Inisialisasi peta di koordinat Indonesia</span>
    <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="nx">L</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="dl">'</span><span class="s1">map</span><span class="dl">'</span><span class="p">).</span><span class="nf">setView</span><span class="p">([</span><span class="o">-</span><span class="mf">7.65</span><span class="p">,</span> <span class="mf">111.6</span><span class="p">],</span> <span class="mi">7</span><span class="p">);</span> <span class="c1">// Trenggalek</span>

    <span class="c1">// Tambahkan tile dasar (OpenStreetMap)</span>
    <span class="nx">L</span><span class="p">.</span><span class="nf">tileLayer</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span>
      <span class="na">attribution</span><span class="p">:</span> <span class="dl">'</span><span class="s1">© OpenStreetMap</span><span class="dl">'</span>
    <span class="p">}).</span><span class="nf">addTo</span><span class="p">(</span><span class="nx">map</span><span class="p">);</span>

    <span class="c1">// Ambil data radar terbaru dari RainViewer</span>
    <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.rainviewer.com/public/weather-maps.json</span><span class="dl">'</span><span class="p">)</span>
      <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">response</span> <span class="o">=></span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">())</span>
      <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=></span> <span class="p">{</span>
        <span class="c1">// Ambil path radar terbaru</span>
        <span class="kd">const</span> <span class="nx">radar</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">radar</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">latestFrame</span> <span class="o">=</span> <span class="nx">radar</span><span class="p">.</span><span class="nx">past</span><span class="p">[</span><span class="nx">radar</span><span class="p">.</span><span class="nx">past</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
        <span class="kd">const</span> <span class="nx">tileUrl</span> <span class="o">=</span> <span class="s2">`https://tilecache.rainviewer.com</span><span class="p">${</span><span class="nx">latestFrame</span><span class="p">.</span><span class="nx">path</span><span class="p">}</span><span class="s2">/256/{z}/{x}/{y}/2/1_1.png`</span><span class="p">;</span>

        <span class="c1">// Tambahkan layer radar ke peta</span>
        <span class="nx">L</span><span class="p">.</span><span class="nf">tileLayer</span><span class="p">(</span><span class="nx">tileUrl</span><span class="p">,</span> <span class="p">{</span>
          <span class="na">attribution</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Radar data © RainViewer</span><span class="dl">'</span><span class="p">,</span>
          <span class="na">opacity</span><span class="p">:</span> <span class="mf">0.6</span><span class="p">,</span>
          <span class="na">transparent</span><span class="p">:</span> <span class="kc">true</span>
        <span class="p">}).</span><span class="nf">addTo</span><span class="p">(</span><span class="nx">map</span><span class="p">);</span>
      <span class="p">})</span>
      <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=></span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="dl">'</span><span class="s1">Gagal memuat data radar:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
      <span class="p">});</span>
  <span class="nt"/>
<span class="nt"/>
<span class="nt"/>

</span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید