search

hslayers / hslayers-ng

User interface and map building extensions for OpenLayers
https://ng.hslayers.org/
MIT License
37 stars 20 forks source link

Rewrite styler panel to fully support creating SLD styles. #1822

Closed raitisbe closed 3 years ago

raitisbe commented 3 years ago

Includes: https://github.com/hslayers/hslayers-ng/issues/1754 https://github.com/hslayers/hslayers-ng/issues/1073

raitisbe commented 3 years ago

From https://docs.geoserver.org/latest/en/user/styling/sld/cookbook/index.html examples and https://github.com/geostyler/geostyler-sld-parser we get following insights.

The SLD can be converted to and from JSON form:

{
 "name": "SLD Cook Book: Label halo",
 "rules": [
  {
   "name": "",
   "symbolizers": [
    {
     "kind": "Fill",
     "color": "#40FF40",
     "outlineColor": "#FFFFFF",
     "outlineWidth": 2
    },
    {
     "kind": "Text",
     "label": "{{name}}",
     "haloWidth": 3,
     "haloColor": "#FFFFFF"
    }
   ]
  }
 ]
}

Rules can have filter and scaleDenominators. When excluding symbolizers attribute, a rule can be like this: 

{
 "name": "Small",
 "filter": [
  ">",
  "pop",
  "500000"
 ],
 "scaleDenominator": {
  "min": 200000000
 }
}

There are multiple symbolizer kinds possible with their possible attributes:

Mark

 {
  "kind": "Mark",
  "wellKnownName": "circle",
  "color": "#CC3300",
  "radius": 2,
  "strokeColor": "#000000",
  "strokeWidth": 2,
  "rotate": 45,
  "fillOpacity": 0.2
 }

Icon

 {
  "kind": "Icon",
  "image": "smileyface.png",
  "size": 32
 }

Text

 {
  "kind": "Text",
  "label": "{{name}}",
  "color": "#FFFFFF",
  "offset": [
   0,
   25
  ],
  "font": [
   "Arial"
  ],
  "size": 14,
  "fontStyle": "normal",
  "fontWeight": "bold",
  "rotate": -45,
  "haloWidth": 3,
  "haloColor": "#FFFFFF"
 }

Line

 {
  "kind": "Line",
  "color": "#009933",
  "width": 2,
  "cap": "round",
  "dasharray": [
   5,
   15
  ],
  "perpendicularOffset": -2,
  "graphicStroke": {
   "kind": "Mark",
   "wellKnownName": "circle",
   "radius": 2.5,
   "strokeColor": "#000033",
   "strokeWidth": 1
  },
  "dashOffset": 7.5
 }

Fill

 {
  "kind": "Fill",
  "color": "#0000CC",
  "fillOpacity": 0.5,
  "outlineColor": "#000000",
  "outlineWidth": 1,
  "opacity": 0,
  "graphicFill": {
   "kind": "Mark",
   "wellKnownName": "shape://times",
   "radius": 8,
   "strokeColor": "#990099",
   "strokeWidth": 1
  }
 }

For Each of the symbolizers we can have our own angular component (which is decided by kind attribute), which sets the values for respective attributes: colors, line styles etc. It all needs to feed into a common json object in the end which will be used to create the SLD definition in XML format using https://github.com/geostyler/geostyler-sld-parser

raitisbe commented 3 years ago

The demo of geostyler using react https://geostyler.github.io/geostyler-demo/