Skip to content

GitLab

Commit a4b0d61b authored by ncastejon's avatar ncastejon
Browse files

Add base later with vector tiles

parent af7245b9
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ a4b0d61b
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@types/geojson": {
"version": "7946.0.3",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz",
"integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug=="
},
"@types/leaflet": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.7.tgz",
"integrity": "sha512-y9KEOzVB1uIPVPOc8FBqQjBvFykb/WhNfHDN6eTL8FlUy6F7FaqGMWHj5OhDSBHMWoqc70eR3FGiXdzbg1rqtg==",
"requires": {
"@types/geojson": "7946.0.3"
}
},
"leaflet": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
"integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
}
}
"lockfileVersion": 1
}
webapp/.angular-cli.json
View file @ a4b0d61b
......@@ -23,7 +23,8 @@
"../node_modules/ol/ol.css"
],
"scripts": [
"../node_modules/ol-layerswitcher/dist/ol-layerswitcher.js"
"../node_modules/ol-layerswitcher/dist/ol-layerswitcher.js",
"../node_modules/ol-mapbox-style/dist/olms.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
......
webapp/package-lock.json
View file @ a4b0d61b
This diff is collapsed.
webapp/package.json
View file @ a4b0d61b
......@@ -37,6 +37,7 @@
"font-awesome": "^4.7.0",
"ol": "^4.6.5",
"ol-layerswitcher": "^2.0.0",
"ol-mapbox-style": "^2.10.4",
"proj4": "^2.4.4",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
......
webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
View file @ a4b0d61b
......@@ -12,11 +12,14 @@ import olTileWMS from 'ol/source/tilewms';
import olSourceXYZ from 'ol/source/xyz';
import olPoint from 'ol/geom/point';
import olLayerTile from 'ol/layer/tile';
import olLayerVectorTile from 'ol/layer/vectortile';
import olLayerVector from 'ol/layer/vector';
import olTileImage from 'ol/source/tileimage';
import olFormatGeoJson from 'ol/format/geojson';
import olFormatWFS from 'ol/format/wfs';
import olFormatMVT from 'ol/format/mvt';
import olSourceVector from 'ol/source/vector';
import olSourceVectorTile from 'ol/source/vectortile';
import olSourceCluster from 'ol/source/cluster';
import olTileGrid from 'ol/tilegrid/tilegrid';
import olProj from 'ol/proj';
......@@ -29,6 +32,8 @@ import olSelect from 'ol/interaction/select';
import olModify from 'ol/interaction/modify';
import olInteraction from 'ol/interaction';
import olDragRotateAndZoom from 'ol/interaction/dragrotateandzoom';
import { apply } from 'ol-mapbox-style';
import { applyStyle } from 'ol-mapbox-style';
@Component({
selector: 'app-dataset-map',
......@@ -73,27 +78,27 @@ export class DatasetMapComponent implements OnInit {
// // Set icon marker
// const myIcon = L.icon({
// iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png'
// });
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
const overlay = new olOverlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
// // });
// const container = document.getElementById('popup');
// const content = document.getElementById('popup-content');
// const closer = document.getElementById('popup-closer');
// // const overlay = new olOverlay({
// // element: container,
// // autoPan: true,
// // autoPanAnimation: {
// // duration: 250
// // }
// // });
// /**
// * Add a click handler to hide the popup.
// * @return {boolean} Don't follow the href.
// */
// closer.onclick = function () {
// // overlay.setPosition(undefined);
// closer.blur();
// return false;
// };
const defaultStyle = {
'Point': new olStyle({
......@@ -162,29 +167,39 @@ export class DatasetMapComponent implements OnInit {
};
const map = new olMap({
target: 'map',
overlays: [overlay],
interactions: olInteraction.defaults().extend([
new olDragRotateAndZoom()
]),
});
// const map = new olMap({
// target: 'map',
// // overlays: [overlay],
// interactions: olInteraction.defaults().extend([
// new olDragRotateAndZoom()
// ]),
// });
const planLayer = new olLayerTile({
source: new olSourceXYZ({
attributions: ['Grand Lyon'],
url: 'https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon@GoogleMapsCompatible/{z}/{x}/{-y}.png',
})
});
// const planLayer = new olLayerTile({
// source: new olSourceXYZ({
// attributions: ['Grand Lyon'],
// url: 'https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon@GoogleMapsCompatible/{z}/{x}/{-y}.png',
// })
// });
olProj.setProj4(proj4);
proj4.defs('EPSG:4171', '+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs ');
map.setView(new olView({
maxZoom: 18,
center: olProj.fromLonLat([4.85, 45.75]),
zoom: 12
}));
map.addLayer(planLayer);
// map.setView(new olView({
// maxZoom: 18,
// center: olProj.fromLonLat([4.85, 45.75]),
// zoom: 12
// }));
// map.addLayer(planLayer);
const map = apply('map', 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json');
/* Lyon image */
......@@ -198,81 +213,86 @@ export class DatasetMapComponent implements OnInit {
});
const layerCluster = new olLayerVector({
source: vectorSource,
style: styleFunction,
zIndex: 1000
});
const modify = new olModify({ source: vectorSource });
map.addInteraction(modify);
const modifiedFeatures = [];
modify.on('modifyend', function(e) {
const features = e['features'].getArray();
console.log(features.length);
for (let i = 0; i < features.length; i ++) {
const rev = features[i].getRevision();
if (rev > 1) {
console.log('feature with revision:' + rev + ' has been modified');
modifiedFeatures.push(features[i]);
}
}
console.log(modifiedFeatures);
});
// const modify = new olModify({ source: vectorSource });
// map.addInteraction(modify);
// const modifiedFeatures = [];
// modify.on('modifyend', function(e) {
// const features = e['features'].getArray();
// console.log(features.length);
// for (let i = 0; i < features.length; i ++) {
// const rev = features[i].getRevision();
// if (rev > 1) {
// console.log('feature with revision:' + rev + ' has been modified');
// modifiedFeatures.push(features[i]);
// }
// }
// console.log(modifiedFeatures);
// });
map.addLayer(layerCluster);
map.setView(new olView({
maxZoom: 18,
zoom: 0
}));
// const displayFeatureInfo = function (pixel, coordinate) {
// const features = [];
// map.forEachFeatureAtPixel(pixel, function (feature, layer) {
// console.log(feature);
// content.innerHTML = '<p>You clicked here:</p><code>' + feature['values_'].identifiant +
// '</code>';
// // overlay.setPosition(coordinate);
// });
const displayFeatureInfo = function (pixel, coordinate) {
const features = [];
map.forEachFeatureAtPixel(pixel, function (feature, layer) {
console.log(feature);
content.innerHTML = '<p>You clicked here:</p><code>' + feature['values_'].identifiant +
'</code>';
overlay.setPosition(coordinate);
});
// };
};
// // map.on('click', function (evt) {
// // const coordinate = evt['coordinate'];
// // const pixel = evt['pixel'];
// // displayFeatureInfo(pixel, coordinate);
// // });
// map.on('click', function (evt) {
// const coordinate = evt['coordinate'];
// const pixel = evt['pixel'];
// displayFeatureInfo(pixel, coordinate);
// });
// WMS Functionnality -----------------------
const wmsSource = new olTileWMS({
url: 'https://download.data.grandlyon.com/wms/grandlyon?',
params: { 'LAYERS': metadata.uri[0].name, 'TILED': true },
// Countries have transparency, so do not fade tiles:
// transition: 0
});
const layerTile = new olLayerTile({
source: wmsSource
});
map.on('click', function (evt) {
// // WMS Functionnality -----------------------
// const wmsSource = new olTileWMS({
// url: 'https://download.data.grandlyon.com/wms/grandlyon?',
// params: { 'LAYERS': metadata.uri[0].name, 'TILED': true },
// // Countries have transparency, so do not fade tiles:
// // transition: 0
// });
// const layerTile = new olLayerTile({
// source: wmsSource
// });
// map.on('click', function (evt) {
const viewResolution = /** @type {number} */ (map.getView().getResolution());
console.log(viewResolution);
// const viewResolution = /** @type {number} */ (map.getView().getResolution());
// console.log(viewResolution);
const url = wmsSource.getGetFeatureInfoUrl(
evt['coordinate'], viewResolution, 'EPSG:3857',
{ 'INFO_FORMAT': 'text/html' });
console.log(url);
if (url) {
content.innerHTML = '<p>You clicked here:</p><code>' + url +
'</code>';
// const url = wmsSource.getGetFeatureInfoUrl(
// evt['coordinate'], viewResolution, 'EPSG:3857',
// { 'INFO_FORMAT': 'text/html' });
// console.log(url);
// if (url) {
// content.innerHTML = '<p>You clicked here:</p><code>' + url +
// '</code>';
}
});
}
// }
// });
// }
onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.nom) {
layer.bindPopup(feature.properties.nom);
}
if (feature.properties && feature.properties.odentifiant) {
layer.bindPopup(feature.properties.identifiant);
}
// onEachFeature(feature, layer) {
// // does this feature have a property named popupContent?
// if (feature.properties && feature.properties.nom) {
// layer.bindPopup(feature.properties.nom);
// }
// if (feature.properties && feature.properties.odentifiant) {
// layer.bindPopup(feature.properties.identifiant);
// }
// }
}
}
webapp/src/typings.d.ts
View file @ a4b0d61b
/* SystemJS module definition */
declare var module: NodeModule;
declare module 'ol-mapbox-style';
interface NodeModule {
id: string;
}
Markdown is supported
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