Rendering test for an icon

2018-11-10 09:36:23 -07:00
parent 7dc5bf3e8d
commit f67e5642ab
6 changed files with 66 additions and 8 deletions
--- a/rendering/cases/icon-symbol/expected.png
+++ b/rendering/cases/icon-symbol/expected.png
--- a/rendering/cases/icon-symbol/index.html
+++ b/rendering/cases/icon-symbol/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="main.js"></script>
+  </body>
+  </script>
+</html>
--- a/rendering/cases/icon-symbol/main.js
+++ b/rendering/cases/icon-symbol/main.js
@@ -0,0 +1,44 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
+import {Vector as VectorSource, OSM} from '../../../src/ol/source.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Feature from '../../../src/ol/Feature.js';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import {Style, Icon} from '../../../src/ol/style.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    }),
+    new VectorLayer({
+      style: function() {
+        return new Style({
+          image: new Icon({
+            src: '/data/icon.png',
+            anchor: [0.5, 46],
+            anchorXUnits: 'fraction',
+            anchorYUnits: 'pixels'
+          })
+        });
+      },
+      source: new VectorSource({
+        features: [
+          new Feature(
+            new Point(center)
+          )
+        ]
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();
--- a/rendering/data/icon.png
+++ b/rendering/data/icon.png