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>
--- a/node_modules/milsymbol/examples/openlayers/preview.png
+++ b/node_modules/milsymbol/examples/openlayers/preview.png
--- a/node_modules/milsymbol/examples/openlayers/readme.md
+++ b/node_modules/milsymbol/examples/openlayers/readme.md
@@ -0,0 +1,7 @@
+## milsymbol in open layers 4 - ol.style.Icon()
+
+Using the asCanvas() method in milsymbol makes it possible to assign the output from milsymbol as an image source. This way you can use the output from milsymbol in ol.style.Icon() in Open Layers. This should be able to handle a very large number of symbols.
+
+If a style function is used for the symbols some sort of symbol cache should be used so that it won't have to regenerate all symbols at each interaction with the map. In this example however each symbol is set as a style on each feature.
+
+This example uses Open Layers v4.6.5.