diff --git a/src/controls/print/print-resize.js b/src/controls/print/print-resize.js index 5df92b9f0..46eea5490 100644 --- a/src/controls/print/print-resize.js +++ b/src/controls/print/print-resize.js @@ -3,6 +3,7 @@ import ImageLayer from 'ol/layer/Image'; import TileLayer from 'ol/layer/Tile'; import VectorLayer from 'ol/layer/Vector'; import VectorImageLayer from 'ol/layer/VectorImage'; +import VectorTileLayer from 'ol/layer/VectorTile'; import { OSM, WMTS, XYZ, ImageWMS, ImageArcGISRest, Cluster } from 'ol/source'; import TileArcGISRest from 'ol/source/TileArcGISRest'; import agsMap from '../../layer/agsmap'; @@ -106,6 +107,10 @@ export default function PrintResize(options = {}) { return layer instanceof VectorLayer || layer instanceof VectorImageLayer; }; + const isVectorTile = function isVectorTile(layer) { + return layer instanceof VectorTileLayer; + }; + const isImage = function isImage(layer) { return layer instanceof TileLayer || layer instanceof ImageLayer; }; @@ -381,6 +386,21 @@ export default function PrintResize(options = {}) { } }; + const scaleMapboxLayer = function scaleMapboxLayer(layer, styleName, styles, scaleToDpi) { + const newStyle = Style.createStyle({ + style: styleName, + viewer, + type: 'mapbox', + scaleToDpi, + file: styles[0][0].custom.file, + layer, + source: styles[0][0].custom.source + }); + if (newStyle) { + layer.setStyle(newStyle); + } + }; + // Alters layer in map, if vector then set scale for feature, if image set DPI parameter for source const setLayerScale = function setLayerScale(layer) { const source = layer.getSource(); @@ -422,6 +442,14 @@ export default function PrintResize(options = {}) { } } + if (isVectorTile(layer)) { + const styleName = layer.get('styleName'); + const styles = viewer.getStyle(styleName); + if (styles && styles[0][0].custom.type === 'mapbox') { + scaleMapboxLayer(layer, styleName, styles, resolution); + } + } + if (isImage(layer) && isValidSource(source)) { const params = source.getParams(); if (getSourceType(layer) === 'Geoserver') { @@ -468,6 +496,14 @@ export default function PrintResize(options = {}) { } } + if (isVectorTile(layer)) { + const styleName = layer.get('styleName'); + const styles = viewer.getStyle(styleName); + if (styles && styles[0][0].custom.type === 'mapbox') { + scaleMapboxLayer(layer, styleName, styles); + } + } + if (isImage(layer) && isValidSource(source)) { const params = source.getParams(); diff --git a/src/extensions/olms.js b/src/extensions/olms.js index e87a9fb57..29284bbfd 100644 --- a/src/extensions/olms.js +++ b/src/extensions/olms.js @@ -1,17 +1,74 @@ import { applyStyle } from 'ol-mapbox-style'; import Style from '../style'; -const Olms = function Olms() { +let baseStyle = null; +const dpiStyles = {}; + +const Olms = function Olms(options = {}) { + const { + resolutions = [ + { label: 'Låg', value: 75 }, + { label: 'Mellan', value: 150 }, + { label: 'Hög', value: 300 } + ] + } = options; + + function scaleStyleToDpi(style, dpi) { + const layers = style.layers; + const scaledLayers = layers.map((layer) => { + const paint = layer.paint; + const layout = layer.layout; + if (paint) { + const lineWidth = paint['line-width']; + if (lineWidth) { + paint['line-width'] = Style.multiplyByFactor(lineWidth, dpi); + } + const circleRadius = paint['circle-radius']; + if (circleRadius) { + paint['circle-radius'] = Style.multiplyByFactor(circleRadius, dpi); + } + const circleStrokeWidth = paint['circle-stroke-width']; + if (circleStrokeWidth) { + paint['circle-stroke-width'] = Style.multiplyByFactor(circleStrokeWidth, dpi); + } + } + if (layout) { + const textSize = layout['text-size']; + if (textSize) { + layout['text-size'] = Style.multiplyByFactor(textSize, dpi); + } + const iconSize = layout['icon-size']; + if (iconSize) { + layout['icon-size'] = Style.multiplyByFactor(iconSize, dpi); + } + } + return { ...layer, paint, layout }; + }); + const scaledStyle = { ...style, layers: scaledLayers }; + return scaledStyle; + } + const olmsStyle = function olmsStyle({ layer, file, - source + source, + scaleToDpi = 150 }) { - fetch(file).then((response) => { - response.json().then((glStyle) => { - applyStyle(layer, glStyle, source); + if (baseStyle == null) { + fetch(file).then((response) => { + response.json().then((glStyle) => { + baseStyle = glStyle; + applyStyle(layer, baseStyle, source); + resolutions.forEach((resolution) => { + let scaledStyle = JSON.parse(JSON.stringify(glStyle)); + scaledStyle = scaleStyleToDpi(scaledStyle, resolution.value); + dpiStyles[resolution.value] = scaledStyle; + }); + }); }); - }); + } else { + applyStyle(layer, dpiStyles[scaleToDpi], source); + } return false; }; Style.addStyleType('mapbox', olmsStyle); diff --git a/src/style.js b/src/style.js index 571608187..1962d50fc 100644 --- a/src/style.js +++ b/src/style.js @@ -348,7 +348,7 @@ function createStyle({ style = getCustomStyle('stylefunction', { name: styleSettings[0][0].custom, params: styleSettings[0][0].params }); } else if (typeof styleSettings[0][0].custom === 'object') { style = getCustomStyle(type, { - layer, file, source, name + layer, file, source, name, scaleToDpi }); } return style || stylefunctions('default'); @@ -434,5 +434,6 @@ export default { styleFunction, createEditStyle, createGeometryStyle, - addStyleType + addStyleType, + multiplyByFactor };