openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。
添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。注意，根据地图投影，当真实地图比例发生变化时，环尺寸（甚至形状）可能会根据位置而变化，例如，如果从格陵兰岛移动到非洲，这些距离将为50公里，200公里，500公里和1000公里。
GitHub:八至
作者：狐狸家的鱼
本文链接：类似比例尺功能的距离环
代码：
style：
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
} .map {
height: 100%;
width: 100%;
}
html:
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
})
],
target: 'map',
view: new ol.View()
});
//距离环
var proj = map.getView().getProjection();
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ new ol.Feature(new ol.geom.Polygon.fromExtent(proj.getExtent())) ]
}),
style: function(feature) {
var center = ol.proj.transform(map.getView().getCenter(), proj, 'EPSG:4326');
var sphere = new ol.Sphere(6371008.8);
return [
new ol.style.Style({//1000km
geometry: ol.geom.Polygon.circular(sphere, center, 1000000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//500km
geometry: ol.geom.Polygon.circular(sphere, center, 500000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//200km
geometry: ol.geom.Polygon.circular(sphere, center, 200000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
}),
new ol.style.Style({//50km
geometry: ol.geom.Polygon.circular(sphere, center, 50000, 128).transform('EPSG:4326', proj),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 3
})
})
];
}
})
);