https://leafletjs.com/reference-1.6.0.html

台风风圈

<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css">

<div id="map" style="width: 100vw;height: 100vh"></div>

<script type="text/javascript" src="leaflet/leaflet.js"></script>

let map = L.map('map').setView([28, 121.7], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
.addTo(map);
L.marker([28, 121.7]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
  /**
   利奇马 2019年08月10日00时 中心位置: 121.7 E, 28 N 最大风力: 16级 最大风速: 52 m/s 中心气压: 935百帕 
   移动速度: 16公里/时 移动方向: 西北
   七级风圈半径: 280 - 380 km
   十级风圈半径 : 100 km
   十二级风圈半径: 40 km
    *
**/
  const TF = {
    time: "2019-08-10T00:00:00",
    longitude: 121.7,
    latitude: 28,
    strong: "超强台风(Super TY)",
    power: 16,
    speed: 52,
    move_dir: "西北",
    move_speed: 16,
    pressure: 935,
    radius7: 380,
    radius10: 100,
    radius12: 40,
    radius7_quad: {ne: 380, se: 380, sw: 350, nw: 280},
    radius10_quad: {ne: 100, se: 100, sw: 100, nw: 100},
    radius12_quad: {ne: 40, se: 40, sw: 40, nw: 40}
  }
    // 求出方位半径方向上弧形经纬度
   const getPoints = (center, cradius, startAngle) => {
      let radius = cradius / 100
      let pointNum = 90
      let endAngle = startAngle + 90
      let points = []
      let sin
      let cos
      let x
      let y
      let angle

      for (var i = 0; i <= pointNum; i++) {
        angle = startAngle + (endAngle - startAngle) * i
                / pointNum;
        sin = Math.sin(angle * Math.PI / 180);
        cos = Math.cos(angle * Math.PI / 180);
        x = center[0] + radius * sin;
        y = center[1] + radius * cos;
        points.push([x, y]);
      }
      return points
    }

let r7Ne = getPoints([TF.latitude, TF.longitude],  TF.radius7_quad.ne, 0)
let r7Nw = getPoints([TF.latitude, TF.longitude],  TF.radius7_quad.nw, 90)
let r7Sw = getPoints([TF.latitude, TF.longitude],  TF.radius7_quad.sw, 180)
let r7Se = getPoints([TF.latitude, TF.longitude],  TF.radius7_quad.se,  270)
let polygon7  = L.polygon([
          ...r7Ne, // 东北
          ...r7Nw, // 西北
          ...r7Sw, // 西南
          ...r7Se, // 东南
        ], {smoothFactor: .1, fillColor: 'rgb(0, 176, 15)', color: 'rgb(0, 176, 15)', weight: 1 }).addTo(map)
let r10Ne = getPoints([TF.latitude, TF.longitude],  TF.radius10_quad.ne, 0)
let r10Nw = getPoints([TF.latitude, TF.longitude],  TF.radius10_quad.nw, 90)
let r10Sw = getPoints([TF.latitude, TF.longitude],  TF.radius10_quad.sw, 180)
let r10Se = getPoints([TF.latitude, TF.longitude],  TF.radius10_quad.se,  270)
let polygon10  = L.polygon([
          ...r10Ne, // 东北
          ...r10Nw, // 西北
          ...r10Sw, // 西南
          ...r10Se, // 东南
        ], {smoothFactor: .1, fillColor: 'rgb(248, 213, 0)', color: 'rgb(248, 213, 0)', weight: 1 }).addTo(map)
let r12Ne = getPoints([TF.latitude, TF.longitude],  TF.radius12_quad.ne, 0)
let r12Nw = getPoints([TF.latitude, TF.longitude],  TF.radius12_quad.nw, 90)
let r12Sw = getPoints([TF.latitude, TF.longitude],  TF.radius12_quad.sw, 180)
let r12Se = getPoints([TF.latitude, TF.longitude],  TF.radius12_quad.se,  270)
let polygon12  = L.polygon([
          ...r12Ne, // 东北
          ...r12Nw, // 西北
          ...r12Sw, // 西南
          ...r12Se, // 东南
        ], {smoothFactor: .1, fillColor: 'rgb(255, 0, 0)', color: 'rgb(255, 0, 0)', weight: 1 }).addTo(map)

图

Image text