前言
openlayers4 官網(wǎng)的 api 文檔介紹地址 openlayers4 api，里面詳細(xì)的介紹 openlayers4 各個(gè)類的介紹，還有就是在線例子：openlayers4 官網(wǎng)在線例子，這個(gè)也是學(xué)習(xí) openlayers4 的好素材。
openlayers4 入門開發(fā)系列的地圖服務(wù)基于 Geoserver 發(fā)布的，關(guān)于 Geoserver 方面操作的博客，可以參考以下幾篇文章：
本篇的重點(diǎn)內(nèi)容是利用 openlayers4 實(shí)現(xiàn)小區(qū)信號覆蓋的扇形圖功能，效果圖如下：
image
點(diǎn)擊扇形查詢信息效果：
image
實(shí)現(xiàn)思路
- 界面設(shè)計(jì)
//信號扇形
"<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>'
- 點(diǎn)擊事件
//信號扇形
$("#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
};
//判斷不為數(shù)字
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);
//坐標(biāo)系之間轉(zhuǎn)換
if(rings.length>0){
for(var i=0;i<rings.length;i++){
var newCoord=ol.proj.transform(rings[i],'EPSG:4326','EPSG:3857');//由前面坐標(biāo)系轉(zhuǎn)為后面坐標(biāo)系坐標(biāo)
rings[i] = newCoord;
}
}
var polygon = new ol.geom.Polygon([rings]);
return polygon;
}
- 扇形繪制核心代碼
/**根據(jù)方位角和夾角獲取起始角度和結(jié)束角度
* @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之家小專欄
對本專欄感興趣的話，可以關(guān)注一波
