I get the following stack trace when trying to use projection in View (in a hello world project that works otherwise without it): “EPSG:102008” in openlayers View:
View.js:1474 Uncaught TypeError: Cannot read property 'getExtent' of null
at createResolutionConstraint (View.js:1474)
at View.applyOptions_ (View.js:326)
at new View (View.js:312)
at Object.parcelRequire.index.js.ol/ol.css (index.js:43)
view: new View({
center: [-10997148, 4569099],
zoom: 5,
projection: "EPSG:102008"
})
without projection the map displays, with, an empty browser pane and the exception above.
update:
These first two answers helped me to get it working. I was not able to use transform (kept giving me an exception about using finite numbers), but simply used proj4() to project the original point. How would I specify a center point in albers format?
proj4.defs('ESRI:102008', '+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs');
register(proj4);
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
new TileLayer({
source: new TileArcGISRest({
url: esriUrl
})
})
],
view: new View({
center: proj4('EPSG:3857', 'ESRI:102008', [-10997148, 4569099]),
// center: [-10997148, 4569099],
zoom: 5,
projection: 'ESRI:102008'
})
});
update update:
also discovered I can do this:
center: proj4('EPSG:4326', 'ESRI:102008', [-79.995888, 40.440624]),
The code is "ESRI:102008" (not EPSG). See https://epsg.io/102008 for the proj4 definition. Your center coordinates appear to be web mercator and will need to be transformed.
proj4.defs("ESRI:102008","+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs");
ol.proj.proj4.register(proj4);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-10997148, 4569099], "EPSG:3857", "ESRI:102008"),
zoom: 5,
projection: "ESRI:102008"
})
});
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>