I'm trying to load geojson data with openlayers 3. It's a lot of date, so I want to transfer just the data needed. I archived this by passing resulution and extent of the current view to the webservice. This is my code so far:
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'data.json?e=' + extent.join(',') + '&r=' + resolution;
$.ajax({
url: url,
success: function(data) {
vectorSource.addFeatures(vectorSource.readFeatures(data));
}
});
},
projection: 'EPSG:3857',
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 0
})
});
But my code only calls the webservice once. Which loading strategy do I have to use to call the webservice everytime the extent (and/or the resulution) changes?
ol.source.ServerVector does not know that you return different results for different resolutions. It remembers the areas loaded and does not load an area if it "knows" that its features are already loaded.
Your example initially loads the whole world (zoom=0), therefore no additional load is needed ever. Replace zoom=0 by lets say zoom=10: now a zoom out will trigger a load, because the larger area is not already known, while a zoom in will not trigger a load.
To reload on every change of resolution, you have to clear the memory.
Add after the definition of your map:
map.getView().on('change:resolution', function(evt){
alert ('resolution changed');
vectorSource.clear();
});
This code clears the memory each time the resolution changes and forces a load to be triggered.
Related
I'm using OpenLayers (v6.3.1) with ol-ext extensions (to handle animated clustering) on a simple html/javascript/jquery project.
I succeeded displaying data from a geojson with a vector source passed to cluster source then added to a layer.
My goal is now to add/remove filters (by user interaction) to the geojson fields displayed on the map.
The code of vector/cluster sources and the cluster layer :
const clusterSource = new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({
url: `${URL_PATH}`,
format: new ol.format.GeoJSON(),
})
});
const clusterLayer = new ol.layer.AnimatedCluster({
name: 'Cluster',
source: clusterSource,
animationDuration: $("#animatecluster").prop('checked') ? 700 : 0,
// Cluster style
style: getStyle
});
I'm stuck on the filtering part : should I filter the features array and replace the source of my layer? Or is there a easier way to do it with Openlayers?
Thanks for any help!
I created a point layer in ArcMap, then, using the Features to JSON tool, converted these points into a JSON file and ticked GeoJSON, trying to add it to the map:
let layer = new GeoJSONLayer({
url: "data/points.json"
});
let map = new Map({
basemap: "dark-gray"
});
map.add(layer);
let mapview = new MapView({
container: "map",
map: map
});
But nothing appears on the map, I tried to change the format to .geojson, the same way, if I change the url to a link from the documentation, then all the rules, dots appear, what am I doing wrong?
Maybe the problem is in the json file?
https://drive.google.com/open?id=1YxKfhiQMD82W2EI1llsmQaVD3kWgnWP-
This issue is more a javascript problem than an OpenLayer one. I guess...
The sample just work fine with my own WMS server : http://openlayers.org/en/v3.0.0/examples/graticule.html
In my project, the 'map' object is set in the map.js file, loaded in the index.html before the graticule.js file. It displays the map, as expected.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
});
Now my very simple code in graticule.js
"use Strict";
var graticule = new ol.Graticule();
graticule.setMap(map);
map.getViewPort().style.cursor = 'crosshair';
Ok now the fun part :
I can see the crosshair (SO the map object is ok!), but the setMap(map) just throw an error "TypeError : a is null" in the debug console.
I'm not a Javascript expert so it can be a relatively dumb reason.
Please, help, I'm stuck.
Problem solved.
I used ol.proj.Projection in the view property, but I need to use directly the string projection code :
var view = new ol.View({
center: center,
zoom: 6,
projection: 'EPSG:4326'
});
I am using OpenLayers to make a map from json data. I have to load it once already (with PHP) to check timestamps and verify information. At that point, I'd rather output a javascript variable and just have OL use that. I can't seem anything in the docs to accomplish this.
Ideally, I'd just change 'url': 'latest.json' to something like 'local': json_variable
var pointsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
'url': 'latest.json'
});
var pointsLayer = new ol.layer.Vector({
source: pointsSource,
style: new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'openlayers/marker-icon.png',
}))
})
});
map.addLayer(pointsLayer);
You can pass in your geojson data via the param 'object'.
The OL3 src is quite readable and often it is faster to read this to work out what to do than it is to hunt through the docs! I'm assuming you're using ol3.4 or earlier; here is the 3.2 src code for geojson:
https://github.com/openlayers/ol3/blob/v3.2.0/src/ol/source/geojsonsource.js
You can see it takes an object param, which is expecting a JS object, which is the result of JSON.parse("...your geojson string here...")
So something like:
var geojson_cache = "<?php output from PHP here ?>"
var geojson_object = JSON.parse(geojson_cache)
var pointsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
object: geojson_object
});
should do what you need.
Also FYI -- I mention OL3.4 or earlier above - the reason is that this class no longer exists in 3.5. You can see from that src file above that this class isn't much more than a wrapper around StaticVector with a ol.format.GeoJSON formatter attached. This has been refactored and will be replaced by ol.source.Vector and you provide the ol.format.GeoJSON formatter. Have a read of 'New Vector API' in these notes:
https://github.com/openlayers/ol3/releases/tag/v3.5.0
As i red from the readme file, openlayers.js has multiple choices for including files and themes.
What i would like is to use the lightest solution of openlayers.js files.
I included the openlayers.light.js in my app, and it creates maps but do not show them, check this:
do i forgot to include some other file?
my structure structure is this:
/vendor
/js
openlayers.light.js
/img
/theme
how to show maps layers?
Also does the openlayers.light.js will work on mobile devices (once fixed this problem :P )? or i'll need to include openlayers.mobile.js too?
This is the code not working with openlayers.light.js but working with openlayers.js (740kb) :
var _element = "#map";
var map = new OpenLayers.Map (_element, {
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom()
],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var lonLat = new OpenLayers.LonLat(_lon, _lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// map.getProjectionObject() doesn't work for unknown reason
);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon(_img_map_marker, size, offset);
markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone()));
var mapnik = new OpenLayers.Layer.OSM("Test");
map.addLayer(mapnik);
map.setCenter (lonLat,3);
PS: my openlayers map js init method is ok, it works using the huge openlayers.js (740KB), but not working with openlayers.light.js as i showed above
html
<div id="map"></div>
css
img{max-width:none;}
#map{
width:300px;
height:300px;
}
if you want to use mobile properties with openlayers as panning or zooming with hand you have to use openlayers.mobile.js.
you can use openlayers.light.js with mobile devices but not mobile functions.
i think your structure should be :
myProject
/js
openlayers.light.js
/img
/theme
and i have tried openlayers.light.js in http://jsfiddle.net/aragon/ZecJj/ and there is no problem with it.
My code:
var map = new OpenLayers.Map({
div: "map",
minResolution: "auto",
maxResolution: "auto",
});
var osm = new OpenLayers.Layer.OSM();
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
var center = toMercator({x:-0.05,y:51.5});
map.addLayers([osm]);
map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
and try to read Deploying (Shipping OpenLayers in your Application).
OpenLayers comes with pre-configured examples out of the box: simply
download a release of OpenLayers, and you get a full set of easy to
use examples. However, these examples are designed to be used for
development. When you’re ready to deploy your application, you want a
highly optimized OpenLayers distribution, to limit bandwidth and
loading time.
you can change src file with this link and can see it still works.
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.light.debug.js"></script>
to
<script type="text/javascript" src="https://view.softwareborsen.dk/Softwareborsen/Vis%20Stedet/trunk/lib/OpenLayers/2.12/OpenLayers.light.js?content-type=text%2Fplain"></script>
i hope it helps you...