openlayers4 入门开发系列之小区信号扇形图篇

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

本篇的重点内容是利用 openlayers4 实现小区信号覆盖的扇形图功能，效果图如下：

点击扇形查询信息效果：

实现思路

• 界面设计

//信号扇形
"<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" +
"<span style='margin-left:5px;font-size: 13px;color:white;'>信号扇形</span>" +
"</div>" +
'<div id="basestationsLayer" style="padding:5px;float: left;">' +
'<input type="checkbox" name="basestationslayer" id="basestationslayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">信号扇形</label>' +
'</div>'

• 点击事件

//信号扇形
$("#basestationsLayer input").bind("click", function () {
if (this.checked) {
var map = bmap.getMap();
map.getView().setCenter([13375119.498201383, 3545903.958818198]);
map.getView().setZoom(15);
DCI.BaseStationsLayer.Init(map);
}
else {
if(DCI.BaseStationsLayer.layer){
bmap.getMap().removeLayer(DCI.BaseStationsLayer.layer);
DCI.BaseStationsLayer.layer = null;
}
}
})

• 扇形绘制初始化代码

/**绘制扇形
*@data
**/
loadbaseStations:function(baseStations){
if(baseStations && baseStations.rows.length>0){
var len = baseStations.rows.length;
for(var i = 0;i<len;i++){
var record = baseStations.rows[i];
var feature = null;
var x = record.longitude;
var y = record.latitude;
if (isNaN(x) || isNaN(y)) return feature;
var geom = this.toSectorGeometry(record);
if (!geom) return feature;
record.id = record.id || record.eci;
feature = new ol.Feature();
feature.setId(record.id);
feature.set("__info", record, true);
feature.setGeometry(geom);
DCI.BaseStationsLayer.layer.getSource().addFeature(feature);
}
}
},
toSectorGeometry:function(record){
//频段
var bandIndication = record.bandIndication;
var angle, r;
var azimuth = record.azimuth;
switch (bandIndication) {
case 3:
{
angle = 25;
r = 120;
break;
}
case 8:
{
angle = 20;
r = 150;
break;
}
case 34:
{
angle = 40;
r = 100;
break;
}
case 38:
{
angle = 60;
r = 60;
break;
}
case 39:
{
angle = 50;
r = 80;
break;
}
case 40:
{
//方位角为空
if (isNaN(azimuth)) {
angle = 360;
r = 25;
azimuth = 0;
} else {
angle = 90;
r = 25;
}
break;
}
case 41:
{
angle = 60;
r = 60;
break;
}
}
 
var r = r / 111319.49079327358;
record["__geomR"] = r; //用于绘制几何的半径
var params = {
angle: angle,//夹角
direction: azimuth,
x: record.longitude,
y: record.latitude,
r: r
};
//判断不为数字
if (isNaN(params.angle) || isNaN(params.direction) || isNaN(params.x) || isNaN(params.y) || isNaN(params.r)) {
return null;
}
var angles = bxmap.math.getAngles(params.angle, params.direction);
 
var rings = bxmap.math.getRings([params.x, params.y], params.r, angles[0], angles[1], 30);
//坐标系之间转换
if(rings.length>0){
for(var i=0;i<rings.length;i++){
var newCoord=ol.proj.transform(rings[i],'EPSG:4326','EPSG:3857');//由前面坐标系转为后面坐标系坐标
rings[i] = newCoord;
}
}
var polygon = new ol.geom.Polygon([rings]);
return polygon;
}

• 扇形绘制核心代码

/**根据方位角和夹角获取起始角度和结束角度
* @params {number}{number}夹角，方位角
* return {array}
*/
bxmap.math.getAngles = function (angle, direction) {
var startAngle, endAngle;
startAngle = direction - angle / 2;
endAngle = direction + angle / 2;
return [startAngle, endAngle];
}
……

更多的详情见：GIS之家小专栏

对本专栏感兴趣的话，可以关注一波