Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

63
Views
Openlayers Vector layer rendering coordinates outside typical boundaries

I started working on a Vector Layer to render SQL Spatial Data in OpenLayers. When rendering this example (see Json) everything works perfectly fine. See code below:

    //creates source to get json data from
let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON()
});
//set focus of the camera on this source
vSource.on('addfeature', () => {
  this.map.getView().fit(vSource.getExtent());
  console.log(this.map.getView().getCenter());
});
//add source to layer and afterwards load it into map
let vLayer = new VectorLayer({
  source: vSource,
  visible: true
});
//layer styling
vLayer.setStyle(new Style({
  stroke: new Stroke({
    color: '#FF5733',
    width: 8  
  })
}));
this.map.addLayer(vLayer);

Map instantiation looks as following:

this.map = new Map({
  view: new View({
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

But when i want to render this json file I am facing a blank map. Focus wont get set and not even errors appear. I am assuming its all about the boundaries? How can Polygon coordinates get rendered which are our outside default boundaries, if there is such thing as "default"?

For example:

[12058.4521484375, 5345.98388671875],
[11408.95703125, 5345.98388671875]

Reading through the API I can deduce that the option extent may be key to solving this issue?

Best regards
A newbie at OpenLayers

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Openlayers default projection is EPSG:3857. I think your geojson and center of map is EPSG:4326.

this.map = new Map({
  view: new View({
    projection: 'EPSG:4326',
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON({ featureProjection: 'EPSG:3857' })
});
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs