ADD: added APP-6 Symbols to the Map

2023-09-05 18:46:34 +02:00
parent 6d2a1d7556
commit 658830bab6
221 changed files with 73498 additions and 21 deletions
--- a/node_modules/milsymbol/examples/openlayers/index.html
+++ b/node_modules/milsymbol/examples/openlayers/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <style type="text/css">
+    html,
+    body,
+    .mymap {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+
+  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
+  <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
+  <script src="../../dist/milsymbol.js"></script>
+  <script src="../situation.json"></script>
+</head>
+
+<body onload="init()">
+  <script>
+    function init() {
+      var iconSize = {
+        "Team/Crew": 5,
+        "Squad": 10,
+        "Section": 15,
+        "Platoon/detachment": 20,
+        "Company/battery/troop": 25,
+        "Battalion/squadron": 30,
+        "Regiment/group": 35,
+        "Brigade": 40,
+        "Division": 45,
+        "Corps/MEF": 50,
+        "Army": 55,
+        "Army Group/front": 60,
+        "Region/Theater": 65,
+        "Command": 70
+      };
+      var vectorSource = new ol.source.Vector({
+        features: (new ol.format.GeoJSON()).readFeatures(situation, { featureProjection: 'EPSG:3857' })
+      });
+
+      var ratio = window.devicePixelRatio || 1;
+      vectorSource.forEachFeature(function (f) {
+        var mysymbol = new ms.Symbol(
+          f.getProperties().SIDC, {
+            uniqueDesignation: f.getProperties().name
+          });
+
+        // Now that we have a symbol we can ask for the echelon and set the symbol size
+        var mycanvas = mysymbol.setOptions({ size: iconSize[mysymbol.getMetadata().echelon] * ratio }).asCanvas();
+
+        f.setStyle(new ol.style.Style({
+          image: new ol.style.Icon(({
+            scale: 1 / ratio,
+            anchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            imgSize: [Math.floor(mysymbol.getSize().width), Math.floor(mysymbol.getSize().height)],
+            img: (mycanvas)
+          }))
+        }));
+      })
+
+      var vectorLayer = new ol.layer.Vector({
+        source: vectorSource
+      });
+
+      var rasterLayer = new ol.layer.Tile({
+        preload: 4,
+        source: new ol.source.OSM()
+      });
+      var map = new ol.Map({
+        layers: [rasterLayer, vectorLayer],
+        target: document.getElementById('map'),
+        view: new ol.View({
+          center: ol.proj.transform([16, 59], 'EPSG:4326', 'EPSG:3857'),
+          zoom: 5
+        })
+      });
+
+    }
+  </script>
+  <div id="map" class="mymap"></div>
+</body>
+
+</html>