OL5.3 | GeoJSON with proj4

by Dennis Bauszus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 100%;
  width: 100%;
}

JavaScript

proj4.defs("ESRI:102326", "+proj=lcc +lat_1=44.33333333333334 +lat_2=46 +lat_0=43.66666666666666 +lon_0=-120.5 +x_0=2500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");

var geoJson = {
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::102326"
        }
    },
    "features": [{
        "type": "Feature",
        "properties": {
            "categorie": "parc"
        },
        "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
                [
                    [
                        [278470.68926461664, 5041731.2687441008],
                        [278466.72182315879, 5041776.0730696879],
                        [278559.64738545474, 5041605.2565783858],
                        [278461.04697965976, 5041620.24802572],
                        [278438.46308213036, 5041662.6521195797],
                        [278422.96449065564, 5041694.0351494215],
                        [278470.68926461664, 5041731.2687441008]
                    ]
                ]
            ]
        }
    }]
};

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(geoJson, {
            dataProjection: 'EPSG:102326',
            featureProjection: 'EPSG:3857'
        })
    })
});

var map = new ol.Map({
    target: 'map',
    controls: [],
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    }), vectorLayer],
    view: new ol.View({
        center: [0, 0],
        zoom: 10
    })
});

map.getView().fit(
    vectorLayer.getSource().getExtent(),
    map.getSize());