I am attempting to draw some circles on a map. I am creating the circles as features, then placing them in a layer. The issue I am having is that there is a line connecting each of the different features. What is causing the features to be connected?
// Generate some rings
var radius = [1000, 2000];
var features = [];
for(var i = 0; i < radius.length; i++)
{
features[i] = new ol.Feature( new ol.geom.Circle(center, radius[i] / ol.proj.METERS_PER_UNIT.m ) );
}
// Add features to new layer.
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 1,
color: [0, 0, 255, 1]
})
})
});
map.addLayer(layer);
Edit: Here is a screenshot of what I am getting http://i.imgur.com/jV19gTJ.png
Your code worked fine for me, though I did have to define an initial centre,which I put at [0,0] to match the view I defined for the map. I also added some ol.Map code (you have not supplied this bit in your Q, so maybe the problem is there?)
I used this HTML:
<div id="map" style="width: 100%; height: 500px"></div>
and this JavaScript:
var center = [0, 0];
var radius = [1000, 2000, 3000, 4000];
var features = [];
for(var i = 0; i < radius.length; i++)
{
features[i] = new ol.Feature( new ol.geom.Circle(center, radius[i] / ol.proj.METERS_PER_UNIT.m ) );
}
// Add features to new layer.
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 1,
color: [0, 0, 255, 1]
})
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 10
})
});
The reason for the connected circles is a bug within openlayers. Updating to the newest version corrected the issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.