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

前言

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

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

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

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

image

点击扇形查询信息效果：

image

实现思路

• 界面设计

//信号扇形
"
" +
            "信号扇形" +
       "
" +
      '
' +
           '' +
           '信号扇形' +
'
'

• 点击事件

//信号扇形
$("#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;i0){
            for(var i=0;i

• 扇形绘制核心代码

/**根据方位角和夹角获取起始角度和结束角度
* @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之家小专栏
对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式