0

I want to draw an SVG distance ring on one of the layers in openlayers 3, centered around the center of the screen.Draw each ring in screen coordinates. The distance between each ring represents the distance on the map. The distance between each ring varies as the map scales.

sueRimn
  • 21
  • 6

1 Answers1

0

It's probably best done using OpenLayers own styling capabilites. For example, adding a dummy layer with feature covering the whole extent which can be styled as rings around the map center. Note that depending on the map projection the ring sizes (and even shape) may change depending on location as the true map scale changes, such as these 50km, 200km, 500km and 1000km if moved from Greenland to Africa. 

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>
Mike
  • 16,042
  • 2
  • 14
  • 30
  • Hello, thank you for your help.But I think the distance ring is always centered around the center of the screen and doesn't change as the map moves and scales.Do you have any good Suggestions? – sueRimn Jan 07 '19 at 01:30
  • By the way, I'm sorry, I would like to ask how to represent the scale on the distance ring, I did not understand. – sueRimn Jan 07 '19 at 01:35
  • Are you looking for something line this, but drawn as rings instead of a bar? http://viglino.github.io/ol-ext/examples/canvas/map.canvas.control.html – Mike Jan 07 '19 at 10:17
  • I want to do exactly what you did with the ring, but I want the ring to stay the same position and size as I drag and scale the map.The only difference is that when I scale the map, the distance between each ring changes as much as the ol.control.ScaleLine.You mean that drawing the distance ring with canvas will not overwrite the map and thus affect the mouse's operation on the map, right? – sueRimn Jan 08 '19 at 01:26
  • Here's a customised version of the ol-ext scaleine which adds rings to the canvas http://mikenunn.16mb.com/demo/scalerings.html – Mike Jan 10 '19 at 23:23
  • Thank you, mike. That's what I want. – sueRimn Jan 11 '19 at 02:02
  • Hello Mike, do you know how to make the size and distance of the ring change with the scale of the map? – sueRimn Sep 05 '19 at 08:45