Archivo configuración Geoportal
La configuración general del geoportal –mapas base, configuración de zoom, diseño, etc.– se realiza en el archivo de configuración. Este archivo se encuentra dentro del proyecto en la siguiente ruta src/config/production.js. Si se desean hacer ajustes en un entorno de desarrollo también se puede modificar src/config/development.js.
El geoportal tiene una configuración por defecto que se puede redefinir. Aquí se explican los cambios que se le pueden aplicar:
Marca (branding)
Propiedad para definir el logo de la barra de herramientas y el nombre que aparece en ella. También se puede añadir un enlace al ícono convirtiéndolo en un botón.
branding: {
header: {
logo: require('assets/logo.png'), // jpg, png, svg
text: 'Geoportal Demo',
link: 'https://www.infraplan.cat'
}
}
Catàlogo
Rutas de donde se obtienen los datos del catálogo. Si el catálogo es el de pestañas (antiguo), la ruta será (...)/giscube-admin/geoportal/category, si se utiliza el catálogo de árbol, será (...)/giscube-admin/geoportal/category/catalog.
catalog: {
categories: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/category/catalog/',
search: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/catalog/',
base: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/',
auth: true
}
Mapas Base
El geoportal puede tener diferentes mapas base que se cambian mediante el control de capas. Para agregarlos, se define un array con todos los mapas que se deseen agregar.
Si hay mapas de Google, se debe definir la API-key y indicar que es de tipo googleMutant.
El mapa base que se carga por defecto debe tener la propiedad default: true.
basemaps: [
{
default: true,
type: 'tilelayer',
name: 'Mapa base de fons',
url: 'https://atilemaps.icgc.cat/mapfactory/wmts/topo_suau/CAT3857/{z}/{x}/{y}.png',
attribution: '© <a href="https://www.icgc.cat">ICGC</a>',
maxNativeZoom: 18,
maxZoom: 21
},
{
type: 'tilelayer',
name: 'Cartografia oficial',
url: 'https://xxxxxxx.xxxxxxx.xxx/basemaps/carto2015/{z}/{x}/{y}.png',
attribution: '© <a href="http://www.xxxx.cat/">Ajuntament de xxxx</a>',
maxZoom: 21,
minZoom: 15
},
{
type: 'tilelayer',
name: 'OpenStreetMap',
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxNativeZoom: 18,
maxZoom: 21
},
{
type: 'tilelayer',
name: 'Carto DB',
url: 'https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png',
attribution: '© <a href="http://mapbox.com/about/maps" target="_blank">Carto</a>',
maxNativeZoom: 18,
maxZoom: 21
},
{
type: 'googleMutant',
name: 'Roadmap Google',
options: {
type: 'roadmap'
},
maxNativeZoom: 18,
maxZoom: 21
}
]
Capas Base
Se pueden agregar capas que se carguen por defecto al abrir el geoportal. Para hacerlo, se define la propiedad defaultLayers como un array de las capas que se deseen agregar.
defaultLayer: [
{
id: new GiscubeRef('23.13'), // giscube-admin catalog reference
layerDescriptor: {
title: 'Layer\'s title',
type: 'WMS',
url: 'https://demo.infraplan.cat/apps/giscube-admin/qgisserver/services/layer-name',
projection: '4326',
layers: 'layer-name'
},
options: {
// Opciones de capa p.e. min y
max zoom
},
title: 'title',
auth: false
},
{...}
]
Editar fuentes
Las fuentes de los datos que se pueden modificar desde el panel de datos.
editsources: [
{
name: 'xxxx',
url: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/'
}
],
Sistemas de coordenadas
Sistemas de coordenadas en los que mostrar los resultados (p.e. cuando se hace clic en el mapa).
Para hacer cambios en los sistemas de coordenadas se utiliza la librería proj4, por lo tanto, los sistemas de referencia se definirán siguiendo su sintaxis.
epsgs: [
{
label: 'Lat/Lon',
code: 'EPSG:4326',
def: '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees',
format: ([x, y]) => `${y.toFixed(6)}°, ${x.toFixed(6)}°`
},
{
label: 'UTM (ETRS89)',
code: 'EPSG:25831',
def: '+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs',
format: ([x, y]) => `${x.toFixed(2)}m, ${y.toFixed(2)}m`
}
]
API de Google
Los mapas y herramientas de Google necesitan una API-key para poder ser utilizados por terceras personas. Si se quiere utilizar mapas base de Google o StreetView, se debe introducir la API-key en el archivo de configuración.
google: {
apiKey: 'your-api-key'
}
Mapa Geoportal
Para definir la acción al hacer clic en el mapa.
geoportalMap: {
queryOnClick: require('components/QueryOnClick.vue').default
}
Inicio
Opciones de configuración de inicio: centro y zoom.
home: {
center: {
lat: 41.9,
lng: 2.7
},
zoom: 15
}
Control de capas
Configuración del control de capas. Mostrar o no el panel de acciones (opacidad)
layersControl: {
itemPanel: true // false si no quieres renderizarlo
}
Layout
Con la propiedad layout se controla la configuración del diseño de la aplicación.
La propiedad geoportalMap corresponde al componente que construye el mapa, el control de capas y la sidebar.
La propiedad header corresponde al componente de la barra de herramientas.
Las herramientas que se incluyen en la barra de herramientas se definen en headerToolbar. Esta propiedad es un array de string u object. Los string corresponden a las herramientas definidas en la propiedad tools de la configuración, deben tener el mismo nombre y aparecerán como un botón en la barra de herramientas. Los object son desplegables, cada uno tiene un ícono, una etiqueta y un array de items que contiene las herramientas que se desean agregar al desplegable. Para poner un espacio (en la barra) o una línea (en el desplegable) se debe incluir un string con guiones (p.ej. ‘—‘).
Si se desea cambiar el componente PlacePanel (panel de resultados) por defecto, se le agrega un componente diferente a defaultComponent. También se puede hacer que el componente cambie dependiendo del caso definiendo una función en strategyOptions.
La propiedad sidebar permite cambiar la configuración de los tamaños del panel.
layout: {
/* components */
geoportalMap: require('components/GeoportalMap.vue').default,
header: require('components/AppHeader.vue').default,
headerToolbar: [
'home',
'catalog',
'streetview',
'draw',
'----------',
'auth',
{
icon: 'settings',
label: 'altres',
items: [
'search',
'----------',
'data',
'share',
'----------',
'print',
'fullscreen',
'----------',
'contact'
]
}
],
placePanel: {
defaultComponent: () => require('components/PlacePanel.vue').default,
strategyField: 'content_type',
strategyOptions: {
// 'example_value': () => require('components/PlacePanelBasedComponent.vue').default
}
},
sidebar: {
initialWidthPercentage: 30,
minWidthPixels: 300,
minWidthPercentage: 24,
steps: [24, 45, 60, 75]
}
}
Idioma
Definir en qué idioma se desea el geoportal. Actualmente, se admiten el catalán y el inglés.
locale: {
main: 'ca',
fallback: 'en-us'
}
Oauth
La autenticación de la conexión entre el geoportal y el administrador se realiza mediante la propiedad oauth. Se define el tipo de autenticación, el ID de cliente (definido en el administrador en Inicio/Seguridad/Aplicación/Geoportal). También se definen las rutas de token y revokeToken para registrar el login y logout en la aplicación. Finalmente, se define la propiedad profile para indicar qué usuario está logeado a la aplicación.
oauth: {
type: 'password',
client_id: 'b84uwJOlbtjeTAtThoazZFssE4RimQh3kyEiA8Z2',
token: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/o/token/',
revokeToken: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/o/revoke-token/',
profile: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/api/v1/profile/'
}
Motor de búsqueda
Clase que gestiona las búsquedas en el panel de búsqueda, por defecto la clase Search del geoportal.
searchEngine: Search
Búsquedas
Las API’s de búsqueda se definen como un array en la propiedad searches. Se definirá la URL y si se requiere iniciar sesión o no.
searches: [
{
name: 'geoportal',
title: 'Geoportal search',
url: 'https://xxxxxxx.xxxxxxx.xxx/apps/giscube-admin/geoportal/search/',
auth: true
}
]
sentry
Pendent definició
Herramientas
Definir las herramientas del geoportal. Cada herramienta debe tener un ícono (para colocarlo en el Header) y, o bien una ruta, o bien una acción. Las rutas serán un string y las acciones serán una function.
Además, también se puede definir la función supported() para indicar si la herramienta puede o no ser utilizada (por ejemplo, si son herramientas reservadas para usuarios con sesión iniciada o si se pueden utilizar en un dispositivo móvil).
Finalmente, se puede agregar la propiedad headerComponent si se desea cambiar el componente de la herramienta en el Header.
tools: {
auth: {
icon: 'las la-user', // icono de la herramienta en el Header
to: 'auth', // ruta de la herramienta, cuando se active irá a la ruta definida en el router .../geoportal/#/auth
headerComponent: require('components/header/AuthHeaderItem.js').default // el componente de la herramienta auth será AuthHeaderItem
},
catalog: {
icon: 'las la-compass',
to: 'catalog'
},
data: {
icon: 'las la-pencil-alt',
to: 'data',
supported () {
return !!this.$store.state.auth.username // solo aparecerá la herramienta si el usuario ha iniciado sesión
}
},
fullscreen: {
supported () {
return this.$q.fullscreen.isCapable // solo aparecerá la herramienta si el dispositivo es capaz de hacer fullscreen
},
icon () {
return this.$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen' // el icono depende del estado de fullscreen
},
action () {
this.$q.fullscreen.toggle() // función que se ejecuta cuando se activa la herramienta
}
}
}