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

思路:使用多边形图层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);

效果

在这里插入图片描述

OpenLayers是一个开源的JavaScript库,用于在Web上创建交互式地图应用程序。它提供了丰富的地图功能和工具,包括地图显示、地图控制、图层管理、地图交互等。 关于OpenLayers中的扇形,OpenLayers本身并没有直接提供扇形绘制功能,但可以通过使用OpenLayers的绘制工具和几何图形类来实现绘制扇形的效果。 一种常见的方法是使用OpenLayers的绘制工具绘制一个圆形,然后根据需要设置圆形的起始角度和结束角度,从而实现扇形的效果。可以通过设置圆形的样式、填充颜色和透明度等属性来自定义扇形的外观。 以下是一个使用OpenLayers绘制扇形的示例代码: ```javascript // 创建地图容器 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); // 创建绘制交互工具 var draw = new ol.interaction.Draw({ source: new ol.source.Vector(), type: 'Circle' }); // 监听绘制结束 draw.on('drawend', function(event) { var circle = event.feature.getGeometry(); // 设置起始角度和结束角度(单位:弧度) var startAngle = 0 // 起始角度 var endAngle = Math.PI / 2; // 结束角度 // 创建扇形的几何图形 var sector = new ol.geom.Polygon([circle.getCoordinates()]); sector.appendLinearRing(circle.getLinearRing(0).clone()); // 设置扇形的起始角度和结束角度 sector.appendLinearRing(circle.getArc(startAngle, endAngle)); // 创建扇形的矢量要素 var sectorFeature = new ol.Feature(sector); // 设置扇形的样式 sectorFeature.setStyle(new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.5)' // 填充颜色和透明度 }), stroke: new ol.style.Stroke({ color: 'red', // 边框颜色 width: 2 // 边框宽度 }) })); // 将扇形添加到地图中显示 map.getLayers().item(0).getSource().addFeature(sectorFeature); }); // 添加绘制交互工具到地图中 map.addInteraction(draw); ``` 这段代码创建了一个基本的OpenLayers地图,并使用绘制交互工具绘制一个圆形。然后根据设置的起始角度和结束角度,通过创建扇形的几何图形和矢量要素,最后将扇形添加到地图中显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值