【百度地图】绘制扇形图层

最新推荐文章于 2024-08-13 09:26:03 发布

lorogy

最新推荐文章于 2024-08-13 09:26:03 发布

阅读量338

点赞数 1

分类专栏：前端可视化文章标签： javascript

本文链接：https://blog.csdn.net/lorogy/article/details/133309993

版权

前端可视化专栏收录该内容

8 篇文章 0 订阅

订阅专栏

思路：使用多边形图层PolygonLayer，借助函数将一个经纬度转换成扇形经纬度数组

扇形经纬度数组生成函数

/** 返回扇形经纬度数组 绘制多边形
 * lon 经度
 * lat 维度
 * radius 半径
 * azimuth 方向角
 * jiaodu（扇形的夹角）
 *
 * **/
export const drawPolygon = (lon, lat, radius, azimuth, jiaodu) => {
  let Ea = 6378137; // 赤道半径
  let Eb = 6356725; // 极半径
  let positionArr = [];
  positionArr.push([lon, lat]);
  // 需求正北是0° cesium正东是0°
  let s = jiaodu / 2;
  for (let i = 0 + azimuth - s; i <= jiaodu + azimuth - s; i = i + 5) {
    let dx = radius * Math.sin((i * Math.PI) / 180.0);
    let dy = radius * Math.cos((i * Math.PI) / 180.0);
    let ec = Eb + ((Ea - Eb) * (jiaodu - lat)) / jiaodu;
    let ed = ec * Math.cos((lat * Math.PI) / 180);
    let BJD = lon + ((dx / ed) * 180.0) / Math.PI;
    let BWD = lat + ((dy / ec) * 180.0) / Math.PI;
    positionArr.push([BJD, BWD]);
  }
  positionArr.push([lon, lat]);
  return positionArr;
};

百度地图绘制代码

this.map = initMap({...});
this.view = new mapvgl.View({
  map: this.map
});
this.polygonLayer = new mapvgl.PolygonLayer({...});
this.view.addLayer(this.polygonLayer);
this.polygonLayer.setOptions({...});
let data=res.map(item => {
 return {
    geometry: {
      type: "Polygon",
      coordinates: [
        drawPolygon(item.longitude, item.latitude, 150, 0, 45)
      ]
    },
    properties: {
      info: item
    }
  };
});
this.polygonLayer.setData(data);