如何在 openlayers 3 的 SVG 中创建距离刻度环？

Question

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

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>

如何在 openlayers 3 的 SVG 中创建距离刻度环？

How do I create a distance scale ring in SVG in openlayers 3?

svg

openlayers-3