[GIS] Openlayers 3 Cluster Strategy not projecting properly

clusteringjavascriptopenlayers

My Openlayers map is not displaying clustered points properly and I'm not sure why. My code is pretty simple and straight forward, here it is:

JSfiddle: http:// jsfiddle.net/1z5zyu4d/13/)

 <!doctype html>
 <html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.5.0/css/ol.css" type="text/css">
<style>
  .map {
    height: 100%;
    width: 100%;
  }
</style>
<script src="http://openlayers.org/en/v3.2.0/build/ol.js" type="text/javascript"></script>
<title>AIS Map</title>
</head>
<body>
<h2>Cluster map of ships broadcasting AIS data</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

  var view = new ol.View({
    center: center,
    zoom: 2
  });

  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
            })],
    view: view
  });

  var originalSource = new ol.source.GeoJSON({
url: './test.geojson'
  });

  // create a layer from it so we can visualize the original data
  var originalLayer = new ol.layer.Vector({
    source: originalSource
  });

  var clusterLayer = new ol.layer.Vector({
    source: originalSource
  });
  map.addLayer(originalLayer);
  map.addLayer(clusterLayer);
</script>
</body>
</html>

I'm basing this heavily off of the examples here: https:// openlayersbook.github.io/ch05-using-vector-layers/example-02.html and here: http:// openlayers.org/en/v3.2.0/examples/cluster.html. The problem I'm having is that the cluster shows up as one point centered at (0,0) like this. Upon zooming in, the cluster expands, as it should. What's weird though(besides it not mapping it right in the first place) is that when you zoom in the points are projected like this. The points are projected to the same locations they should be as if that one single tile is being treated like the whole world. The real locations of the points looks like this: http:// imgur.com/TLARMra. See how the x/y locations of the ships when overlayed on the whole world are the same as the x/y locations when overlayed on that one tile. There's a few less points on the one with boat icons but you can see the clusters around China, France/Germany, and the Eastern US coast all translate to the incorrect projection, along with all the others that are on both maps(The cluster data has a few more points than the non cluster data added for testing specific cases). So I'm almost positive that this is an issue with projection EPSG, etc. but I think I've tried every EPSG code in all different combinations(like including the projection in the layer itself caused the layer to not appear) to no avail. Firebug gives me no errors and it says ol.js is loading fine along with the ol.css. So basically I don't know what is causing this and I don't know how to fix it.

I would also like to mention that I'm using OL3 and specifically 3.2

My GeoJSON looks like this:

 {
"type": "FeatureCollection",
"features":[
{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [
            0.13138,
            49.4756
        ]
    },
    "properties": {
        "MMSI": "227006760",
        "NAVIGATION STATUS": "0"
    }
},//...about 30 of those^
]
}

Working jsfiddle, still the same problem http:// jsfiddle.net/1z5zyu4d/13/

Best Answer

Here's an example using OpenLayers version 3.6.0 http://jsfiddle.net/t3n55fzq/

This is the part that allows you to reproject features during read.

var originalSource = new ol.source.Vector({
    features: (
        new ol.format.GeoJSON()).readFeatures(geojsonObject,{
            dataProjection:'EPSG:4326',
            featureProjection:'EPSG:3857'
        }          
    )
});

You should also look at defining your projections inside the GeoJSON. e.g.

'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:4326'
    }
  }

If you're loading in from a external source try:

var originalSource = new ol.source.Vector({
    url: 'test.geojson',
      format: new ol.format.GeoJSON({
         defaultDataProjection :'EPSG:4326', 
         projection: 'EPSG:3857'
   })
});
Related Question