天地图之动态圆(真实距离)的实现

忙了好久终于有点空闲时间了，来说说最近遇到的比较特别的需求

场景：给定一个经纬度，以及一个10km到100km的滑块。要求根据以滑块的动态数值为半径在地图上画一个以给定经纬度为中心的圆。

话不多说，上代码

// record:Object 包含了经纬度
// map:地图对象
// kilo:距离(滑块的动态数值:1,2,3,10,20,40......)单位km
export function buildRadar(record, map, kilo?: number) {
  const definedOverlay = T.Overlay.extend({
    initialize: function (lnglat, options) {
      this.onRemove()
      this.lnglat = lnglat
      this.setOptions(options)
    },
    onAdd: function (map) {
      this.map = map
      const dom1 = createCircle()

      this.map.getPanes().overlayPane.appendChild(dom1)
      this._div = dom1
      this.update(this.lnglat)
    },
    onRemove: function () {
      const parent = this._div?.parentNode
      if (parent) {
        parent.removeChild(this._div)
        this._div = null
      }
    },
    onHide: function () {
      // if (this._div) this._div.style.display = 'none'
    },
    onShow: function () {
      // if (this._div) this._div.style.display = 'block'
    },
    setLnglat: function (lnglat) {
      this.lnglat = lnglat
      this.update()
    },
    getLnglat: function () {
      return this.lnglat
    },
    setPos: function (pos) {
      this.lnglat = this.map.layerPointToLngLat(pos)
      this.update()
    },
    /**
     * 更新位置
     */
    update: function () {
      this._div.style.display = 'none'
      const defaultKilo = (kilo || 30) * 1000 //默认值为30,km转化为m
      const longitude = record.longitude
      const latitude = record.latitude
      const arc = 6377.83 * 1000
      const long2 =
        longitude + (defaultKilo * Math.sin(180)) / ((arc * Math.cos(latitude) * 2 * Math.PI) / 360)
      const lati2 = latitude + (defaultKilo * Math.cos(180)) / ((arc * 2 * Math.PI) / 360)
      const point1 = map.lngLatToContainerPoint(new T.LngLat(longitude, latitude))
      const point2 = map.lngLatToContainerPoint(new T.LngLat(long2, lati2))
      const diameter =
        Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)) * 2
      const pos = this.map.lngLatToLayerPoint(this.lnglat)
      const result = diameter
      this._div.style.top = pos.y - result / 2 + 'px'
      this._div.style.left = pos.x - result / 2 + 'px'
      this._div.style.width = result + 'px'
      this._div.style.height = result + 'px'
      this._div.style.display = 'block'
    },
  })
  const point = new T.LngLat(record.longitude, record.latitude)
  if (kilo && circles) {
    map.removeOverLay(circles)
    circles = new definedOverlay(point, {})
    map.addOverLay(circles)
  } else {
    circles = new definedOverlay(point, {})
    map.addOverLay(circles)
  }
}

主要实现方式是根据一个经纬度来计算Nkm内的另一个经纬度，从而画一个圆。根据不同距离实现圆的扩大和缩小