github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] Move alpha from style descriptor to layer descriptor (#29059) (#29195)

Browse source 
* default alpha

* update heatmap descriptor to use constant

* clean-up

* use ValidatedRange to ensure alphaValue can not be set to invalid value

* fix jest test expect

* move alpha to layer property

* ensure defaults are set when Layer object is instantiated
This commit is contained in:
Nathan Reese 2019-01-23 12:00:56 -07:00 • committed by GitHub
parent 2d7fcfe348
commit 98476b5d8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 133 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/gis/public/actions/store_actions.js
View file

@ -42,7 +42,6 @@ export const UPDATE_LAYER_STYLE_FOR_SELECTED_LAYER = 'UPDATE_LAYER_STYLE';
export const PROMOTE_TEMPORARY_STYLES = 'PROMOTE_TEMPORARY_STYLES';
export const CLEAR_TEMPORARY_STYLES = 'CLEAR_TEMPORARY_STYLES';
export const TOUCH_LAYER = 'TOUCH_LAYER';
export const UPDATE_LAYER_ALPHA_VALUE = 'UPDATE_LAYER_ALPHA_VALUE';
export const UPDATE_SOURCE_PROP = 'UPDATE_SOURCE_PROP';
export const SET_REFRESH_CONFIG = 'SET_REFRESH_CONFIG';
export const SET_MOUSE_COORDINATES = 'SET_MOUSE_COORDINATES';
@ -352,11 +351,12 @@ export function updateLayerMaxZoom(id, maxZoom) {
};
}
export function updateLayerAlphaValue(id, newAlphaValue) {
export function updateLayerAlpha(id, alpha) {
return {
type: UPDATE_LAYER_ALPHA_VALUE,
type: UPDATE_LAYER_PROP,
id,
newAlphaValue
propName: 'alpha',
newValue: alpha,
};
}

6
x-pack/plugins/gis/public/angular/get_initial_layers.test.js
View file

@ -45,6 +45,7 @@ describe('Saved object does not have layer list', () => {
const layers = getInitialLayers(null, dataSources);
expect(layers).toEqual([{
"alpha": 1,
dataRequests: [],
id: layers[0].id,
label: null,
@ -56,7 +57,7 @@ describe('Saved object does not have layer list', () => {
url: 'myTileUrl',
},
style: {
properties: undefined,
properties: {},
type: 'TILE',
},
temporary: false,
@ -72,6 +73,7 @@ describe('Saved object does not have layer list', () => {
const layers = getInitialLayers(null, dataSources);
expect(layers).toEqual([{
"alpha": 1,
dataRequests: [],
id: layers[0].id,
label: null,
@ -83,7 +85,7 @@ describe('Saved object does not have layer list', () => {
type: 'EMS_TMS'
},
style: {
properties: undefined,
properties: {},
type: 'TILE',
},
temporary: false,

15
x-pack/plugins/gis/public/components/layer_panel/index.js
View file

@ -7,12 +7,6 @@
import { connect } from 'react-redux';
import { LayerPanel } from './view';
import { getSelectedLayer } from '../../selectors/map_selectors';
import {
updateLayerLabel,
updateLayerMaxZoom,
updateLayerMinZoom,
updateLayerAlphaValue
} from '../../actions/store_actions';
function mapStateToProps(state = {}) {
return {
@ -20,13 +14,8 @@ function mapStateToProps(state = {}) {
};
}
function mapDispatchToProps(dispatch) {
return {
updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue))
};
function mapDispatchToProps(/* dispatch */) {
return {};
}
const connectedLayerPanel = connect(mapStateToProps, mapDispatchToProps)(LayerPanel);

8
x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js
View file

@ -4,7 +4,6 @@
* you may not use this file except in compliance with the Elastic License.
*/
import _ from 'lodash';
import { connect } from 'react-redux';
import { SettingsPanel } from './settings_panel';
import { getSelectedLayer } from '../../../selectors/map_selectors';
@ -12,19 +11,18 @@ import {
updateLayerLabel,
updateLayerMaxZoom,
updateLayerMinZoom,
updateLayerAlphaValue,
updateLayerAlpha,
updateSourceProp,
} from '../../../actions/store_actions';
function mapStateToProps(state = {}) {
const selectedLayer = getSelectedLayer(state);
return {
alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
alpha: selectedLayer.getAlpha(),
label: selectedLayer.getLabel(),
layerId: selectedLayer.getId(),
maxZoom: selectedLayer.getMaxZoom(),
minZoom: selectedLayer.getMinZoom(),
alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
renderSourceDetails: selectedLayer.renderSourceDetails,
renderSourceSettingsEditor: selectedLayer.renderSourceSettingsEditor,
};
@ -35,7 +33,7 @@ function mapDispatchToProps(dispatch) {
updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue)),
updateAlpha: (id, alpha) => dispatch(updateLayerAlpha(id, alpha)),
updateSourceProp: (id, propName, value) => dispatch(updateSourceProp(id, propName, value)),
};
}

13
x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js
View file

@ -17,6 +17,7 @@ import {
EuiSpacer,
EuiLink,
} from '@elastic/eui';
import { ValidatedRange } from '../../../shared/components/validated_range';
export class SettingsPanel extends Component {
@ -45,10 +46,8 @@ export class SettingsPanel extends Component {
this.props.updateMaxZoom(this.props.layerId, zoom);
}
onAlphaValueChange = (event) => {
const sanitizedValue = parseFloat(event.target.value);
const alphaValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
this.props.updateAlphaValue(this.props.layerId, alphaValue);
onAlphaChange = (alpha) => {
this.props.updateAlpha(this.props.layerId, alpha);
}
onSourceChange = ({ propName, value }) => {
@ -113,12 +112,12 @@ export class SettingsPanel extends Component {
label="Layer transparency"
>
<div className="gisAlphaRange">
<EuiRange
<ValidatedRange
min={.00}
max={1.00}
step={.05}
value={this.props.alphaValue.toString()} // EuiRange value must be string
onChange={this.onAlphaValueChange}
value={this.props.alpha}
onChange={this.onAlphaChange}
showLabels
showInput
showRange

19
x-pack/plugins/gis/public/shared/components/validated_range.js
View file

@ -35,7 +35,7 @@ export class ValidatedRange extends React.Component {
}
_onRangeChange = (e) => {
const sanitizedValue = parseInt(e.target.value, 10);
const sanitizedValue = parseFloat(e.target.value, 10);
let newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
// work around for https://github.com/elastic/eui/issues/1458
// TODO remove once above EUI issue is resolved
@ -56,11 +56,19 @@ export class ValidatedRange extends React.Component {
};
render() {
const {
max,
min,
value, // eslint-disable-line no-unused-vars
onChange, // eslint-disable-line no-unused-vars
...rest
} = this.props;
let errorMessage;
if (!this.state.isValid) {
errorMessage = (
<EuiFormErrorText>
{`Must be between ${this.props.min} and ${this.props.max}`}
{`Must be between ${min} and ${max}`}
</EuiFormErrorText>
);
}
@ -68,12 +76,11 @@ export class ValidatedRange extends React.Component {
return (
<Fragment>
<EuiRange
min={this.props.min}
max={this.props.max}
min={min}
max={max}
value={this.state.value.toString()}
onChange={this._onRangeChange}
showInput
showRange
{...rest}
/>
{errorMessage}
</Fragment>

7
x-pack/plugins/gis/public/shared/layers/heatmap_layer.js
View file

@ -88,7 +88,12 @@ export class HeatmapLayer extends ALayer {
}
mbMap.setLayoutProperty(heatmapLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
this._style.setMBPaintProperties(mbMap, heatmapLayerId, SCALED_PROPERTY_NAME);
this._style.setMBPaintProperties({
mbMap,
layerId: heatmapLayerId,
propertyName: SCALED_PROPERTY_NAME,
alpha: this.getAlpha(),
});
mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
}

17
x-pack/plugins/gis/public/shared/layers/layer.js
View file

@ -14,7 +14,7 @@ const NO_SOURCE_UPDATE_REQUIRED = false;
export class ALayer {
constructor({ layerDescriptor, source, style }) {
this._descriptor = layerDescriptor;
this._descriptor = ALayer.createDescriptor(layerDescriptor);
this._source = source;
this._style = style;
@ -30,16 +30,15 @@ export class ALayer {
return mbStyle.sources[sourceId].data;
}
static createDescriptor(options) {
const layerDescriptor = {};
static createDescriptor(options = {}) {
const layerDescriptor = { ...options };
layerDescriptor.dataRequests = [];
layerDescriptor.id = Math.random().toString(36).substr(2, 5);
layerDescriptor.dataRequests = _.get(options, 'dataRequests', []);
layerDescriptor.id = _.get(options, 'id', Math.random().toString(36).substr(2, 5));
layerDescriptor.label = options.label && options.label.length > 0 ? options.label : null;
layerDescriptor.minZoom = _.get(options, 'minZoom', 0);
layerDescriptor.maxZoom = _.get(options, 'maxZoom', 24);
layerDescriptor.source = options.source;
layerDescriptor.sourceDescriptor = options.sourceDescriptor;
layerDescriptor.alpha = _.get(options, 'alpha', 0.75);
layerDescriptor.visible = options.visible || true;
layerDescriptor.temporary = options.temporary || false;
layerDescriptor.style = options.style || {};
@ -109,6 +108,10 @@ export class ALayer {
return this._descriptor.maxZoom;
}
getAlpha() {
return this._descriptor.alpha;
}
getZoomConfig() {
return {
minZoom: this._descriptor.minZoom,

65
x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js
View file

@ -301,48 +301,31 @@ export class ESGeohashGridSource extends VectorSource {
sourceDescriptor: this._descriptor,
...options
});
descriptor.style = {
...descriptor.style,
type: 'VECTOR',
properties: {
fillColor: {
type: 'DYNAMIC',
options: {
field: {
label: COUNT_PROP_LABEL,
name: COUNT_PROP_NAME,
origin: 'source'
},
color: 'Blues'
}
},
lineColor: {
type: 'STATIC',
options: {
color: '#cccccc'
}
},
lineWidth: {
type: 'STATIC',
options: {
size: 1
}
},
iconSize: {
type: 'DYNAMIC',
options: {
field: {
label: COUNT_PROP_LABEL,
name: COUNT_PROP_NAME,
origin: 'source'
},
minSize: 4,
maxSize: 32,
}
},
alphaValue: 1
descriptor.style = VectorStyle.createDescriptor({
fillColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {
label: COUNT_PROP_LABEL,
name: COUNT_PROP_NAME,
origin: 'source'
},
color: 'Blues'
}
},
iconSize: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {
label: COUNT_PROP_LABEL,
name: COUNT_PROP_NAME,
origin: 'source'
},
minSize: 4,
maxSize: 32,
}
}
};
});
return descriptor;
}

4
x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/size_range_selector.js
View file

@ -43,6 +43,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
max={DEFAULT_MAX_SIZE}
value={minSize}
onChange={onMinSizeChange}
showInput
showRange
/>
</EuiFormRow>
</EuiFlexItem>
@ -56,6 +58,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
max={DEFAULT_MAX_SIZE}
value={maxSize}
onChange={onMaxSizeChange}
showInput
showRange
/>
</EuiFormRow>
</EuiFlexItem>

2
x-pack/plugins/gis/public/shared/layers/styles/components/vector/size/static_size_selection.js
View file

@ -20,6 +20,8 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
max={100}
value={styleOptions.size}
onChange={onSizeChange}
showInput
showRange
/>
);
}

30
x-pack/plugins/gis/public/shared/layers/styles/heatmap_style.js
View file

@ -14,20 +14,23 @@ export class HeatmapStyle {
static type = 'HEATMAP';
constructor(styleDescriptor) {
this._descriptor = styleDescriptor;
constructor(styleDescriptor = {}) {
this._descriptor = HeatmapStyle.createDescriptor(
styleDescriptor.refinement,
styleDescriptor.properties
);
}
static canEdit(styleInstance) {
return styleInstance.constructor === HeatmapStyle;
}
static createDescriptor(refinement) {
static createDescriptor(refinement, properties = {}) {
return {
type: HeatmapStyle.type,
refinement: refinement || 'coarse',
properties: {
alphaValue: 1
...properties
}
};
}
@ -47,15 +50,8 @@ export class HeatmapStyle {
}
_getMBOpacity() {
const DEFAULT_OPACITY = 1;
return typeof this._descriptor.properties.alphaValue === 'number' ? this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
}
setMBPaintProperties(mbMap, pointLayerID, property) {
setMBPaintProperties({ alpha, mbMap, layerId, propertyName }) {
let radius;
const opacity = this._getMBOpacity();
if (this._descriptor.refinement === 'coarse') {
radius = 64;
} else if (this._descriptor.refinement === 'fine') {
@ -65,12 +61,12 @@ export class HeatmapStyle {
} else {
throw new Error(`Refinement param not recognized: ${this._descriptor.refinement}`);
}
mbMap.setPaintProperty(pointLayerID, 'heatmap-radius', radius);
mbMap.setPaintProperty(pointLayerID, 'heatmap-weight', {
"type": 'identity',
"property": property
mbMap.setPaintProperty(layerId, 'heatmap-radius', radius);
mbMap.setPaintProperty(layerId, 'heatmap-weight', {
type: 'identity',
property: propertyName
});
mbMap.setPaintProperty(pointLayerID, 'heatmap-opacity', opacity);
mbMap.setPaintProperty(layerId, 'heatmap-opacity', alpha);
}
getRefinement() {

20
x-pack/plugins/gis/public/shared/layers/styles/tile_style.js
View file

@ -8,18 +8,20 @@ export class TileStyle {
static type = 'TILE';
constructor(styleDescriptor) {
this._descriptor = styleDescriptor;
constructor(styleDescriptor = {}) {
this._descriptor = TileStyle.createDescriptor(styleDescriptor.properties);
}
static canEdit(styleInstance) {
return styleInstance.constructor === TileStyle;
}
static createDescriptor(properties) {
static createDescriptor(properties = {}) {
return {
type: TileStyle.type,
properties
properties: {
...properties,
}
};
}
@ -27,13 +29,7 @@ export class TileStyle {
return 'Tile style';
}
_getMBOpacity() {
const DEFAULT_OPACITY = 1;
return typeof this._descriptor.properties.alphaValue === 'number' ? this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
}
setMBPaintProperties(mbMap, tileLayerID) {
const opacity = this._getMBOpacity();
mbMap.setPaintProperty(tileLayerID, 'raster-opacity', opacity);
setMBPaintProperties({ alpha, mbMap, layerId }) {
mbMap.setPaintProperty(layerId, 'raster-opacity', alpha);
}
}

28
x-pack/plugins/gis/public/shared/layers/styles/vector_style.js
View file

@ -11,7 +11,7 @@ import { FillableCircle, FillableVector } from '../../icons/additional_layer_ico
import { ColorGradient } from '../../icons/color_gradient';
import { getHexColorRangeStrings } from '../../utils/color_utils';
import { VectorStyleEditor } from './components/vector/vector_style_editor';
import { DEFAULT_ALPHA_VALUE, getDefaultStaticProperties } from './vector_style_defaults';
import { getDefaultStaticProperties } from './vector_style_defaults';
export class VectorStyle {
@ -22,7 +22,7 @@ export class VectorStyle {
return `__kbn__scaled(${fieldName})`;
}
constructor(descriptor) {
constructor(descriptor = {}) {
this._descriptor = VectorStyle.createDescriptor(descriptor.properties);
}
@ -30,11 +30,10 @@ export class VectorStyle {
return styleInstance.constructor === VectorStyle;
}
static createDescriptor(properties) {
const defaultStyleProperties = getDefaultStaticProperties();
static createDescriptor(properties = {}) {
return {
type: VectorStyle.type,
properties: { ...defaultStyleProperties, ...properties }
properties: { ...getDefaultStaticProperties(), ...properties }
};
}
@ -259,10 +258,6 @@ export class VectorStyle {
return null;
}
_getMBOpacity() {
return _.get(this._descriptor.properties, 'alphaValue', DEFAULT_ALPHA_VALUE);
}
_getMbSize(styleDescriptor) {
if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
return styleDescriptor.options.size;
@ -282,13 +277,11 @@ export class VectorStyle {
return null;
}
setMBPaintProperties(mbMap, sourceId, fillLayerId, lineLayerId) {
const opacity = this._getMBOpacity();
setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
if (this._descriptor.properties.fillColor) {
const color = this._getMBColor(this._descriptor.properties.fillColor);
mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', opacity);
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', alpha);
} else {
mbMap.setPaintProperty(fillLayerId, 'fill-color', null);
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', 0);
@ -297,7 +290,7 @@ export class VectorStyle {
if (this._descriptor.properties.lineColor) {
const color = this._getMBColor(this._descriptor.properties.lineColor);
mbMap.setPaintProperty(lineLayerId, 'line-color', color);
mbMap.setPaintProperty(lineLayerId, 'line-opacity', opacity);
mbMap.setPaintProperty(lineLayerId, 'line-opacity', alpha);
} else {
mbMap.setPaintProperty(lineLayerId, 'line-color', null);
@ -312,12 +305,11 @@ export class VectorStyle {
}
}
setMBPaintPropertiesForPoints(mbMap, sourceId, pointLayerId) {
const opacity = this._getMBOpacity();
setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
if (this._descriptor.properties.fillColor) {
const color = this._getMBColor(this._descriptor.properties.fillColor);
mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', opacity);
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', alpha);
} else {
mbMap.setPaintProperty(pointLayerId, 'circle-color', null);
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
@ -325,7 +317,7 @@ export class VectorStyle {
if (this._descriptor.properties.lineColor) {
const color = this._getMBColor(this._descriptor.properties.lineColor);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', opacity);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
} else {
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', null);

4
x-pack/plugins/gis/public/shared/layers/styles/vector_style_defaults.js
View file

@ -8,7 +8,7 @@ import { VectorStyle } from './vector_style';
import { COLOR_GRADIENTS } from './components/vector/color/color_ramp_select';
const DEFAULT_COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#f58231', '#911eb4'];
export const DEFAULT_ALPHA_VALUE = 1;
export const DEFAULT_MIN_SIZE = 1;
export const DEFAULT_MAX_SIZE = 64;
@ -43,7 +43,6 @@ export function getDefaultStaticProperties(mapColors = []) {
size: 10
}
},
alphaValue: DEFAULT_ALPHA_VALUE
};
}
@ -75,6 +74,5 @@ export function getDefaultDynamicProperties() {
maxSize: DEFAULT_MAX_SIZE
}
},
alphaValue: DEFAULT_ALPHA_VALUE
};
}

16
x-pack/plugins/gis/public/shared/layers/tile_layer.js
View file

@ -4,11 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
import _ from 'lodash';
import { ALayer } from './layer';
import React from 'react';
import { EuiIcon } from '@elastic/eui';
import { TileStyle } from '../layers/styles/tile_style';
import _ from 'lodash';
export class TileLayer extends ALayer {
@ -16,17 +16,15 @@ export class TileLayer extends ALayer {
constructor({ layerDescriptor, source, style }) {
super({ layerDescriptor, source, style });
if (!style || !_.get(style, '_descriptor.properties.alphaValue')) {
const defaultStyle = TileStyle.createDescriptor({
alphaValue: 1
});
this._style = new TileStyle(defaultStyle);
if (!style) {
this._style = new TileStyle();
}
}
static createDescriptor(options) {
const tileLayerDescriptor = super.createDescriptor(options);
tileLayerDescriptor.type = TileLayer.type;
tileLayerDescriptor.alpha = _.get(options, 'alpha', 1);
tileLayerDescriptor.style =
TileStyle.createDescriptor(tileLayerDescriptor.style.properties);
return tileLayerDescriptor;
@ -57,7 +55,11 @@ export class TileLayer extends ALayer {
mbMap.setLayoutProperty(layerId, 'visibility', this.isVisible() ? 'visible' : 'none');
mbMap.setLayerZoomRange(layerId, this._descriptor.minZoom, this._descriptor.maxZoom);
this._style && this._style.setMBPaintProperties(mbMap, layerId);
this._style && this._style.setMBPaintProperties({
alpha: this.getAlpha(),
mbMap,
layerId,
});
}
getIcon() {

17
x-pack/plugins/gis/public/shared/layers/vector_layer.js
View file

@ -397,13 +397,17 @@ export class VectorLayer extends ALayer {
});
mbMap.setFilter(pointLayerId, ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]);
}
this._style.setMBPaintPropertiesForPoints(mbMap, this.getId(), pointLayerId);
this._style.setMBPaintPropertiesForPoints({
alpha: this.getAlpha(),
mbMap,
pointLayerId: pointLayerId,
});
mbMap.setLayoutProperty(pointLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
mbMap.setLayerZoomRange(pointLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
this._addTooltipListeners(mbMap, pointLayerId);
}
_setMbLinePolygonProeprties(mbMap) {
_setMbLinePolygonProperties(mbMap) {
const sourceId = this.getId();
const fillLayerId = this.getId() + '_fill';
const lineLayerId = this.getId() + '_line';
@ -437,7 +441,12 @@ export class VectorLayer extends ALayer {
['==', ['geometry-type'], 'MultiLineString']
]);
}
this._style.setMBPaintProperties(mbMap, this.getId(), fillLayerId, lineLayerId, this.isTemporary());
this._style.setMBPaintProperties({
alpha: this.getAlpha(),
mbMap,
fillLayerId,
lineLayerId,
});
mbMap.setLayoutProperty(fillLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
mbMap.setLayoutProperty(lineLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
@ -447,7 +456,7 @@ export class VectorLayer extends ALayer {
_syncStylePropertiesWithMb(mbMap) {
this._setMbPointsProperties(mbMap);
this._setMbLinePolygonProeprties(mbMap);
this._setMbLinePolygonProperties(mbMap);
}
_syncSourceBindingWithMb(mbMap) {

8
x-pack/plugins/gis/public/store/map.js
View file

@ -27,7 +27,6 @@ import {
CLEAR_TEMPORARY_STYLES,
SET_JOINS,
TOUCH_LAYER,
UPDATE_LAYER_ALPHA_VALUE,
UPDATE_SOURCE_PROP,
SET_REFRESH_CONFIG,
TRIGGER_REFRESH_TIMER,
@ -192,13 +191,6 @@ export function map(state = INITIAL_STATE, action) {
return { ...state, selectedLayerId: match ? action.selectedLayerId : null };
case UPDATE_LAYER_ORDER:
return { ...state, layerList: action.newLayerOrder.map(layerNumber => state.layerList[layerNumber]) };
case UPDATE_LAYER_ALPHA_VALUE:
const alphaLayer = state.layerList.find(layer => layer.id === action.id);
const preAlphaStyle = alphaLayer.style;
return updateLayerInList(state, action.id, 'style',
{ ...preAlphaStyle, properties: { ...preAlphaStyle.properties,
alphaValue: action.newAlphaValue }
});
case UPDATE_LAYER_PROP:
return updateLayerInList(state, action.id, action.propName, action.newValue);
case UPDATE_SOURCE_PROP:

2
x-pack/plugins/gis/server/sample_data/web_logs_saved_objects.json
View file

@ -8,7 +8,7 @@
"title" : "[Logs] Web Traffic",
"description" : "",
"mapStateJSON" : "{\"zoom\":3.92,\"center\":{\"lon\":-83.95443,\"lat\":38.02463},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"}}",
"layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
"layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"alpha\":1,\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
"uiStateJSON" : "{\"isDarkMode\":false}",
"bounds" : {
"type" : "envelope",