ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add crossOrigin option for icons

Browse Source 
Make the crossOrigin setting for icons configurable to avoid errors when KML files reference images when are not CORS enabled
Pass scope in readPlacemark_
and to handle IconStyle in a placemark style map

Test crossOrigin option for icons
Add tests for IconStyle in style maps and shared styles
This commit is contained in:
mike-000
2019-10-12 16:08:57 +01:00
parent f475387d39
commit f47fa8b407
2 changed files with 423 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/ol/format/KML.js
View File

@@ -386,6 +386,8 @@ function createStyleDefaults() {
* @property {Array<Style>} [defaultStyle] Default style. The
* default default style is the same as Google Earth.
* @property {boolean} [writeStyles=true] Write styles into KML.
* @property {null|string} [crossOrigin='anonymous'] The `crossOrigin` attribute for loaded images. Note that you must provide a
* `crossOrigin` value if you want to access pixel data with the Canvas renderer.
*/
@@ -458,6 +460,13 @@ class KML extends XMLFeature {
this.showPointNames_ = options.showPointNames !== undefined ?
options.showPointNames : true;
/**
* @private
* @type {null|string}
*/
this.crossOrigin_ = options.crossOrigin !== undefined ?
options.crossOrigin : 'anonymous';
}
/**
@@ -494,7 +503,7 @@ class KML extends XMLFeature {
*/
readPlacemark_(node, objectStack) {
const object = pushParseAndPop({'geometry': null},
PLACEMARK_PARSERS, node, objectStack);
PLACEMARK_PARSERS, node, objectStack, this);
if (!object) {
return undefined;
}
@@ -537,7 +546,7 @@ class KML extends XMLFeature {
readSharedStyle_(node, objectStack) {
const id = node.getAttribute('id');
if (id !== null) {
const style = readStyle(node, objectStack);
const style = readStyle.call(this, node, objectStack);
if (style) {
let styleUri;
let baseURI = node.baseURI;
@@ -565,7 +574,7 @@ class KML extends XMLFeature {
if (id === null) {
return;
}
const styleMapValue = readStyleMapValue(node, objectStack);
const styleMapValue = readStyleMapValue.call(this, node, objectStack);
if (!styleMapValue) {
return;
}
@@ -1118,7 +1127,7 @@ const STYLE_MAP_PARSERS = makeStructureNS(
*/
function readStyleMapValue(node, objectStack) {
return pushParseAndPop(undefined,
STYLE_MAP_PARSERS, node, objectStack);
STYLE_MAP_PARSERS, node, objectStack, this);
}
@@ -1223,7 +1232,7 @@ function iconStyleParser(node, objectStack) {
anchorOrigin: anchorOrigin,
anchorXUnits: anchorXUnits,
anchorYUnits: anchorYUnits,
crossOrigin: 'anonymous', // FIXME should this be configurable?
crossOrigin: this.crossOrigin_,
offset: offset,
offsetOrigin: IconOrigin.BOTTOM_LEFT,
rotation: rotation,
@@ -1725,7 +1734,7 @@ const STYLE_PARSERS = makeStructureNS(
*/
function readStyle(node, objectStack) {
const styleObject = pushParseAndPop(
{}, STYLE_PARSERS, node, objectStack);
{}, STYLE_PARSERS, node, objectStack, this);
if (!styleObject) {
return null;
}
@@ -1883,7 +1892,7 @@ const PAIR_PARSERS = makeStructureNS(
*/
function pairDataParser(node, objectStack) {
const pairObject = pushParseAndPop(
{}, PAIR_PARSERS, node, objectStack);
{}, PAIR_PARSERS, node, objectStack, this);
if (!pairObject) {
return;
}
@@ -1909,7 +1918,7 @@ function pairDataParser(node, objectStack) {
* @param {Array<*>} objectStack Object stack.
*/
function placemarkStyleMapParser(node, objectStack) {
const styleMapValue = readStyleMapValue(node, objectStack);
const styleMapValue = readStyleMapValue.call(this, node, objectStack);
if (!styleMapValue) {
return;
}

408
test/spec/ol/format/kml.test.js
View File

@@ -1797,6 +1797,47 @@ describe('ol.format.KML', function() {
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can read a feature\'s IconStyle with crossOrigin option', function() {
format = new KML({crossOrigin: null});
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Placemark>' +
' <Style>' +
' <IconStyle>' +
' <Icon>' +
' <href>http://foo.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' </Placemark>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://foo.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.be(null);
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
@@ -2066,8 +2107,6 @@ describe('ol.format.KML', function() {
' </Placemark>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
@@ -2552,6 +2591,99 @@ describe('ol.format.KML', function() {
expect(s.getFill().getColor()).to.eql([0, 0, 0, 0]);
});
it('can read a normal IconStyle', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Placemark id="a">' +
' <StyleMap>' +
' <Pair>' +
' <key>normal</key>' +
' <Style>' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' </Pair>' +
' </StyleMap>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can read a normal IconStyle with crossOrigin option', function() {
format = new KML({crossOrigin: null});
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Placemark id="a">' +
' <StyleMap>' +
' <Pair>' +
' <key>normal</key>' +
' <Style>' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' </Pair>' +
' </StyleMap>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.be(null);
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('ignores highlight styles', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
@@ -2582,7 +2714,6 @@ describe('ol.format.KML', function() {
const s = styleArray[0];
expect(s).to.be.an(Style);
expect(s).to.be(getDefaultStyle());
});
it('uses normal styles instead of highlight styles', function() {
@@ -2728,6 +2859,103 @@ describe('ol.format.KML', function() {
expect(s.getFill().getColor()).to.eql([120, 86, 52, 18 / 255]);
});
it('can use IconStyles in StyleMaps before they are defined', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <StyleMap id="fooMap">' +
' <Pair>' +
' <key>normal</key>' +
' <styleUrl>#foo</styleUrl>' +
' </Pair>' +
' </StyleMap>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' <Placemark>' +
' <styleUrl>#fooMap</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can use IconStyles with crossOrigin option in StyleMaps before they are defined', function() {
format = new KML({crossOrigin: null});
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <StyleMap id="fooMap">' +
' <Pair>' +
' <key>normal</key>' +
' <styleUrl>#foo</styleUrl>' +
' </Pair>' +
' </StyleMap>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' <Placemark>' +
' <styleUrl>#fooMap</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.be(null);
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
});
describe('shared styles', function() {
@@ -2762,6 +2990,91 @@ describe('ol.format.KML', function() {
expect(fillStyle.getColor()).to.eql([0x78, 0x56, 0x34, 0x12 / 255]);
});
it('can apply a shared IconStyle to a feature', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' <Placemark>' +
' <styleUrl>#foo</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can apply a shared IconStyle with crossOrigin option to a feature', function() {
format = new KML({crossOrigin: null});
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' <Placemark>' +
' <styleUrl>#foo</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.be(null);
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can read a shared style from a Folder', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
@@ -2794,6 +3107,95 @@ describe('ol.format.KML', function() {
expect(fillStyle.getColor()).to.eql([0x78, 0x56, 0x34, 0x12 / 255]);
});
it('can read a shared IconStyle from a Folder', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Folder>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' </Folder>' +
' <Placemark>' +
' <styleUrl>#foo</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.eql('anonymous');
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can read a shared IconStyle with crossOrigin option from a Folder', function() {
format = new KML({crossOrigin: null});
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +
' <Document>' +
' <Folder>' +
' <Style id="foo">' +
' <IconStyle>' +
' <Icon>' +
' <href>http://bar.png</href>' +
' </Icon>' +
' </IconStyle>' +
' </Style>' +
' </Folder>' +
' <Placemark>' +
' <styleUrl>#foo</styleUrl>' +
' </Placemark>' +
' </Document>' +
'</kml>';
const fs = format.readFeatures(text);
expect(fs).to.have.length(1);
const f = fs[0];
expect(f).to.be.an(Feature);
const styleFunction = f.getStyleFunction();
expect(styleFunction).not.to.be(undefined);
const styleArray = styleFunction(f, 0);
expect(styleArray).to.be.an(Array);
expect(styleArray).to.have.length(1);
const style = styleArray[0];
expect(style).to.be.an(Style);
expect(style.getFill()).to.be(getDefaultFillStyle());
expect(style.getStroke()).to.be(getDefaultStrokeStyle());
const imageStyle = style.getImage();
expect(imageStyle).to.be.an(Icon);
expect(new URL(imageStyle.getSrc()).href).to.eql(new URL('http://bar.png').href);
expect(imageStyle.getAnchor()).to.be(null);
expect(imageStyle.getOrigin()).to.be(null);
expect(imageStyle.getRotation()).to.eql(0);
expect(imageStyle.getSize()).to.be(null);
expect(imageStyle.getScale()).to.be(1);
expect(imageStyle.getImage().crossOrigin).to.be(null);
expect(style.getText()).to.be(getDefaultTextStyle());
expect(style.getZIndex()).to.be(undefined);
});
it('can apply a shared style to multiple features', function() {
const text =
'<kml xmlns="http://earth.google.com/kml/2.2">' +