I am trying to load my layer from Geoserver as WFS layer in my OL3 application.
Here is my code to create WFS layer:
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent, resolution, projection) {
return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
'version=1.0.0&request=GetFeature&typename=main:Building_WGS&' +
'outputFormat=application/json&srsname=EPSG:4326&';
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
}))
});
var vector1 = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
To make my code complete here is the code where I have created map object:
var centerpos = [84.2, 28.2];
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
var maxExtent = [80.05844110726194,26.34796712822462,88.2015218371264,30.44742963310623];
var map = new ol.Map({
layers: [baseLayerOSM, vector1],
target: 'map',
//controls: [new CustomControl()],
view: new ol.View({
extent:ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:900913'),
projection : 'EPSG:900913', // OSM projection
center : newpos,
minZoom:7,
zoom: 7
})
});
I can see the OSM layer in my map. But I can't see the layer Building_WGS. I have a workspace main in geoserver.
When I copy the URL
'http://localhost:8080/geoserver/wfs?service=WFS&' +
'version=1.0.0&request=GetFeature&typename=main:Building_WGS&' +
'outputFormat=application/json&srsname=EPSG:4326&';
I can see the JSON contents.
Can anyone suggest what am I doing wrong in my code?
I even tried to add crossOrigin:"Anonymous" but that doesn't help either.
HELP please
AJ
Related
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>
When i write the features to KML. It doesn't include the styles of features. A similiar question is asked for openlayers 2. I want the code for openlayers 3. Following is the code for writing the features to the kml file
var drfeatures = drawLayerSource.getFeatures();
var format = new ol.format.KML();
var kml = format.writeFeatures(drfeatures, {featureProjection:'EPSG:3857'});
You can just add style object to the ol.format.KML();
var source = new ol.source.Vector({
url: 'city.kml',
format: new ol.format.KML({
projection: 'EPSG:3857',
extractStyles: false
})
});
function styleFunction(feature) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 4
})
})
return [style];
}
var layer = new ol.layer.Vector({
source: source,
style: styleFunction
});
map.addLayer(layer);
I have this simple layer working with openlayers 3.10
var roads = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 13}),
tilePixelRatio: 16,
url: 'http://MY_SERVER/{z}/{x}/{y}.topojson'
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 8,
color: [0xff,0xff,0,0.3]
})
})
});
And then it is laid out on top of an OSM/mapnik layer:
var map = new ol.Map({
layers: [
mapnik,
roads
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([25, 46]),
zoom: 7,
minZoom:7,
maxZoom:17
})
});
However the 3.11 version
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
// ...
})
});
fails. The tile server is invoked, putting in a styling function reveals that the features are loaded properly, but no feature is displayed! There is no error on the console. What am I doing wrong?
With v3.11.0 release ol.source.TileVector was removed. You may use ol.source.VectorTile from now on. Also change your code from ol.layer.Vector to ol.layer.VectorTile. See changelog and an example.
I've been trying the new version (3) of Open Layers. I've modified the icon feature example slightly, so it would show a polygon. I've been searching, reading and trying for a couple of hours, but can't figure out what I'm doing wrong.
I don't want to use geoJSON, because I want to dynamically add and remove features.
This is the code I have so far:
<script type="text/javascript">
var point1 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
var point2 = ol.proj.transform([35.41, 9.82], 'EPSG:4326', 'EPSG:3857');
var point3 = ol.proj.transform([33.41, 11.82], 'EPSG:4326', 'EPSG:3857');
var polyFeat = new ol.Feature({
geometry: new ol.geom.Polygon([point1, point2, point3])
});
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
});
polyFeat.setStyle(polyStyle);
var vectorSource = new ol.source.Vector({
features: [polyFeat]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
Why is the polygon not showing?
Two small things to solve your issue:
First, it's recommended to close a polygon, so declare a fourth point with same coordinates as the first.
var point4 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
Then, your geometry new ol.geom.Polygon([point1, point2, point3]) should be new ol.geom.Polygon([[point1, point2, point3, point4]])
The important fact here is not the point4 addition but to transform your array point to an array of array of points. See the API that says OpenLayers 3 ol.geom.Polygon constructor expects an Array.<Array.<ol.Coordinate>> expected.
I have created a map with OpenLayers 3 using static image. It uses fake projection so the map can use to properly display the layer as it's measured in pixels. This is the code:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 1389, 1070]
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
imageSize: [1389, 1070],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 2
})
});
I was trying to add marker overlays to add some more interactions however I'm struggling to specify position and the markers is outside the map rather then inside where I want to place it.
var marker = new ol.Overlay({
position: [200, 200],
element: document.getElementById('marker'),
stopEvent: false
});
I'm very novice to this so if anyone have an idea how to set position correctly I will be thankful.
Using this OpenLayers 3 map as an example, I was able to add a marker to the center of your static image with the following:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([700, 700])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://ol3js.org/en/master/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});