workshop ol geojson format

by Francesco Boccacci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://epsg.io/3003.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<body>
    <div id="map" class="map"></div>
  </body>

CSS

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

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

JavaScript

ol.proj.proj4.register(proj4) 

const firenze_gbw = [1681450.785672498, 4848967.319261061];
const firenze_gmerc = ol.proj.transform(firenze_gbw,"EPSG:3003","EPSG:3857");
const arnoGeoJSON = {
            "type": "FeatureCollection",
            "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
            "features": [
                { 
                    "type": "Feature", 
                    "properties": { }, 
                    "geometry": { 
                        "type": "LineString", 
                        "coordinates": [ [ 1240938.684206065, 5432280.028250196 ], [ 1243365.9897186551, 5432809.622180216 ], [ 1245462.2990249831, 5433052.3527314747 ], [ 1246653.8853675276, 5432897.8878352186 ], [ 1248352.9992263408, 5431750.434320176 ], [ 1252170.4888052328, 5429896.8555651074 ], [ 1255127.3882478427, 5428992.1326013235 ], [ 1257245.7639679215, 5429323.1288075857 ], [ 1259055.2098954888, 5428705.2692225631 ] ] 
                    } 
                }
            ]
}


const geoJSONFormat = new ol.format.GeoJSON({
	featureProjection: 'EPSG:3003', // specifica in che proiezione della mappa (saranno trasformate)
  dataProjection: 'EPSG:3857' // specifica in che proiezione sono i dati originali
});



//creo le features da GeoJSON tramite il metodo readFeatures
const features = geoJSONFormat.readFeatures(arnoGeoJSON);
// costruisco la sorgente del layer vettoriale e passo le features create sopra
const fiumiSource = new ol.source.Vector({
	features
});

//fiumiSource.addFeatures(features);   

// costruisco lo stile
const style = new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 5
          })
        })

const fiumi = new ol.layer.Vector({
	source: fiumiSource,
  style
})
 
const map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          fiumi
        ],
        target: 'map',
        view: new...