Skip to content
Snippets Groups Projects
Commit a4b0d61b authored by ncastejon's avatar ncastejon
Browse files

Add base later with vector tiles

parent af7245b9
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 1
− 22
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
+ 2
− 1
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
+ 2398
− 2211
View file @ a4b0d61b
This diff is collapsed.
webapp/package.json
+ 1
− 0
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
+ 121
− 101
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
+ 1
− 0
View file @ a4b0d61b
/* SystemJS module definition */
declare var module: NodeModule;
declare module 'ol-mapbox-style';
interface NodeModule {
id: string;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment