前言
之前写过一篇openlayers4版本的地图绘制扇形文章，但是由于是封装一层 js代码写的，很多初学者看起来比较有点吃力，所以本篇文章重新写一篇地图绘制扇形文章，直接基于最新版本openlayers6写的，纯粹html + js + css形式，没有任何封装。
内容概览
1.基于openlayers6实现地图绘制扇形2.源代码demo下载
效果图如下：
具体实现过程
html 样式
Using OpenLayers with Webpack
部分核心代码，完整的见源码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);
//监听地图鼠标事件
map.on('click',function(e) {
if (e.dragging) {
return;
}
var feature =map.forEachFeatureAtPixel(e.pixel,
function(feature) {
return feature;
});
if(feature){
var attribute = feature.get('__info');
var winObject=getWinContent(attribute);
var centerCoordinates=getCenterCoordinates(feature);
showGraphicWin(centerCoordinates,winObject.html,winObject.title);
}
})
/**获取弹出框html模版
*@attribute
**/
function getWinContent(attribute){
var e = attribute;
var winHtml="";
var title = attribute.baseStationName;
winHtml = "
"+
"
"+
""+
" | "+
" | "+
"
"+
""+
" | "+
" | "+
"
"+
""+
" | "+
" | "+
"
"+
""+
" | "+
" | "+
"
"+
"
"+
"
";
return {'html':winHtml,'title':title};
}
/**
* 弹出气泡窗口
* @centerPoint centerPoint @ 地图跳转中心点
* @html html @ 气泡窗口内容模板
* @title title @ 气泡窗口标题
* **/
function showGraphicWin(centerPoint,html,title){
//DCI.BaseStationsLayer.popover.show(centerPoint, html, title);
content.innerHTML = html;
overlay.setPosition(centerPoint);
}
/**获取中心点坐标
* @feature 要素｛ol.feature｝
* return ｛ol.coordinates｝
* */
function getCenterCoordinates(feature){
var coord=new getCenter(feature.getGeometry().getExtent());
return coord;
}
function clearMap(){
//隐藏气泡窗口
overlay.setPosition(undefined);
closer.blur();
}
function loadbaseStations(baseStations){
if(baseStations && baseStations.rows.length>0){
var len = baseStations.rows.length;
for(var i = 0;i
0){
for(var i=0;i
