如何在开放图层 3 的 SVG 中创建距离刻度环

Question

我想在 openlayer 3 中的一个图层上绘制一个 SVG 距离环，以屏幕中心为中心。在屏幕坐标中绘制每个环。每个环之间的距离表示地图上的距离。每个环之间的距离随着地图的缩放而变化。

Answer 1

最好使用 OpenLayers 自己的样式功能来完成。 例如，添加一个虚拟图层，其要素覆盖整个范围，该图层可设置为地图中心周围的环形样式。 请注意，根据地图投影的不同，随着真实地图比例的变化，环的大小（甚至形状）可能会根据位置而变化，例如如果从格陵兰岛移动到非洲，则为50公里，200公里，500公里和1000公里。

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.getView().setCenter(ol.proj.transform([-38, 75.9], 'EPSG:4326', proj));
map.getView().setZoom(2);
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({
                    geometry: ol.geom.Polygon.circular(sphere, center, 1000000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'green',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 500000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 200000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 4
                    })
                }),
                new ol.style.Style({
                    geometry: ol.geom.Polygon.circular(sphere, center, 50000, 128).transform('EPSG:4326', proj),
                    stroke: new ol.style.Stroke({
                        color: 'black',
                        width: 4
                    })
                 })
            ];
        }
    })
);

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.4.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.4.0/ol.js"></script>
<div id="map" class="map"></div>