D7a07ee0f92d5731c425a02c35611c8c
openlayers6绘制扇形(附源码下载)

前言

之前写过一篇openlayers4版本的地图绘制扇形文章,但是由于是封装一层 js代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图绘制扇形文章,直接基于最新版本openlayers6写的,纯粹html + js + css形式,没有任何封装。

内容概览

1.基于openlayers6实现地图绘制扇形
2.源代码demo下载

效果图如下:

具体实现过程

  • html 样式
<html>
  <head>
    <meta charset="utf-8">
    <title>Using OpenLayers with Webpack</title>
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css">
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="./bundle.js"></script>
  </body>
</html>
  • 部分核心代码,完整的见源码demo下载
    ```
    //扇形模拟数据
    var baseStations = {
    "rows": [{
    "baseStationId": 3324020,
    "baseStationName": "460-00-396906",
    "longitude": 120.161,
    "latitude": 30.29683,
    "azimuth": null,
    "frequencyPoint": 38950,
    "bandIndication": 40,
    "eci": 101607940
    }, {
    "baseStationId": 3324021,
    "baseStationName": "460-00-396906",
    "longitude": 120.16039,
    "latitude": 30.29659,
    "azimuth": null,
    "frequencyPoint": 38950,
    "bandIndication": 40,
    "eci": 101607941
    }, {
    "baseStationId": 3324022,
    "baseStationName": "460-00-396906",
    "longitude": 120.161,
    "latitude": 30.29683,
    "azimuth": null,
    "frequencyPoint": 38950,
    "bandIndication": 40,
    "eci": 101607947
    },
    ……
    ]}

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});

closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};

var vecsource = new VectorSource();
var veclayer = new VectorLayer({
source: vecsource,
style: function(feature) {
var info = feature.get("__info");
var bandIndication = info.bandIndication;
var text = info.baseStationName;
var color = "red";
switch (bandIndication) {
case 3: {
color = '#9891b3';
break;
}
case 8: {
color = '#90ad36';
break;
}
case 34: {
color = '#b97a57';
break;
}
case 38: {
color = 'red';
break;
}
case 39: {
color = 'green';
break;
}
case 40: {
color = 'blue';
break;
}
case 41: {
color = '#880015';
break;
}

            }
            return new Style({
                stroke: new Stroke({
                    color: color,
                    width: 1
                })
            });
        }

});

var view = new View({
//projection: 'EPSG:4326',
//center: [0, 0],
//zoom: 2
//center: [113.90271877, 22.95186415],
zoom: 13
})

var map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
//url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
],
overlays: [overlay],
view: view
});

map.addLayer(veclayer);

loadbaseStations(baseStations);

map.getView().setCenter([13375119.498201383, 3545903.958818198]);
map.getView().setZoom(15);

top Created with Sketch.