How do I create a distance scale ring in SVG in openlayers 3?
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.
svg openlayers-3
asked Jan 2 at 3:22
sueRimnsueRimn
35
add a comment |
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.
svg openlayers-3
asked Jan 2 at 3:22
sueRimnsueRimn
35
add a comment |
0
0
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.
svg openlayers-3
asked Jan 2 at 3:22
sueRimnsueRimn
35
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.
svg openlayers-3
svg openlayers-3
asked Jan 2 at 3:22
sueRimnsueRimn
35
asked Jan 2 at 3:22
sueRimnsueRimn
35
asked Jan 2 at 3:22
sueRimnsueRimn
35
asked Jan 2 at 3:22
sueRimnsueRimn
35
asked Jan 2 at 3:22
sueRimnsueRimn
35
35
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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>answered Jan 3 at 19:03
MikeMike
2,000227
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 7 at 1: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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000873%2fhow-do-i-create-a-distance-scale-ring-in-svg-in-openlayers-3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Jan 3 at 19:03
MikeMike
2,000227
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 7 at 1: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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
|
show 1 more comment
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>answered Jan 3 at 19:03
MikeMike
2,000227
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 7 at 1: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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
|
show 1 more comment
0
0
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>answered Jan 3 at 19:03
MikeMike
2,000227
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>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>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>answered Jan 3 at 19:03
MikeMike
2,000227
answered Jan 3 at 19:03
MikeMike
2,000227
answered Jan 3 at 19:03
MikeMike
2,000227
answered Jan 3 at 19:03
MikeMike
2,000227
2,000227
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 7 at 1: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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
|
show 1 more comment
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 7 at 1: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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
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 7 at 1: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 7 at 1: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 7 at 1:35
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 7 at 1:35
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 at 10:17
Are you looking for something line this, but drawn as rings instead of a bar? viglino.github.io/ol-ext/examples/canvas/…
– Mike
Jan 7 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 8 at 1:26
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 8 at 1:26
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
Here's a customised version of the ol-ext scaleine which adds rings to the canvas mikenunn.16mb.com/demo/scalerings.html
– Mike
Jan 10 at 23:23
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000873%2fhow-do-i-create-a-distance-scale-ring-in-svg-in-openlayers-3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
