init

src/app.js

@@ -0,0 +1,145 @@
+import Map from 'ol/Map.js';
+import View from 'ol/View.js';
+import {all as allStrategy} from 'ol/loadingstrategy';
+import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM.js';
+import XYZ from 'ol/source/XYZ';
+import {fromLonLat} from 'ol/proj.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorTileLayer from 'ol/layer/VectorTile.js';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import OSMXML from 'ol/format/OSMXML.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
+
+
+const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
+
+
+var styles = {
+	'amenity': {
+		'parking': new Style({
+			stroke: new Stroke({
+				color: 'rgba(170, 170, 170, 1.0)',
+				width: 1
+			}),
+			fill: new Fill({
+				color: 'rgba(170, 170, 170, 0.3)'
+			})
+		})
+	},
+	'building': {
+		'.*': new Style({
+			zIndex: 100,
+			stroke: new Stroke({
+				color: 'rgba(246, 99, 79, 1.0)',
+				width: 1
+			}),
+			fill: new Fill({
+				color: 'rgba(246, 99, 79, 0.3)'
+			})
+		})
+	},
+	'highway': {
+		'service': new Style({
+			stroke: new Stroke({
+				color: 'rgba(255, 255, 255, 1.0)',
+				width: 2
+			})
+		}),
+		'.*': new Style({
+			stroke: new Stroke({
+				color: 'rgba(255, 255, 255, 1.0)',
+				width: 3
+			})
+		})
+	},
+	'landuse': {
+		'forest|grass|allotments': new Style({
+			stroke: new Stroke({
+				color: 'rgba(140, 208, 95, 1.0)',
+				width: 1
+			}),
+			fill: new Fill({
+				color: 'rgba(140, 208, 95, 0.3)'
+			})
+		})
+	},
+	'natural': {
+		'tree': new Style({
+			image: new CircleStyle({
+				radius: 2,
+				fill: new Fill({
+					     color: 'rgba(140, 208, 95, 1.0)'
+					   }),
+				stroke: null
+			})
+		})
+	}
+};
+
+var vectorSource = new VectorTileSource({
+	format: new OSMXML(),
+	url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
+	/*loader:  function(extent, resolution, projection) {
+		var proj = projection.getCode();
+		var url = 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1';
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET', url);
+		var onError = function(e) {
+			vectorSource.removeLoadedExtent(extent);
+		}
+		xhr.onerror = onError;
+		xhr.onload = function() {
+			if (xhr.status == 200) {
+				vectorSource.addFeatures(
+				vectorSource.getFormat().readFeatures(xhr.responseText));
+			} else {
+				onError();
+			}
+		}
+		xhr.send();
+	},*/
+	strategy: allStrategy
+})
+
+var map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      })
+      //source: OSM()
+    }),
+    new VectorTileLayer({
+      source: vectorSource,
+      style: function(feature) {
+        for (var key in styles) {
+          var value = feature.get(key);
+          if (value !== undefined) {
+            for (var regexp in styles[key]) {
+              if (new RegExp(regexp).test(value)) {
+                return styles[key][regexp];
+              }
+            }
+          }
+        }
+        return null;
+      }
+    })
+  ],
+  view: new View({
+    center: coordinate_cccamp19,
+    zoom: 17
+  })
+});
+
+
+
+document.map = map;
+
+module.export= {
+	mapa: map
+}

src/app.scss

@@ -0,0 +1,13 @@
+@import "~ol/ol.css";
+
+html, body {
+	margin: 0;
+	height: 100%;
+}
+#map {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+}
+