Openlayers 3 add WKT to ol.feature - openlayers-3

is there a way to add ol.format.WKT.readFeature to ol.feature
i try to add multiple features to a single layers but i can't use wkt as the geometry of each feature.
this is my code for now so multiple layer will be created by this code. what i want is just a single layer with multiple features.
for (var i = 0; i <= data.length - 1 ; i++)
{
thisfill = fill;
thisstroke = stroke;
var styles = [new ol.style.Style({
image: new ol.style.Circle({
fill: thisfill,
stroke: thisstroke,
radius: 5
}),
fill: thisfill,
stroke: thisstroke
})];
customBldgLayerDC = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature],
}),
style: styles,
});
map.addLayer(customBldgLayerDC);
}

so i already figured out the answer i just need to add the wkt as geometry in feature. this Link help me understand my problem
Working Code
for (var i = 0; i <= data.length - 1 ; i++)
{
var thisfill = data[i].FILL;
var thisstroke = data[i].STROKE;
console.log(thisfill);
console.log(thisstroke);
var thisstyle = [ new ol.style.Style({
image: new ol.style.Circle({
fill: thisfill,
stroke: thisstroke,
radius: 5
}),
fill: thisfill,
stroke: thisstroke,
})
];
var format = new ol.format.WKT();
var wkt = data[i].WKT;
var geom = format.readGeometry(wkt);
RLfeature = new ol.Feature({
type: 'redline',
geometry: geom,
overlayID: data[i].REDLINEID
});
RLfeature.setStyle(thisstyle);
RLvector.getSource().addFeature(RLfeature);
console.log(RLfeature);
}
}

Related

Color points in in openlayers3

How can I change the standard blue color and size of points in openlayers 3?
I do like this:
while (lats.length > 0) {
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
})
]
})
});
map.addLayer(layer);
}
If I add styles then either nothing changes, or everything does not work. How to add styles here?
this is answer:
var vectorSource = new ol.source.Vector({
//create empty vector
});
var styleGreen = new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: 'green'
})
})
});
while (lats.length > 0) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
});
vectorSource.addFeature(iconFeature);
}
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleGreen
});
map.addLayer(vectorLayer);

how to draw line between two cliked points using Open Layer 3?

i can display json lat and lon in map but i want draw lines between two selected points.
like this Here
here i can click all place in Map but i want enable click only displayed points only.
i used this link to display my points Link2 now i want draw lines between two points
<script>
var flickrSource = new ol.source.Vector();
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 3
});
var source = new ol.source.Vector({wrapX: false});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach(function(item) {
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
});
}
</script>
Get the co-ordinates of this two points and draw LineString
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
var flickrSource = new ol.source.Vector();
var data = {
"items": [{
name: 'geo1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'geo1',
longitude: "5.0",
latitude: "5.0"
}]
};
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 1
}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource
//style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([0.0, 0.0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 5
});
var source = new ol.source.Vector({
wrapX: false
});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var points = [];
data.items.forEach(function(item) {
var point = ol.proj.transform([parseFloat(item.longitude), parseFloat(item.latitude)], 'EPSG:4326', 'EPSG:3857');
points.push(point);
var geometry = new ol.geom.Point(point);
var feature = new ol.Feature({
name: item.name,
geometry: geometry
});
flickrSource.addFeature(feature);
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
});
}
successHandler(data);
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<div id="map"></div>
Here is the code...
Here is the vector source, layers and map:
// Vector source of data points
var flickrSource = new ol.source.Vector();
// Style function for the data points
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
})
});
return [style];
}
// Layers
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
// MAP
var map = new ol.Map({
target: 'map',
layers: [osmLayer, flickrLayer],
view: new ol.View({
center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
Then here is the data points and placing them on the map:
// Data points
var data = {
"items": [{
name: 'p1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'p2',
longitude: "50.0",
latitude: "50.0"
}, {
name: 'p3',
longitude: "50.0",
latitude: "-50.0"
}]
};
// Placing data points on the map
function placePoints(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach( function(item) {
// for each item of data points we create feature geometry
// with coords contained in data and add them to the source
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform(
[parseFloat(item.longitude), parseFloat(item.latitude)]
);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
} );
}
placePoints(data); // do the stuff of placing points
And then the interaction for drawing the lines between points:
// select interaction working on "click"
var mySelectInteraction = new ol.interaction.Select({
condition: ol.events.condition.click,
multi: false
});
// init coords of line to draw between points
var pointA = null;
var pointB = null;
// Interaction on points for drawing lines between
mySelectInteraction.on('select', function(e) {
if (e.selected.length === 0) {
// clicking nothing, so reset points coords
pointA = null;
pointB = null;
}
else {
// Feature clicked and its coords
var feature = e.target.getFeatures().item(0);
var coords = feature.getGeometry().getCoordinates();
// Definition of coords points
if (pointA === null) { pointA = coords; }
else { pointB = coords; }
if ( pointA !== null && pointB !== null) {
var LinesSource = new ol.source.Vector();
var LinesLayer = new ol.layer.Vector({ source : LinesSource });
map.addLayer( LinesLayer );
// Line construction
LinesSource.addFeature( new ol.Feature({
geometry : new ol.geom.LineString( [pointA, pointB] )
}) );
// Reset points for next drawing
pointA = null;
pointB = null;
}
}
});
map.addInteraction(mySelectInteraction);
Works great for me!

Draw arrow without using any image in openlayers3

How do I draw an arrow over a vector layer in Openlayers 3 map?
I tried creating an arrow using canvaselement but don't know how to draw it over the ol3 map.
A canvas element is not necessary. You can take the arrow example from the Openlayers site and add 2 custom LineString elements instead of the icon. You already have in the example the rotation angle in radians and the event where you should add your code.
Hopefully the following snippet does the trick:
var source = new ol.source.Vector();
var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]);
lineStr1.rotate(rotation, end);
var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]);
lineStr2.rotate(rotation, end);
var stroke = new ol.style.Stroke({
color: 'green',
width: 1
});
styles.push(new ol.style.Style({
geometry: lineStr1,
stroke: stroke
}));
styles.push(new ol.style.Style({
geometry: lineStr2,
stroke: stroke
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>
This is another customization of the Openlayers line-arrow Example.
It uses a RegularShape instead of an image. The arrow will keep its size independent of the current map zoom.
var source = new ol.source.Vector();
var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 2
})
})
];
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: '#000'}),
points: 3,
radius: 8,
rotation: -rotation,
angle: Math.PI / 2 // rotate 90°
})
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>

How to create buffer graphic layer in openlayers3

Hello i am trying to create buffer for point in openlayers 3.I am able to display the with in buffer distance result.but not able to crea graphic layer. please help and what i tried i put it down.you can check it
var style = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
width: 5,
color: 'blue'
}),
radius: 12
}),
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
for (var i = 0; i < myObject.length; i++) {
ObjectIDs.push(myObject[i].asset_type);
ObjectIDs.push(myObject[i].x);
ObjectIDs.push(myObject[i].y);
}
var gridquerystr = ObjectIDs[0].toString();
var x = ObjectIDs[1].toString();
var y = ObjectIDs[2].toString();
alert(gridquerystr);
alert(x);
alert(y);
var pointgeom;
var pointfeatures = [];
//for (var i = 0 ; i < myObject.length ; i++) {
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
pointfeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: bufferdistance,
width: 5
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
}));
pointfeatures.push(pointfeature);
pointfeature.setStyle(style);
var locations = new ol.source.Vector({
features: pointfeatures,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);
since you can retrieve the features that are within the buffer you created and only need to display it ( if I understood well what you wanted ), you only have to change the style of your point like this:
Feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: yourBufferDistance,
width: 2
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
})
}));
I am getting buffer for the selected feature .But i want add own styles for the feature.Is there any other way.My working buffer function is
var pointgeom;
var pointfeatures = [];
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var poitnExtent = pointfeature.getGeometry().getExtent();
var bufferedExtent = new ol.extent.buffer(poitnExtent, bufferdistance);
var bufferPolygon = new ol.geom.Polygon(
[
[[bufferedExtent[0], bufferedExtent[1]],
[bufferedExtent[0], bufferedExtent[3]],
[bufferedExtent[2], bufferedExtent[3]],
[bufferedExtent[2], bufferedExtent[1]],
[bufferedExtent[0], bufferedExtent[1]]]
]
);
var bufferedFeature = new ol.Feature(bufferPolygon);
vectorBuffers.getSource().addFeature(bufferedFeature);
My working buffer for point is
var pointfeatures = [];
var ObjectIDs = [];
var obj = JSON.parse(data.d);
for (var i = 0 ; i < obj.length ; i++) {
ObjectIDs.push(obj[i].x);
ObjectIDs.push(obj[i].y);
var x = ObjectIDs[0].toString();
var y = ObjectIDs[1].toString();
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var extent = pointfeature.getGeometry().getExtent();
var bufferextent = new ol.extent.buffer(extent, bufferdistance);
var bufferPolygon = new ol.geom.Circle(extent, bufferdistance);
var bufferedFeature = new ol.Feature(bufferPolygon);
pointfeatures.push(bufferedFeature);
pointfeature.setStyle(style);
bufferedFeature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
image: new ol.style.Circle({
radius: bufferdistance,
width: 2
})
})
);
vectorBuffers.getSource().addFeature(bufferedFeature);
}
locations = new ol.source.Vector({
features: bufferextent,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);
map.getView().fit(SearchResultsLayer.getSource().getExtent(), map.getSize());

Shadow Marker for Icons in OpenLayers 3

Is there any elegant method to add shadow markers to a loop of icons in OpenLayers 3 ?
I'm struggling with adding shadows to an icon in ol3...and there is no consistent materials about this matter.
Try (with example styles):
var iconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
snapToPixel: false,
fill: new ol.style.Fill({
color: 'rgba(77,135,254,0.4)'
})
}),
zIndex: 1
});
var shadowStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.5)',
width: 6
}),
zIndex: 0
});
iconFeature.setStyle([iconStyle, shadowStyle]);
and then:
var iconSource = new ol.source.Vector(); // create an empty source
var icon = new ol.geom.Point(
// your point
);
var iconFeature = new ol.Feature({ // create a feature
geometry: icon
});
iconSource.addFeature(iconFeature); // add the feature to the source
var iconLayer = new ol.layer.Vector({ // create a layer with that source
source: iconSource
});
map.addLayer(iconLayer); // add the layer to the map

Resources