new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.9)', width: 2 }),
image: new Icon({src: '/images/crop.jpg',opacity:1,scale:1})
})
this suppose to make all features polygons filled with image located at /images/crop.jpg
but in real life it just draws transparent polygons.
is there something Im missing?
thanks!
Related
thanks for your time!
I am using a similar example to visualize my data.
I want to improve the visualization of the map and make a gradient. More or less like this. After reading the documentation, I realized that apparently this is not possible:
inRange: {
color: [
new echarts.graphic.RadialGradient(0.5, 0.5, .5, [
{
offset: 0,
color: 'green'
},
{
offset: 0,
color: 'rgb(35, 184, 116, 0.2)'
}]),
'rgba(255, 88, 74, 0.7)'
]
}
I tried to play around with overlaying two equivalent series and different settings for them, but unfortunately it doesn't work.
I solved the problem. By adding a gradient like this.
const mapOptions = {
series: [
...,
{..., itemStyled: {..., areaColor: gradient}},
]
}
And I already created the information panel manually and added functionality through
mapInstance.setOptions(newSeriesOption)
I have a basic map with openlayers 6.8.
I display markers from geojson.
Example of a geojson :
const geoMoscow = new ol.layer.Vector({
source: new ol.source.Vector({
url: './assets/moscow.geojson',
format: new ol.format.GeoJSON()
}),
visible: true,
title: 'geojson',
style: new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle,
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: [245, 49, 5, 1]
}),
radius: 10,
}),
})
})
I want to get this geojson coordinates for further use.
I have been reading many code examples that uses geojson.getSource().getFeatures() that allows to acces the getCoordinates() method from each feature.
Unfortunetly geoMoscow.getSource().getFeatures() gives an empty array.
I am obviously missing something there about openlayers logic.
It seems totally doable because my geojson contains a feature object with the coordinates in it but I am unable to access it.
TLDR : How to access informations like coordinates from this geojson Vector.
You must wait until the source is loaded and parsed
geoMoscow.getSource().on('featuresloadend', function(){
console.log(geoMoscow.getSource().getFeatures());
});
The source will not load until it is added to a map.
I've been searching for a day about how to place a list (array) of markers on an OSM/OpenLayers, but unfortunately, the official example wouldn't work for me.
Can you please show me the best way to show the map and then add it an array of coordinates using a custom PNG marker icon?
I am using OpenLayers 5.
The simplest way to mark an array of coordinates is to use the array in a MultiPoint geometry. If the coordinates are LonLat the geometry will need to be transformed to map coordinates:
var iconFeature = new ol.Feature({
geometry: new ol.geom.MultiPoint([[-90, 0], [-45, 45], [0, 0], [45, -45], [90, 0]]).transform('EPSG:4326','EPSG:3857'),
name: 'Null Islands',
population: 4000,
rainfall: 500
});
Icons will by default be displayed at the natural size of the image, but you can change that by setting a scale option:
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png',
scale: 0.5
}))
});
http://mikenunn.16mb.com/demo/OL_5.3.0_multi-icon.html
I have a situation in flot where I want the points to be 1 pixel GREEN dots. To do this I'm using the following settings:
points: {
show: true,
radius: 1,
lineWidth: 0
},
colors:["#00FF00"]
This works fine with the only problem being that 'colors' changes the line around the radius, which for me is non-existent, and I want to change the color of the actual radius of the data point. As it is right now I'm stuck with default white. Is there any way to change this?
I figured it out.
points: {
show: true,
radius: 1,
lineWidth: 0,
fillColor: '#00FF00'
}
I have been developing an app using Kinetic which uses several layers to keep things organised and I have draggable elements in more than one layer. I am finding that when one layer is dragged, shapes on another layer are no longer draggable.
In the cut-down example supplied, the blue Rects in the upper layer are no longer draggable once the lower layer has been dragged, I can't see why this is.
I have tried looking through the documentation and various tutorials, asking on Stackoverflow is my last resort so I hope someone can help!
I have tried setting dragOnTop to false on the draggable layer by the way, this doesn't change the result.
Thanks,
Oscar
http://jsfiddle.net/EveryoneMustWin/QRaxJ/
var kItems = {};
kItems.stage = new Kinetic.Stage({
container: 'container',
width: $("#container").width(),
height: $("#container").height()
});
kItems.lowerLayer = new Kinetic.Layer({
scale: 1.0,
id: "lower",
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: pos.y
}
}
});
kItems.upperLayer = new Kinetic.Layer({
scale: 1.0,
id: "upper"
});
kItems.stage.add(kItems.lowerLayer);
kItems.stage.add(kItems.upperLayer);
kItems.backdrop = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 200,
stroke: '#822',
strokeWidth: 2,
fill: '#b62',
opacity: 1,
id: 'backdrop'
});
kItems.lowerLayer.add(kItems.backdrop);
kItems.block1 = new Kinetic.Rect({
x: 100,
y: 100,
width: 20,
height: 20,
stroke: '#228',
strokeWidth: 2,
fill: '#65b',
opacity: 1,
id: 'block1',
draggable: true
});
kItems.upperLayer.add(kItems.block1);
kItems.block2 = new Kinetic.Rect({
x: 180,
y: 100,
width: 20,
height: 20,
stroke: '#228',
strokeWidth: 2,
fill: '#65b',
opacity: 1,
id: 'block2',
draggable: true
});
kItems.upperLayer.add(kItems.block2);
kItems.lowerLayer.draw();
kItems.upperLayer.draw();
kItems.lowerLayer.on("dragmove", function() {
kItems.upperLayer.setAttrs({x:this.getX(), y:this.getY()});
kItems.upperLayer.draw();
});
My workaround before this is fixed was to call layer.drawHit() on my dragEnd handler for the layer that became unresponsive (see my comment above). This has made it possible for me to continue using the newest version (there are many nice improvements that I didn't want to lose by using 4.3.3). Hope this helps.