diff --git a/docs/layers/icon-layer.md b/docs/layers/icon-layer.md index dea4b4f018c..ab95c2be0c7 100644 --- a/docs/layers/icon-layer.md +++ b/docs/layers/icon-layer.md @@ -273,7 +273,6 @@ The rotating angle of each object, in degrees. - If a number is provided, it is used as the angle for all objects. - If a function is provided, it is called on each object to retrieve its angle. - ## Use binary attributes This section is about the special requirements when [supplying attributes directly](/docs/developer-guide/performance.md#supply-attributes-directly) to an `IconLayer`. diff --git a/modules/layers/src/icon-layer/icon-manager.js b/modules/layers/src/icon-layer/icon-manager.js index f394a7f8699..b0335f7fcce 100644 --- a/modules/layers/src/icon-layer/icon-manager.js +++ b/modules/layers/src/icon-layer/icon-manager.js @@ -13,7 +13,10 @@ const noop = () => {}; const DEFAULT_TEXTURE_PARAMETERS = { [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR, // GL.LINEAR is the default value but explicitly set it here - [GL.TEXTURE_MAG_FILTER]: GL.LINEAR + [GL.TEXTURE_MAG_FILTER]: GL.LINEAR, + // for texture boundary artifact + [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE, + [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE }; function nextPowOfTwo(number) { @@ -49,7 +52,7 @@ function resizeTexture(gl, texture, width, height) { const newTexture = cloneTextureFrom(texture, {width, height}); copyToTexture(texture, newTexture, { - targetY: height - oldHeight, + targetY: 0, width: oldWidth, height: oldHeight }); diff --git a/test/render/golden-images/icon-lnglat-large.png b/test/render/golden-images/icon-lnglat-large.png new file mode 100644 index 00000000000..fd1440b7aa0 Binary files /dev/null and b/test/render/golden-images/icon-lnglat-large.png differ diff --git a/test/render/golden-images/icon-lnglat-resize-texture.png b/test/render/golden-images/icon-lnglat-resize-texture.png index dedb4fe5979..5439171cc0d 100644 Binary files a/test/render/golden-images/icon-lnglat-resize-texture.png and b/test/render/golden-images/icon-lnglat-resize-texture.png differ diff --git a/test/render/test-cases.js b/test/render/test-cases.js index 844452e5412..b3f1d685ca5 100644 --- a/test/render/test-cases.js +++ b/test/render/test-cases.js @@ -735,7 +735,7 @@ export const TEST_CASES = [ viewState: { latitude: 37.751537058389985, longitude: -122.42694203247012, - zoom: 11.5, + zoom: 12, pitch: 0, bearing: 0 }, @@ -746,7 +746,10 @@ export const TEST_CASES = [ updateTriggers: { getIcon: 1 }, - sizeScale: 12, + sizeScale: 24, + opacity: 0.8, + pickable: true, + getSize: d => (d.RACKS > 2 ? 2 : 1), getPosition: d => d.COORDINATES, getColor: d => [64, 64, 72], getIcon: d => { @@ -758,19 +761,16 @@ export const TEST_CASES = [ return Object.assign({}, dataSamples.iconAtlas['marker-warning'], { url: './test/render/icon-warning.png' }); - }, - getSize: d => (d.RACKS > 2 ? 2 : 1), - opacity: 0.8, - pickable: true, - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.loaded) { - // data is loaded - done(); - } } }) ], - goldenImage: './test/render/golden-images/icon-lnglat.png' + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.loaded) { + // data is loaded + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat-large.png' }, // This is based on last test case // use the same layer id 'icon-lnglat-auto' as last test case to trigger the layer update and test texture resize logic @@ -779,7 +779,7 @@ export const TEST_CASES = [ viewState: { latitude: 37.751537058389985, longitude: -122.42694203247012, - zoom: 11.5, + zoom: 12, pitch: 0, bearing: 0 }, @@ -787,39 +787,39 @@ export const TEST_CASES = [ new IconLayer({ id: 'icon-lnglat-auto', data: dataSamples.points, - opacity: 0.8, updateTriggers: { getIcon: 2 }, - sizeScale: 12, + sizeScale: 24, + opacity: 0.8, + pickable: true, + getSize: d => (d.RACKS > 2 ? 2 : 1), getPosition: d => d.COORDINATES, getColor: d => [64, 64, 72], getIcon: d => { if (d.PLACEMENT === 'SW') { - return { - url: './test/render/golden-images/pointcloud-meter.png', + return Object.assign({}, dataSamples.iconAtlas.marker, { + url: './test/render/icon-marker.png', + id: 'marker-large', width: 256, - height: 256, - anchorY: 256, - mask: false - }; + height: 256 + }); } - return { - url: './test/render/golden-images/h3-hexagon-flat.png', + return Object.assign({}, dataSamples.iconAtlas['marker-warning'], { + id: 'warning-large', + url: './test/render/icon-warning.png', width: 1024, - height: 1024, - anchorY: 1024, - mask: false - }; - }, - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.loaded) { - // data is loaded - done(); - } + height: 1024 + }); } }) ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.loaded) { + // data is loaded + done(); + } + }, goldenImage: './test/render/golden-images/icon-lnglat-resize-texture.png' }, {