Support multiple sources for layers

test/browser/spec/ol/layer/Group.test.js

@@ -44,7 +44,6 @@ describe('ol/layer/Group', function () {
         opacity: 1,
         visible: true,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: undefined,
         maxResolution: Infinity,
@@ -161,7 +160,6 @@ describe('ol/layer/Group', function () {
         opacity: 0.5,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: 10,
         maxResolution: 500,
@@ -203,7 +201,6 @@ describe('ol/layer/Group', function () {
         opacity: 0.5,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: groupExtent,
         zIndex: undefined,
         maxResolution: 500,
@@ -399,7 +396,6 @@ describe('ol/layer/Group', function () {
         opacity: 0.3,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: groupExtent,
         zIndex: 10,
         maxResolution: 500,
@@ -417,7 +413,6 @@ describe('ol/layer/Group', function () {
         opacity: 0,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: undefined,
         maxResolution: Infinity,
@@ -433,7 +428,6 @@ describe('ol/layer/Group', function () {
         opacity: 1,
         visible: true,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: undefined,
         maxResolution: Infinity,
@@ -599,7 +593,6 @@ describe('ol/layer/Group', function () {
         opacity: 0.25,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: undefined,
         maxResolution: 150,

test/browser/spec/ol/layer/Layer.test.js

@@ -56,7 +56,6 @@ describe('ol/layer/Layer', function () {
         opacity: 1,
         visible: true,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: undefined,
         maxResolution: Infinity,
@@ -95,7 +94,6 @@ describe('ol/layer/Layer', function () {
         opacity: 0.5,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: 10,
         maxResolution: 500,
@@ -430,7 +428,6 @@ describe('ol/layer/Layer', function () {
         opacity: 0.33,
         visible: false,
         managed: true,
-        sourceState: 'ready',
         extent: undefined,
         zIndex: 10,
         maxResolution: 500,

test/browser/spec/ol/layer/WebGLTile.test.js

@@ -373,4 +373,37 @@ describe('ol/layer/WebGLTile', function () {
       done();
     });
   });
+
+  it('handles multiple sources correctly', () => {
+    const source = layer.getSource();
+    expect(layer.getRenderSource()).to.be(source);
+    layer.sources_ = (extent, resolution) => {
+      return [
+        {
+          getState: () => 'ready',
+          extent,
+          resolution,
+          id: 'source1',
+        },
+        {
+          getState: () => 'ready',
+          extent,
+          resolution,
+          id: 'source2',
+        },
+      ];
+    };
+    const sourceIds = [];
+    layer.getRenderer().prepareFrame = (frameState) => {
+      const renderedSource = layer.getRenderSource();
+      expect(renderedSource.extent).to.eql([0, 0, 100, 100]);
+      expect(renderedSource.resolution).to.be(1);
+      sourceIds.push(renderedSource.id);
+    };
+    layer.render({
+      extent: [0, 0, 100, 100],
+      viewState: {resolution: 1},
+    });
+    expect(sourceIds).to.eql(['source1', 'source2']);
+  });
 });

test/browser/spec/ol/source.test.js

@@ -0,0 +1,41 @@
+import TileGrid from '../../../../src/ol/tilegrid/TileGrid.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+import {get} from '../../../../src/ol/proj.js';
+import {sourcesFromTileGrid} from '../../../../src/ol/source.js';
+
+describe('ol/source', function () {
+  describe('sourcesFromTileGrid()', function () {
+    it('returns a function that returns the correct source', function () {
+      const resolutions = createXYZ({maxZoom: 1}).getResolutions();
+      const tileGrid = new TileGrid({
+        extent: get('EPSG:3857').getExtent(),
+        resolutions: [resolutions[1]],
+        tileSizes: [[256, 512]],
+      });
+      const factory = function (tileCoord) {
+        return new XYZ({
+          url: tileCoord.join('-') + '/{z}/{x}/{y}.png',
+          tileGrid: new TileGrid({
+            resolutions,
+            minZoom: tileCoord[0],
+            maxZoom: tileCoord[0] + 1,
+            extent: tileGrid.getTileCoordExtent(tileCoord),
+            origin: [-20037508.342789244, 20037508.342789244],
+          }),
+        });
+      };
+      const getSources = sourcesFromTileGrid(tileGrid, factory);
+      expect(getSources(tileGrid.getExtent(), resolutions[1]).length).to.be(2);
+      expect(
+        getSources(
+          [-10000, -10000, -5000, 10000],
+          resolutions[1]
+        )[0].getUrls()[0]
+      ).to.be('0-0-0/{z}/{x}/{y}.png');
+      expect(
+        getSources([5000, -10000, 10000, 10000], resolutions[1])[0].getUrls()[0]
+      ).to.be('0-1-0/{z}/{x}/{y}.png');
+    });
+  });
+});

test/rendering/cases/webgl-tile-multisource/main.js

@@ -0,0 +1,58 @@
+import Map from '../../../../src/ol/Map.js';
+import TileGrid from '../../../../src/ol/tilegrid/TileGrid.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+import {createXYZ} from '../../../../src/ol/tilegrid.js';
+import {get} from '../../../../src/ol/proj.js';
+import {sourcesFromTileGrid} from '../../../../src/ol/source.js';
+
+const resolutions = createXYZ({maxZoom: 1}).getResolutions();
+const tilePyramid = new TileGrid({
+  extent: get('EPSG:3857').getExtent(),
+  resolutions: [resolutions[1]],
+  tileSizes: [[256, 512]],
+});
+
+new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      sources: sourcesFromTileGrid(tilePyramid, (tileCoord) => {
+        let source;
+        switch (tileCoord.toString()) {
+          case '0,1,0':
+            source = new XYZ({
+              url: '/data/tiles/osm/{z}/{x}/{y}.png',
+              tileGrid: new TileGrid({
+                resolutions,
+                minZoom: tileCoord[0],
+                maxZoom: tileCoord[0] + 1,
+                extent: tilePyramid.getTileCoordExtent(tileCoord),
+                origin: [-20037508.342789244, 20037508.342789244],
+              }),
+            });
+            break;
+          default:
+            source = new XYZ({
+              url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+              tileGrid: new TileGrid({
+                resolutions,
+                minZoom: tileCoord[0],
+                maxZoom: tileCoord[0] + 1,
+                extent: tilePyramid.getTileCoordExtent(tileCoord),
+                origin: [-20037508.342789244, 20037508.342789244],
+              }),
+            });
+        }
+        return source;
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+});
+
+render();