This is my OSM layer in openlayers 3.9.0.
var layer = new ol.layer.Tile({
source: new ol.source.OSM(
{
attributions: [
new ol.Attribution({
html: 'All maps © ' +
'OpenCycleMap'
})
]
}
),
opacity: 0.8,
brightness: 0.8
});
And now I want to get the EPSG code of the layer to check it so I do like
var a = layer.getProjection().getCode();
alert(a);
and I get the error layer.getProjection is not a function.
What am I missing?
Please help me
You should getProjection on ol.source.OSM rather than ol.layer.Tile, so:
layer.getSource().getProjection().getCode()
Related
OpenLayers 3 Local Tiles
I need to use local tiles. Please help.
I have tried this
var map = new ol.Map({
layers : [ layers['vworld'], vectorLayer ],
interactions : ol.interaction.defaults({
shiftDragZoom : false
}).extend([ new ol.interaction.DragRotateAndZoom() ]),
target : 'map',
view : new ol.View({
// center: ol.proj.transform([getLongi, getLati ], 'EPSG:4326', 'EPSG:3857'),
center : ol.proj.fromLonLat([ 127.5, 36 ]),
zoom : 7, minZoom : 6, maxZoom : 19
})
});
var layers = {};
layers['vworld'] = new ol.layer.Tile({
title : 'VWorld Gray Map', visible : true, type : 'base',
source : new ol.source.XYZ({
url : 'H:/tile/{z}/{x}/{y}.png'
})
});
Not allowed to load local resource: file:///H:/tile/7/110/48.png <- I'm getting an error.. From Chrome
The tile is located at H: /tile/bla~/bla~/bla~.png
It is a world map, there are many folders in the tile folder, and there are many PNG files in it.
The xyz value provided by openlayer is different from the tile I have. What should I do?
I have problem how to coonnect a offline tileLayer in ol3.
This ismy code:
var tileLayer = new ol.source.XYZ("offline",
"Tiles/${x}/${y}/${z}.png", { numZoomLevels: 18, isBaseLayer: true });
It was work fine in ol2 with OpenLayers.Layer.OSM
I spend some time looking for help, but I found a wall.
First you define a tile layer (ol.layer.Tile) and inside this you define the source.
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 1,
center: [0, 0]
}),
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'Tiles/{x}/{y}/{z}.png',
maxZoom: 18
})
})
]
});
Edited the url of the ol.source.XYZ object, moved out the $ chars. Maybe now your tiles will load.
I try to load some features from Geoserver to a vector layer in Openlayers 3.9.0.
var url = 'http://localhost:5550/geoserver/mymap/wfs?service=WFS&'+'version=1.0.0&request=GetFeature&typeName=mymap:layer&'+'outputFormat=application/json&maxFeatures=50';
var projection = ol.proj.get('EPSG:3857');
var extent = [2297128.5, 4618333, 2459120.25, 4763120];
var amir = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent) {
$.ajax(url, {type: 'GET'})
.done(loadFeatures)
.fail(function () {alert("error");});
},
strategy: ol.loadingstrategy.bbox
});
function loadFeatures(response) {
formatWFS = new ol.format.WFS();
var features = formatWFS.readFeatures(response);
amir.addFeatures(features);
//-----------OR---------------------
var features = amir.readFeatures(response);
amir.addFeatures(features);
}
var fill = new ol.style.Fill({
color: 'rgba(0,0,0,0.2)'
});
var stroke = new ol.style.Stroke({
color: 'rgba(0,0,0,0.4)'
});
var circle = new ol.style.Circle({
radius: 6,
fill: fill,
stroke: stroke
});
jake = new ol.layer.Vector({
source: amir,
style: new ol.style.Style({
fill: fill,
stroke: stroke,
image: circle
})
});
In loadFeatures function if I use
formatWFS = new ol.format.WFS();
var features = formatWFS.readFeatures(response);
amir.addFeatures(features);
I get Uncaught AssertionError: Failure: Unknown source type pointing to a openlayers line that throws errors and to this line of my codevar features = formatWFS.readFeatures(response);.
If I use
var features = amir.readFeatures(response);
amir.addFeatures(features);
I get Uncaught TypeError: sourceVector.readFeatures is not a function pointing to var features = amir.readFeatures(response); .
The request to the WFS looks ok, with OK 200 status. If I grab the request's URL sended to Geoserver and open it in a new tab I get raw GeoJSON like {"type":"FeatureCollection","totalFeatures":422,"features":[{"type":"Feature","id":"layer.709","geometry":{"type":"Point","coordinates":[2391735.8907621,4695330.8039257005]},"geometry_name":"l_geom","properties":{"l_name":"Leeron"}},....//next feature
So its a FeatureCollection not just an array. Not that I know how to handle this
I dont get why to set a ol.format.WFS and not just read/add features. I dont know how to debug and add the features to my layer
You are instructing GeoServer to use GeoJSON as output format, so you'll need to use the GeoJSON format in OpenLayers to parse the features. You should be able to simplify your source configuration to something like
var url = 'http://localhost:5550/geoserver/mymap/wfs?service=WFS&' +
'version=1.0.0&request=GetFeature&typeName=mymap:layer&' +
'outputFormat=application/json&maxFeatures=50';
var amir = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent, projection) {
return url + '&bbox=' + extent.join(',') +
'&srsName=' + projection.getCode();
},
strategy: ol.loadingstrategy.bbox
});
I've created a tile set of an image using MapTiler. MapTiler generates a OL 2 script that centers the tiled image in the viewing window with the following code:
var map, layer;
var mapBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
var mapMinZoom = 0;
var mapMaxZoom = 6;
var mapMaxResolution = 1.000000;
var gridBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000);
function init() {
var options = {
controls: [],
maxExtent : gridBounds,
minResolution: mapMaxResolution,
numZoomLevels: mapMaxZoom+1
};
map = new OpenLayers.Map('map', options);
layer = new OpenLayers.Layer.XYZ( "MapTiler layer", "${z}/${x}/${y}.png", {
transitionEffect: 'resize',
tileSize: new OpenLayers.Size(256, 256),
tileOrigin: new OpenLayers.LonLat(gridBounds.left, gridBounds.top)
});
map.addLayer(layer);
map.zoomToExtent(mapBounds);
I want to use OL3 to display the tiled map but do not know how to implement equivalent OL3 methods to achieve this. Using the following script I can display the tiled image but I cannot figure out how to center the tiles to in the view.
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: map_path + '{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
I've inspected the map extent which turns out to be:
-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244
My tiled image extent is given in the OL2 code, but I don't known how to use this information in OL3. I think it might have something to do with a transformation or fitExtent but without further direction, it seems I'm just guessing at what to do.
You will have to create a pixel projection for this to work properly. Then you can use fit (replacement for the former fitExtent), as you already suspected, to zoom to the full extent of the image.
The whole OpenLayers 2 code translated to OpenLayers 3 would look like this:
var mapBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var mapMaxZoom = 6;
var gridBounds = [0.000000, -9350.000000, 14450.000000, 0.000000];
var projection = new ol.proj.Projection({
code: 'pixels',
units: 'pixels',
extent: gridBounds
});
var map = new ol.Map({
target: 'map',
view: new ol.View({
extent: mapBounds,
projection: projection
})
});
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: '{z}/{x}/{y}.png',
projection: projection,
maxZoom: mapMaxZoom
})
});
map.addLayer(layer);
map.getView().fit(mapBounds, map.getSize());
I am migrating from OpenLayers 3.2.0 to 3.5.0 and am having trouble loading my GeoJSON data into my vector layer. I have it working, but I'm transforming the geometry of the features from my GeoJSON data source before I add them to my vector source.
Is there a way to make OpenLayers 3.5.0 apply the transformation automatically?
The data from my GeoJSON data source uses the EPSG:4326, I believe that I need to re-project the geometries to EPSG:3857 in order to display them on my map. The GeoJSON data source has the projection information in it's crs attribute and my vector source also has it's projection set. Still, the feature geometries are not transformed on their own.
I need to pass the bounds of the viewable map area via the URL to my GeoJSON data source, I do not want to load all of the data at once. I have a loader function on my vector source that gets the current map extent and builds the URL for the request.
Sample Data from my GeoJSON source is available, it validates through a linter and I believe it to be reasonable.
Below is the current code that I am using.
var vectorFormat = new ol.format.GeoJSON();
var featureStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill(
{color: 'rgba(255, 69, 0, 0.75)'}),
stroke: new ol.style.Stroke(
{color: 'rgba(255, 0, 0, 0.95)', width: 1})
})
});
var vectorSource = new ol.source.Vector({
projection: new ol.proj.Projection({'code':'EPSG:3857'}),
strategy: ol.loadingstrategy.bbox,
loader: function(extent, resolution, projection) {
var coordinate1 = ol.proj.transform([extent[0], extent[1]],
'ESPG:3857', 'EPSG:4326')
var coordinate2 = ol.proj.transform([extent[2], extent[3]],
'ESPG:3857', 'EPSG:4326')
var url = 'api/sites/geo/bounds/4326/' + coordinate1[1]
+ ',' + coordinate1[0] + '/' + coordinate2[1] + ','
+ coordinate2[0] + "/";
$.ajax({
url: url,
dataType: 'json'
}).then(function(response) {
var features = vectorFormat.readFeatures(response);
var transformFn = ol.proj.getTransform(
response.crs.properties.name, projection);
for(index in features) {
var feature = features[index];
feature.getGeometry().applyTransform(transformFn);
}
vectorSource.addFeatures(features);
});
}
});
this.state.map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource,
style: featureStyle
})
],
view: new ol.View({
center: this.transformToOl(this.state.center),
zoom: this.state.zoom
})
});
Any help or pointers in the right direction would be greatly appreciated. :-D
Yes, OpenLayers can do the reprojection for you. You don't even have to set the projection on the source. The geometries will be automatically reprojected to the view projection.
var vectorSource = new ol.source.Vector({
url: 'file.json',
format: new ol.format.GeoJSON()
});
http://jsfiddle.net/h9zwjf88/
Update
In case you want to you use a custom loader, you can specify the target projection when parsing the features (see also ol.format.GeoJSON.html#readFeatures):
var vectorSource = new ol.source.Vector({
strategy: ol.loadingstrategy.bbox,
loader: function(extent, resolution, projection) {
$.ajax(url).then(function(response) {
var features = format.readFeatures(response,
{featureProjection: 'EPSG:3857'});
vectorSource.addFeatures(features);
});
}
});
http://jsfiddle.net/h9zwjf88/1/