../_images/logo_geostyler.png ../_images/OSGeo_community.png

GeoStyler Quickstart

Esta guía de inicio rápido describe los pasos básicos necesarios para empezar a trabajar con GeoStyler: instalar GeoStyler y agregar un primer componente de interfaz de usuario a la aplicación de reacción.

Un tutorial para principiantes completo se puede encontrar en localhost/geostyler.

GeoStyler facilita el estilo de los datos geográficos en cualquier página web. La interfaz de usuario es independiente de cualquier formato de estilo y debe ser utilizable para, por ejemplo, OpenLayer o SLD.

Instalación de GeoStyler

Para utilizar GeoStyler, es necesario tener node.js instalado en su sistema. Las instrucciones sobre cómo instalar node.js se pueden encontrar en el nodo.js página de inicio.

Se recomienda instalar GeoStyler para cada proyecto por separado. En estas secciones se describen los pasos necesarios.

La forma más sencilla de instalar GeoStyler es utilizar npm que viene con la instalación node.js. Simplemente ejecute el siguiente comando desde la raíz del proyecto:

npm i geostyler

Asegúrese de que todos los pares de dependencias estén instaladas en las versiones especificadas:

npm i react react-dom antd ol

No olvide instalar los analizadores que desea utilizar:

npm i geostyler-sld-parser

Integrar GeoStyler

Importar el componente GeoStyler Style en la aplicación de la siguiente manera:

import { Style } from 'geostyler';

El componente Style proporciona una variedad de funciones de estilo.

Después de importar, puede usarlo en el método de representación de la siguiente manera:

<Style
    compact={true}
/>

El componente Style ahora debería estar visible en el navegador.

../_images/quickstart_compact.png

Integrar geostyler-sld-parser

Para editar un SLD existente a través de GeoStyler, primero se tiene que importar y crear una instancia del geostyler-sld-parser.

import SLDParser from 'geostyler-sld-parser';
const parser = new SLDParser();

Después, podemos leer un SLD existente en el formato legible GeoStyler.

parser.readStyle('<?xml version="1.0" encoding="UTF-8"?>' +
                    '<sld:StyledLayerDescriptor xmlns:sld="http://www.opengis.net/sld" xmlns="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">' +
                        '<sld:NamedLayer>' +
                            '<sld:Name>Default Styler</sld:Name>' +
                            '<sld:UserStyle>' +
                                '<sld:Name>Default Styler</sld:Name>' +
                                '<sld:Title>Gravel_Program_2016</sld:Title>' +
                                '<sld:FeatureTypeStyle>' +
                                    '<sld:Name>name</sld:Name>' +
                                    '<sld:Rule>' +
                                    '<sld:MinScaleDenominator>1.0</sld:MinScaleDenominator>' +
                                    '<sld:MaxScaleDenominator>1.0E7</sld:MaxScaleDenominator>' +
                                    '<sld:LineSymbolizer>' +
                                        '<sld:Stroke>' +
                                            '<sld:CssParameter name="stroke">#8000FF</sld:CssParameter>' +
                                            '<sld:CssParameter name="stroke-width">3.000</sld:CssParameter>' +
                                        '</sld:Stroke>' +
                                    '</sld:LineSymbolizer>' +
                                    '</sld:Rule>' +
                                '</sld:FeatureTypeStyle>' +
                            '</sld:UserStyle>' +
                        '</sld:NamedLayer>' +
                    '</sld:StyledLayerDescriptor>')
    .then(style => console.log(style));

Para conectar este estilo con la interfaz de usuario, tenemos que almacenarlo en una variable de estado y pasarlo a nuestro componente Style. Después de definir myStyle como una variable de estado, puede usarla de la siguiente manera:

parser.readStyle('<?xml version="1.0" encoding="UTF-8"?>' +
                    '<sld:StyledLayerDescriptor xmlns:sld="http://www.opengis.net/sld" xmlns="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">' +
                        '<sld:NamedLayer>' +
                            '<sld:Name>Default Styler</sld:Name>' +
                            '<sld:UserStyle>' +
                                '<sld:Name>Default Styler</sld:Name>' +
                                '<sld:Title>Gravel_Program_2016</sld:Title>' +
                                '<sld:FeatureTypeStyle>' +
                                    '<sld:Name>name</sld:Name>' +
                                    '<sld:Rule>' +
                                    '<sld:MinScaleDenominator>1.0</sld:MinScaleDenominator>' +
                                    '<sld:MaxScaleDenominator>1.0E7</sld:MaxScaleDenominator>' +
                                    '<sld:LineSymbolizer>' +
                                        '<sld:Stroke>' +
                                            '<sld:CssParameter name="stroke">#8000FF</sld:CssParameter>' +
                                            '<sld:CssParameter name="stroke-width">3.000</sld:CssParameter>' +
                                        '</sld:Stroke>' +
                                    '</sld:LineSymbolizer>' +
                                    '</sld:Rule>' +
                                '</sld:FeatureTypeStyle>' +
                            '</sld:UserStyle>' +
                        '</sld:NamedLayer>' +
                    '</sld:StyledLayerDescriptor>')
    .then(style => this.setStyle({myStyle}));

// ...

<Style
    compact={true}
    style={myStyle}
/>

La interfaz de usuario de GeoStyler ahora debe coincidir con el estilo que se definió como SLD.

Para obtener el estilo editado como SLD desde el componente Style se puede utilizar el método writeStyle() del geostyler-sld-parser dentro del método onStyleChange() del componente Style.

parser.readStyle('<?xml version="1.0" encoding="UTF-8"?>' +
                    '<sld:StyledLayerDescriptor xmlns:sld="http://www.opengis.net/sld" xmlns="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">' +
                        '<sld:NamedLayer>' +
                            '<sld:Name>Default Styler</sld:Name>' +
                            '<sld:UserStyle>' +
                                '<sld:Name>Default Styler</sld:Name>' +
                                '<sld:Title>Gravel_Program_2016</sld:Title>' +
                                '<sld:FeatureTypeStyle>' +
                                    '<sld:Name>name</sld:Name>' +
                                    '<sld:Rule>' +
                                    '<sld:MinScaleDenominator>1.0</sld:MinScaleDenominator>' +
                                    '<sld:MaxScaleDenominator>1.0E7</sld:MaxScaleDenominator>' +
                                    '<sld:LineSymbolizer>' +
                                        '<sld:Stroke>' +
                                            '<sld:CssParameter name="stroke">#8000FF</sld:CssParameter>' +
                                            '<sld:CssParameter name="stroke-width">3.000</sld:CssParameter>' +
                                        '</sld:Stroke>' +
                                    '</sld:LineSymbolizer>' +
                                    '</sld:Rule>' +
                                '</sld:FeatureTypeStyle>' +
                            '</sld:UserStyle>' +
                        '</sld:NamedLayer>' +
                    '</sld:StyledLayerDescriptor>')
    .then(style => this.setStyle({myStyle}));

// ...

<Style
    compact={true}
    style={myStyle}
    onStyleChange={gsStyle => {
        parser.writeStyle(gsStyle)
            .then(sld => console.log(sld));
    }}
/>

Cosas para probar

Como siguiente paso, puede intentar agregar un componente OpenLayers map and connect the Style al mapa, para que pueda ver directamente los cambios realizados en el mapa.

¿Qué sigue?

Echa un vistazo a estos otros recursos sobre esta aplicación.