Clear source tiles for removed/re-added layer

Fixes #3633 by distinguishing the cases where the source tiles need to
be _reloaded_ from those where they need to be _cleared_

js/style/style.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const assert = require('assert');
 const Evented = require('../util/evented');
 const StyleLayer = require('./style_layer');
 const ImageSprite = require('./image_sprite');
@@ -275,7 +276,13 @@ class Style extends Evented {
  this._updateWorkerLayers(updatedIds, removedIds);
  }
  for (const id in this._updatedSources) {
- this._reloadSource(id);
+ const action = this._updatedSources[id];
+ assert(action === 'reload' || action === 'clear');
+ if (action === 'reload') {
+ this._reloadSource(id);
+ } else if (action === 'clear') {
+ this._clearSource(id);
+ }
  }
 
  this._applyClasses(classes, options);
@@ -429,7 +436,16 @@ class Style extends Evented {
 
  this._layers[id] = layer;
 
- delete this._removedLayers[id];
+ if (this._removedLayers[id]) {
+ // If, in the current batch, we have already removed this layer
+ // and we are now re-adding it, then we need to clear (rather
+ // than just reload) the underyling source's tiles.
+ // Otherwise, tiles marked 'reloading' will have buffers that are
+ // set up for the _previous_ version of this layer, confusing
+ // https://github.com/mapbox/mapbox-gl-js/issues/3633
+ delete this._removedLayers[id];
+ this._updatedSources[layer.source] = 'clear';
+ }
  this._updateLayer(layer);
 
  if (layer.type === 'symbol') {
@@ -460,8 +476,8 @@ class Style extends Evented {
 
  if (layer.type === 'symbol') {
  this._updatedSymbolOrder = true;
- if (layer.source) {
- this._updatedSources[layer.source] = true;
+ if (layer.source && !this._updatedSources[layer.source]) {
+ this._updatedSources[layer.source] = 'reload';
  }
  }
  }
@@ -621,8 +637,8 @@ class Style extends Evented {
 
  _updateLayer(layer) {
  this._updatedLayers[layer.id] = true;
- if (layer.source) {
- this._updatedSources[layer.source] = true;
+ if (layer.source && !this._updatedSources[layer.source]) {
+ this._updatedSources[layer.source] = 'reload';
  }
  this._changed = true;
  }
@@ -738,6 +754,10 @@ class Style extends Evented {
  this.dispatcher.remove();
  }
 
+ _clearSource(id) {
+ this.sourceCaches[id].clearTiles();
+ }
+
  _reloadSource(id) {
  this.sourceCaches[id].reload();
  }