Commit ff11b761 authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Add a line layer for the frontier between Metropole and IGN satellite images.

parent aab9b002
This diff is collapsed.
......@@ -19,6 +19,7 @@ export class MapService {
eventPopupAdded = false;
mapIsConstructed: boolean = false;
popup: mapboxgl.Popup;
// Map features colors
featureColor: string = '#1d92ff';
......@@ -130,7 +131,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
type: 'geojson',
data: this.mapOptions.geojson,
});
this.addDataLayer();
// this.addDataLayer();
}
} else {
if (this.mapOptions.vectorService && this.mapOptions.vectorService.url) {
......@@ -143,7 +144,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
tiles: [url],
});
this.addDataLayer();
// this.addDataLayer();
}
}
}
......@@ -216,6 +217,90 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Add the raster (WMS) layer
addWMSLayer() {
// const polygonShape = polygon([[
// [1647472.538427598774433, 3867539.236738075967878],
// [1656149.591045931447297, 3925253.242399890907109], [1673432.08156061777845, 3922604.02275731228292],
// [1672548.20371083682403, 3916819.587899864651263], [1678303.04124740511179, 3915930.268553881905973],
// [1677416.643843154655769, 3910150.66299252351746], [1694663.155232969438657, 3907464.046523998957127],
// [1691977.944659303408116, 3890157.666010212618858], [1697713.46819336945191, 3889258.274896244518459],
// [1694134.930576886516064, 3866238.741810463834554], [1671244.189017552649602, 3869795.743182665668428],
// [1670367.001061368035153, 3864045.317551260814071], [1647472.538427598774433, 3867539.236738075967878]
// ]]);
// console.log(polygonShape);
// const converted = projection.toWgs84(polygonShape);
// console.log(converted);
// Add the Metropole polygon layer
this._map.addSource('polygon-metropole', {
type: 'geojson',
lineMetrics: true,
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
name: 'Métropole',
},
geometry: {
type: 'LineString',
coordinates: [[4.664889456606686, 45.546883237913455], [4.677293671678624, 45.96069089388331],
[4.844965771994277, 45.958104771794908], [4.843771328197183, 45.922124012308018],
[4.908214607359763, 45.921064482585919], [4.906980046164964, 45.885084194120161],
[5.113048045465636, 45.881451508470512], [5.107934333793898, 45.746532535709612],
[5.172169234171356, 45.745323877108788], [5.166227999823527, 45.592416594858285],
[4.884346903146746, 45.597449627708009], [4.882529381431865, 45.543477090694203],
[4.664889456606686, 45.546883237913455]],
},
},
],
},
});
this._map.addLayer({
id: 'polygon-metropole',
type: 'line',
source: 'polygon-metropole',
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': 'black',
'line-width': 3,
'line-offset': -1,
},
});
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
closeOnMove: true,
});
this._map.on('mouseenter', 'polygon-metropole', (e) => {
// Change the cursor style as a UI indicator.
this._map.getCanvas().style.cursor = 'pointer';
const coordinates = e.lngLat;
// Populate the popup and set its coordinates
// based on the feature found.
// Create a popup, but don't add it to the map yet.
popup
.setLngLat(coordinates)
.setHTML('<p>Deux couches ortho existent pour l\'affichage de la vue staellite:</br> ' +
'* la couche de la métropole de Lyon</br> * la couche IGN pour le reste du territoire.</p>')
.addTo(this._map);
});
this._map.on('mouseleave', 'polygon-metropole', () => {
this._map.getCanvas().style.cursor = '';
popup.remove();
});
this._map.addSource('wms-source', {
type: 'raster',
tiles: [
......@@ -225,12 +310,12 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
tileSize: 256,
});
this._map.addLayer({
id: 'wms-layer',
type: 'raster',
source: 'wms-source',
paint: {},
});
// this._map.addLayer({
// id: 'wms-layer',
// type: 'raster',
// source: 'wms-source',
// paint: {},
// });
}
......
......@@ -32,7 +32,10 @@
{
"id": "satellite-tiles-ign",
"type": "raster",
"source": "raster-tiles-ign"
"source": "raster-tiles-ign",
"paint": {
"raster-saturation": -0.5
}
},
{
"id": "satellite-tiles",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment