// Le <div> de l'objet map est rempli automatiquement par un évènement lors de la création de l'objet map.
map.getTargetElement();
// Appel de l'API JS sans URL via Observable
ol = require('openlayers');
// Appel de la feuille CSS
html`<link href='https://unpkg.com/openlayers/css/ol.css' rel='stylesheet' />`
cercle = new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
}),
stroke: new ol.style.Stroke({color: 'green', width: 4})
});
// Objets vectoriels
styles = ({
'Point': new ol.style.Style({
image: cercle
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 4
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [6],
width: 4
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 4
}),
fill: new ol.style.Fill({
color: 'rgba(0,240,0,0.2)'
})
})
});
//Fonction affectant un style aux objets à partir de leur type
styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
// Création d'un objet JSON contenant les objets vectoriels : point avec un cercle, ligne et polygone
geojsonObject = ({
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:4326'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-1.15, 46.16]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[-1.18, 46.16], [-1.16, 46.14]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-1, 46.17], [-1.15, 46.18], [-1.14, 46.17]]]
}
}]
});
// Création d'une couche de type Vector pour stocker les objets
vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
defaultDataProjection: 'EPSG:4326',
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'})
});
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
// Extension max de la carte
extent = ol.proj.transformExtent([-1.6, 46, -1.2, 46.6], 'EPSG:4326', 'EPSG:3857');
// Définition de l'objet map
// Source de la couche du fond : OSM (OL utilise ses propres serveurs par défaut)
map = {
let map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target: html`<div style='height:500px;'></div>`,
view: new ol.View({
center: ol.proj.fromLonLat([-1.14, 46.16]),
zoom: 4
}),
controls: ol.control.defaults().extend([
new ol.control.OverviewMap(),
new ol.control.ZoomSlider(),
new ol.control.ZoomToExtent({
extent: extent
}),
new ol.control.Rotate(),
new ol.control.ScaleLine(),
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:2154'
})
])
});
// Astuce pour dimensionner automatiquement la hauteur du <div> d'afichage une fois l'objet map créé
setTimeout(() => map.updateSize(), 1);
return map;
};
// Inspiration : https://observablehq.com/@tmcw/using-openlayers
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
