I'm using openlayers 6.5 and I want to set the center of the map and to fit all polygons drawned.
Here is what I have:
/*** Set the map ***/
var map = new ol.Map({
target: map_element,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([
'24.6859325',
'45.9852429',
]),
zoom: 6
})
});
/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
});
map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ map_json_data[county_id]['google_map_county_polygon'] ]
})
})
);
}
/*** Here I want to set all polygons to be centered on the map and to fill the maximum zoom ***/
Some help based on code I have ?
You could build up a combined extent as you add features and then fit the view to that
var extent = ol.extent.createEmpty();
/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
});
map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');
ol.extent.extend(extent, map_json_data[county_id]['google_map_county_polygon'].getGeometry().getExtent());
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ map_json_data[county_id]['google_map_county_polygon'] ]
})
})
);
}
map.getView().fit(extent);
It could be made simpler if you are able to have all your polygons in a single vector layer
var vectorSource = new ol.source.Vector();
map.addLayer(
new ol.layer.Vector({
source: vectorSource
})
);
/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
});
map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');
vectorSource.addFeature( map_json_data[county_id]['google_map_county_polygon']);
}
map.getView().fit(vectorSource.getExtent());
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
})
});
`
This is the code :
drawPoligon : function (vertices) {
debugger;
var map = peaMap;
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([vertices])
});
var vectorSource= new ol.source.Vector({
features: [feature ]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
}
vertices = [1253906.08982072, 5430790.35506443, 1253935.16019819, 5430769.74133789, 1253951.90741865, 5430793.82802342, 1253955.42311216........]
Format of my coordinates array:
[
[1253906.08982072,5430790.35506443],
[1253935.16019819,5430769.74133789],
[1253951.90741865,5430793.82802342],
[1253955.42311216,5430798.88815272],
[1253953.91064413,5430800.28580152],
[1253952.03520923,5430801.40886153],
[1253945.88800332,5430791.50307534],
[1253936.62615957,5430797.3914173]
]
...The coordinates list isnt full. Only part of it for exposure.
The format [ [lon, lat], … ] is the correct one. With a bigger zoom you can see the result:
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vertices = [
[1253906.08982072, 5430790.35506443],
[1253935.16019819, 5430769.74133789],
[1253951.90741865, 5430793.82802342],
[1253955.42311216, 5430798.88815272],
[1253953.91064413, 5430800.28580152],
[1253952.03520923, 5430801.40886153],
[1253945.88800332, 5430791.50307534],
[1253936.62615957, 5430797.3914173]
];
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([vertices])
});
var vectorSource = new ol.source.Vector({
features: [feature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2,
color: [255, 0, 0]
})
})
});
var map = new ol.Map({
layers: [osmLayer, vectorLayer],
target: document.getElementById("map"),
view: new ol.View({
center: [1253950, 5430800],
zoom: 20
})
});
I'm trying to add a line between two points on my map. I have the following code but the web page only shows me a base map without the line that I want.
How do I add this line to an OpenLayers map?
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([ -95.36,29.75]),
zoom: 10
})
});
var coords = [[-95.36,29.75], [-96.36,30.75]];
var lineString = new ol.geom.LineString(coords);
// transform to EPSG:3857
lineString.transform('EPSG:4326', 'EPSG:3857');
// create the feature
var feature = new ol.Feature({
geometry: lineString,
name: 'Line'
});
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 10
})
});
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var source = new ol.source.Vector({
features: [feature]
});
var vector = new ol.layer.Vector({
source: source,
style: [lineStyle]
});
map.addLayer(vector);
</script>
`
Your code contains a javascript error in OpenLayers v5.x (and v4.6.5, which doesn't appear in v3.16.0):
Uncaught TypeError: ol.source.MapQuest is not a constructor
Remove the code that specifies that:
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
and the line displays.
proof of concept fiddle
code snippet:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-95.36, 29.75]),
zoom: 10
})
});
var coords = [
[-95.36, 29.75],
[-96.36, 30.75]
];
var lineString = new ol.geom.LineString(coords);
// transform to EPSG:3857
lineString.transform('EPSG:4326', 'EPSG:3857');
// create the feature
var feature = new ol.Feature({
geometry: lineString,
name: 'Line'
});
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 10
})
});
var source = new ol.source.Vector({
features: [feature]
});
var vector = new ol.layer.Vector({
source: source,
style: [lineStyle]
});
map.addLayer(vector);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<div id="map" class="map"></div>
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
});
With OpenLayers 3, how can I specify a minimum cluster size so that clusters with 5 map markers or less will not get clustered, but will instead display the individual map markers? Is there a way to do this within the cluster layer's ol.layer.Vector object?
let clusterSource = new ol.source.Cluster({
distance: CLUSTER_DISTANCE,
source: features
});
let clusterLayer = new ol.layer.Vector({
source: source,
style: function(feature, resolution) { }
});
You can check in the code how many features are there. If you have too many, you can create a cluster source based on the vector source you already have to add it a to a new vector layer. If not, a vector layer can be created with your existing vector source.
Since there is no method to set the source dynamically to a layer, your vector layer should be created with the desired source. If you want to see how it works with more than 5 features, just uncomment the commented lines.
var features = [
new ol.Feature({
geometry: new ol.geom.Point([0,0])
}),
new ol.Feature({
geometry: new ol.geom.Point([100000,500000])
}),
new ol.Feature({
geometry: new ol.geom.Point([500000,100000])
}),
new ol.Feature({
geometry: new ol.geom.Point([5000000,1000000])
}),
new ol.Feature({
geometry: new ol.geom.Point([1000000,500000])
})
/*,new ol.Feature({
geometry: new ol.geom.Point([1800000,800000])
})*/
],
source = new ol.source.Vector({
features: features
});
var layer;
if (features.length > 5) {
var clusterSource = new ol.source.Cluster({
distance: parseInt(40, 10),
source: source
});
var styleCache = {};
layer = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#AAA'
}),
fill: new ol.style.Fill({
color: '#DDD'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#B144FF'
})
})
});
styleCache[size] = style;
}
return style;
}
});
} else {
layer = new ol.layer.Vector({
source: source
});
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'clusterMap',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="clusterMap" class="map"></div>