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之家小專欄

對本專欄感興趣的話，可以關注一波