With OL5 I'm trying to use a map with Gall-Peters projection with this definition:
var projname = 'EPSG:22';
var projdef = '+proj=cea +lon_0=0 +lat_ts=45 +x_0=0 +y_0=0 +ellps=WGS84 +units=m +no_defs';
var petersProjection = new Projection({
code: projname,
units: 'm',
extent: [-14192432.0000000000000000,-8984819.0000000000000000, 14192432.0000000000000000,8928365.0000000000000000]
});
proj4.defs(projname, projdef);
register(proj4);
GeoServer is used to serve the map as WMS and WMTS also in Gall-Peters projection.
In OL client the map is not wrapped across the 180° meridian. It only shows "one world".
When I switch the projection to EPSG:4326 or EPSG:3857 I get a continous wrapped map.
I'm stuck here.
Is something wrong with my projection definition?
Is OL only able to wrap with standard projections?
How can I get a wrapped map in Gall-Peters projection?
For reference here are my definitions of layer, view and map:
var basiskarte_source = new TileWMS({
url: geoserver_url,
serverType: 'geoserver',
params: {'FORMAT': 'image/png',
'VERSION': '1.1.1',
TILED: true,
LAYERS: 'eg:basiskarte',
tilesOrigin: -180 + "," + -90,
srs: 'EPSG:22'
},
projection : petersProjection
});
var wms_geoserver_tiled_layer =
new TileLayer({
title : 'gall-peters-map',
type : 'base',
visible : true,
source: basiskarte_source
});
var myview = new View({
center: fromLonLat([36.8394, -1.2743], petersProjection),
projection: projectionInUse,
zoom: 1,
rotation: deg2rad(180)
});
var map = new Map({
target: 'map',
layers: [
new LayerGroup({
title : 'Basiskarte',
layers: [wms_geoserver_tiled_layer]
})
],
view: myview
});
Related
I need to display my layer from geoserver on the map. I have problems with the projection system (EPSG:7749). I can't change the projection system with proj4 in my vector layer. I chose GeoJSON format because I will need to build a filter for the feature of my layer. Someone can help me?
`
proj4.defs('EPSG:7749', '+proj=aea +lat_1=34.0733 +lat_2=34.3833 +lat_0=34.2283 +lon_0=-112.7915 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs');
ol.proj.proj4.register(proj4);
console.log("Console: " + ol.proj.get('EPSG:7749'));
var test = ol.proj.get('EPSG:7749');
var urltest = 'http://myGeoserverIP/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=myworkspace:201910081246140571_Perimeters&outputFormat=application%2Fjson';
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
projection: test,
url: urltest,
});
var vector = new ol.layer.Vector({
source: vectorSource,
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
projection: test,
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 3
})
});
`
I need to implement a function with openlayers-3.
Description:There are a series of images .png. I need to play them like a animation.I set the image source as ImageStatic,but When I set the current image visible is false ,it doesn't work. the visible property seems like not work.
Code:
var extent = [0, 0, 418, 600];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Group({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://localhost:2265/images3/test2.png',
projection: projection,
imageExtent: extent,
})
}),
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://localhost:2265/images2/test1.png',
projection: projection,
imageExtent: extent,
})
})
]
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8
})
});
var layers = map.getLayers().getArray();
var frame = 1;
setInterval(function () {
layers[frame].setVisible = false;
frame = (frame + 1) % 2;
layers[frame].setVisible = true;
},500);
map.layers[1] is a group, to get the image layers try:
var layers = map.getLayers().getArray()[1].getLayers().getArray();
You can also do 'real' animation by rendering directly to the canvas:
http://openlayers.org/en/latest/examples/feature-move-animation.html
http://openlayers.org/en/latest/examples/flight-animation.html
I want to add features to my tile map, the problem ocurred when I try to use
ol.source.TileWMS
The error message is:
TypeError: a.addEventListener is not a function
However it works with
ol.source.OSM
My code:
var projection = new ol.proj.Projection({
code: 'EPSG:32719',
extent: [441867.78, 1116915.04, 833978.56, 10000000.00]
});
var extent = [576631.5686027373,8119272.722829757,655823.9357532839,8286730.359291008];
var wmsSource = new ol.source.TileWMS({
url: 'http://192.168.5.94:8080/geoserver/wms',
params: {'LAYERS': 'layer'},
ratio: 1,
serverType: 'geoserver'
});
var wmsLayers = [
new ol.layer.Tile({
extent: extent,
source: wmsSource
})
];
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
var view = new ol.View({
projection: projection,
center: [593169.72792, 8174979.55243],
//center: ol.proj.fromLonLat([-16.5088, -68.1388], projection),
extent: extent,
zoom: 12
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine()
]),
layers: [wmsLayers, vector],
target: 'map',
view: view
});
var draw; // global so we can remove it later
function addInteraction(){
draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
map.addInteraction(draw);
}
map.on('singleclick', function(evt) {
var coordinate = map.getEventCoordinate(evt.originalEvent);
console.log(coordinate);
document.getElementById('latitud').value = coordinate[0];
document.getElementById('longitud').value = coordinate[1];
addInteraction();
});
addInteraction();
Just change this line to change my layer, when I use OSM, everything is ok... But when I use TileWMS the error appear
layers: [wmsLayers, vector],
Is there a conflict with TileWMS and Vector source?
ol.Map.layers expects an array of layers - your first object in the array is an array.
Try this:
var wmsLayer = new ol.layer.Tile({
extent: extent,
source: wmsSource
});
var map = new ol.Map({
layers: [wmsLayer, vector],
target: 'map',
view: view
});
Is is possible to load a Tile layer from a TileImage source with tiles in its highest resolution (zoom) for a specific extent and have these tiles show for all zoom levels. I have high resolution imagery I wish to show as a layer above another Tile layer such as Bing or OSM.
Example source
var source = new ol.source.TileImage({
projection: 'EPSG:900913',
tileGrid: new ol.tilegrid.TileGrid({
projection: 'EPSG:900913',
extent: projectionExtent,
//extent: ol.proj.transformExtent([-83.7893967, 42.851353, -83.7855987, 42.849371], "EPSG:4326", "EPSG:900913"),
resolutions: resolutions,
tileSize:[pictometryImageSize, pictometryImageSize]
}),
tileUrlFunction: function(tileCoord, pixelRatio, projection){
var zoom = tileCoord[0];
console.log(zoom)
if(zoom == 21){
var tileGrid = this.getTileGrid();
var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:900913", "EPSG:4326");
return 'www.myrealtileurl;
}
//return undefined;
//return 'https://dummy.com';
},
minZoom: 0,
maxZoom: 21
});
I hope I understand you correctly. First, you can restrict layer extent with extent. Second, you can lock zoom with maxZoom and minZoom properties. OpenLayers will resize tiles on his own. Here is an example, where ArcGIS tile layer is locked in extent and zoom:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile({
extent: ol.proj.transformExtent([-110, 42, -100, 48], "EPSG:4326", "EPSG:3857"),
source: new ol.source.XYZ({
maxZoom: 6,
minZoom: 6,
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-105.89, 45.09]),
zoom: 6
})
});
I'm trying to add makers on a OpenLayers 3 map.
The only example I have found is this one in the OpenLayers example list.
But the example uses ol.Style.Icon instead of something like OpenLayers.Marker in OpenLayers 2.
First Question
The only difference would be that you have to set the image Url but is it the only way to add a marker?
Also OpenLayers 3 doesn't seem to come with marker images so it would make sense if there's no other way than ol.Style.Icon
Second Question
It would be really nice if someone could give me an example of a function to add markers or icons after the map is loaded.
From what I understand in the example, they create a layer for the icon
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
Then they set the icon layer when they initialize the map
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
zoom: 3
})
});
If I want to add many markers, do I have to create 1 layer for each marker?
How could I add many markers to a layer? I can't figure out how this part would look
like
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
Thank you
Q1. Markers are considered deprecated in OpenLayers 2, though this isn't very obvious from the documentation. Instead, you should use an OpenLayers.Feature.Vector with an externalGraphic set to some image source in its style. This notion has been carried over to OpenLayers 3, so there is no marker class and it is done as in the example you cited.
Q2. The ol.source.Vector takes an array of features, note the line, features: [iconFeature], so you would create an array of icon features and add features to that, eg:
var iconFeatures=[];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island Two',
population: 4001,
rainfall: 501
});
iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);
var vectorSource = new ol.source.Vector({
features: iconFeatures //add an array of features
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
Obviously, this could be more elegantly handled by putting all of the ol.Feature creation inside a loop based on some data source, but I hope this demonstrates the approach. Note, also, that you can apply a style to the ol.layer.Vector so that it will be applied to all features being added to the layer, rather than having to set the style on individual features, assuming you want them to be the same, obviously.
EDIT: That answer doesn't seem to work. Here is an updated fiddle that works by adding the features (icons) to the empty vector source in a loop, using vectorSource.addFeature and then adds the whole lot to the layer vector afterwards. I will wait and see if this works for you, before updating my original answer.
there's a good tutorial at: http://openlayersbook.github.io
not tested but may helpful
var features = [];
//iterate through array...
for( var i = 0 ; i < data.length ; i++){
var item = data[i]; //get item
var type = item.type; //get type
var longitude = item.longitude; //coordinates
var latitude = item.latitude;
/*....
* now get your specific icon...('..../ic_customMarker.png')
* by e.g. switch case...
*/
var iconPath = getIconPath(type);
//create Feature... with coordinates
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
'EPSG:3857'))
});
//create style for your feature...
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: iconPath
}))
});
iconFeature.setStyle(iconStyle);
features.push(iconFeature);
//next item...
}
/*
* create vector source
* you could set the style for all features in your vectoreSource as well
*/
var vectorSource = new ol.source.Vector({
features: features //add an array of features
//,style: iconStyle //to set the style for all your features...
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
var exampleLoc = ol.proj.transform(
[131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
view: new ol.View2D({
projection: 'EPSG:3857',
zoom: 3,
center: exampleLoc
}),
layers: [
new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
]
});
map.addOverlay(new ol.Overlay({
position: exampleLoc,
element: $('<img src="resources/img/marker-blue.png">')
.css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
.tooltip({title: 'Hello, world!', trigger: 'click'})
}));
map.on('postcompose', function(evt) {
evt.vectorContext.setFillStrokeStyle(
new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}),
new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3}));
evt.vectorContext.drawCircleGeometry(
new ol.geom.Circle(exampleLoc, 400000));
});
var exampleKml = new ol.layer.Vector({
source: new ol.source.KML({
projection: 'EPSG:3857',
url: 'data/example.kml'
})
});
map.addLayer(exampleKml);
We just finished updating our website NUFOSMATIC from ol2 to ol6. Both the ol2 and ol3 code is on the site. This includes Matt Walker's ol-layerswitcher https://github.com/walkermatt replacing the missing ol2 layerswitcher. We actually updated three map applications; HEATMAP replaces the Patrick Wied (http://www.patrick-wied.at) ol2 heatmap with the native ol6 heatmap.
Only took 6 days. Wonder why we waited this long... oh, yeah, we have day jobs...