Manual class transform
This commit is contained in:
Tim Schaub
+142
-143
@@ -38,161 +38,160 @@ import {createCanvasContext2D} from '../dom.js';
|
||||
* edges overlap when being rendered). To avoid this we add a
|
||||
* padding around each image.
|
||||
*/
|
||||
const Atlas = function(size, space) {
|
||||
class Atlas {
|
||||
constructor(size, space) {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.space_ = space;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas~AtlasBlock>}
|
||||
*/
|
||||
this.emptyBlocks_ = [{x: 0, y: 0, width: size, height: size}];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, module:ol/style/Atlas~AtlasInfo>}
|
||||
*/
|
||||
this.entries_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
this.context_ = createCanvasContext2D(size, size);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas_ = this.context_.canvas;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The atlas info.
|
||||
*/
|
||||
get(id) {
|
||||
return this.entries_[id] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback`.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry.
|
||||
*/
|
||||
add(id, width, height, renderCallback, opt_this) {
|
||||
for (let i = 0, ii = this.emptyBlocks_.length; i < ii; ++i) {
|
||||
const block = this.emptyBlocks_[i];
|
||||
if (block.width >= width + this.space_ &&
|
||||
block.height >= height + this.space_) {
|
||||
// we found a block that is big enough for our entry
|
||||
const entry = {
|
||||
offsetX: block.x + this.space_,
|
||||
offsetY: block.y + this.space_,
|
||||
image: this.canvas_
|
||||
};
|
||||
this.entries_[id] = entry;
|
||||
|
||||
// render the image on the atlas image
|
||||
renderCallback.call(opt_this, this.context_,
|
||||
block.x + this.space_, block.y + this.space_);
|
||||
|
||||
// split the block after the insertion, either horizontally or vertically
|
||||
this.split_(i, block, width + this.space_, height + this.space_);
|
||||
|
||||
return entry;
|
||||
}
|
||||
}
|
||||
|
||||
// there is no space for the new entry in this atlas
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
* @param {number} index The index of the block.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} block The block to split.
|
||||
* @param {number} width The width of the entry to insert.
|
||||
* @param {number} height The height of the entry to insert.
|
||||
*/
|
||||
this.space_ = space;
|
||||
split_(index, block, width, height) {
|
||||
const deltaWidth = block.width - width;
|
||||
const deltaHeight = block.height - height;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas~AtlasBlock>}
|
||||
*/
|
||||
this.emptyBlocks_ = [{x: 0, y: 0, width: size, height: size}];
|
||||
/** @type {module:ol/style/Atlas~AtlasBlock} */
|
||||
let newBlock1;
|
||||
/** @type {module:ol/style/Atlas~AtlasBlock} */
|
||||
let newBlock2;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Object.<string, module:ol/style/Atlas~AtlasInfo>}
|
||||
*/
|
||||
this.entries_ = {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
this.context_ = createCanvasContext2D(size, size);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas_ = this.context_.canvas;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The atlas info.
|
||||
*/
|
||||
Atlas.prototype.get = function(id) {
|
||||
return this.entries_[id] || null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback`.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry.
|
||||
*/
|
||||
Atlas.prototype.add = function(id, width, height, renderCallback, opt_this) {
|
||||
for (let i = 0, ii = this.emptyBlocks_.length; i < ii; ++i) {
|
||||
const block = this.emptyBlocks_[i];
|
||||
if (block.width >= width + this.space_ &&
|
||||
block.height >= height + this.space_) {
|
||||
// we found a block that is big enough for our entry
|
||||
const entry = {
|
||||
offsetX: block.x + this.space_,
|
||||
offsetY: block.y + this.space_,
|
||||
image: this.canvas_
|
||||
if (deltaWidth > deltaHeight) {
|
||||
// split vertically
|
||||
// block right of the inserted entry
|
||||
newBlock1 = {
|
||||
x: block.x + width,
|
||||
y: block.y,
|
||||
width: block.width - width,
|
||||
height: block.height
|
||||
};
|
||||
this.entries_[id] = entry;
|
||||
|
||||
// render the image on the atlas image
|
||||
renderCallback.call(opt_this, this.context_,
|
||||
block.x + this.space_, block.y + this.space_);
|
||||
// block below the inserted entry
|
||||
newBlock2 = {
|
||||
x: block.x,
|
||||
y: block.y + height,
|
||||
width: width,
|
||||
height: block.height - height
|
||||
};
|
||||
this.updateBlocks_(index, newBlock1, newBlock2);
|
||||
} else {
|
||||
// split horizontally
|
||||
// block right of the inserted entry
|
||||
newBlock1 = {
|
||||
x: block.x + width,
|
||||
y: block.y,
|
||||
width: block.width - width,
|
||||
height: height
|
||||
};
|
||||
|
||||
// split the block after the insertion, either horizontally or vertically
|
||||
this.split_(i, block, width + this.space_, height + this.space_);
|
||||
|
||||
return entry;
|
||||
// block below the inserted entry
|
||||
newBlock2 = {
|
||||
x: block.x,
|
||||
y: block.y + height,
|
||||
width: block.width,
|
||||
height: block.height - height
|
||||
};
|
||||
this.updateBlocks_(index, newBlock1, newBlock2);
|
||||
}
|
||||
}
|
||||
|
||||
// there is no space for the new entry in this atlas
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {number} index The index of the block.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} block The block to split.
|
||||
* @param {number} width The width of the entry to insert.
|
||||
* @param {number} height The height of the entry to insert.
|
||||
*/
|
||||
Atlas.prototype.split_ = function(index, block, width, height) {
|
||||
const deltaWidth = block.width - width;
|
||||
const deltaHeight = block.height - height;
|
||||
|
||||
/** @type {module:ol/style/Atlas~AtlasBlock} */
|
||||
let newBlock1;
|
||||
/** @type {module:ol/style/Atlas~AtlasBlock} */
|
||||
let newBlock2;
|
||||
|
||||
if (deltaWidth > deltaHeight) {
|
||||
// split vertically
|
||||
// block right of the inserted entry
|
||||
newBlock1 = {
|
||||
x: block.x + width,
|
||||
y: block.y,
|
||||
width: block.width - width,
|
||||
height: block.height
|
||||
};
|
||||
|
||||
// block below the inserted entry
|
||||
newBlock2 = {
|
||||
x: block.x,
|
||||
y: block.y + height,
|
||||
width: width,
|
||||
height: block.height - height
|
||||
};
|
||||
this.updateBlocks_(index, newBlock1, newBlock2);
|
||||
} else {
|
||||
// split horizontally
|
||||
// block right of the inserted entry
|
||||
newBlock1 = {
|
||||
x: block.x + width,
|
||||
y: block.y,
|
||||
width: block.width - width,
|
||||
height: height
|
||||
};
|
||||
|
||||
// block below the inserted entry
|
||||
newBlock2 = {
|
||||
x: block.x,
|
||||
y: block.y + height,
|
||||
width: block.width,
|
||||
height: block.height - height
|
||||
};
|
||||
this.updateBlocks_(index, newBlock1, newBlock2);
|
||||
/**
|
||||
* Remove the old block and insert new blocks at the same array position.
|
||||
* The new blocks are inserted at the same position, so that splitted
|
||||
* blocks (that are potentially smaller) are filled first.
|
||||
* @private
|
||||
* @param {number} index The index of the block to remove.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} newBlock1 The 1st block to add.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} newBlock2 The 2nd block to add.
|
||||
*/
|
||||
updateBlocks_(index, newBlock1, newBlock2) {
|
||||
const args = [index, 1];
|
||||
if (newBlock1.width > 0 && newBlock1.height > 0) {
|
||||
args.push(newBlock1);
|
||||
}
|
||||
if (newBlock2.width > 0 && newBlock2.height > 0) {
|
||||
args.push(newBlock2);
|
||||
}
|
||||
this.emptyBlocks_.splice.apply(this.emptyBlocks_, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Remove the old block and insert new blocks at the same array position.
|
||||
* The new blocks are inserted at the same position, so that splitted
|
||||
* blocks (that are potentially smaller) are filled first.
|
||||
* @private
|
||||
* @param {number} index The index of the block to remove.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} newBlock1 The 1st block to add.
|
||||
* @param {module:ol/style/Atlas~AtlasBlock} newBlock2 The 2nd block to add.
|
||||
*/
|
||||
Atlas.prototype.updateBlocks_ = function(index, newBlock1, newBlock2) {
|
||||
const args = [index, 1];
|
||||
if (newBlock1.width > 0 && newBlock1.height > 0) {
|
||||
args.push(newBlock1);
|
||||
}
|
||||
if (newBlock2.width > 0 && newBlock2.height > 0) {
|
||||
args.push(newBlock2);
|
||||
}
|
||||
this.emptyBlocks_.splice.apply(this.emptyBlocks_, args);
|
||||
};
|
||||
export default Atlas;
|
||||
|
||||
+175
-178
@@ -58,199 +58,196 @@ const MAX_ATLAS_SIZE = -1;
|
||||
* @api
|
||||
* @param {module:ol/style/AtlasManager~Options=} opt_options Options.
|
||||
*/
|
||||
const AtlasManager = function(opt_options) {
|
||||
class AtlasManager {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* The size in pixels of the latest atlas image.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.currentSize_ = options.initialSize !== undefined ?
|
||||
options.initialSize : INITIAL_ATLAS_SIZE;
|
||||
/**
|
||||
* The size in pixels of the latest atlas image.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.currentSize_ = options.initialSize !== undefined ?
|
||||
options.initialSize : INITIAL_ATLAS_SIZE;
|
||||
|
||||
/**
|
||||
* The maximum size in pixels of atlas images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.maxSize_ = options.maxSize !== undefined ?
|
||||
options.maxSize : MAX_ATLAS_SIZE != -1 ?
|
||||
MAX_ATLAS_SIZE : WEBGL_MAX_TEXTURE_SIZE !== undefined ?
|
||||
WEBGL_MAX_TEXTURE_SIZE : 2048;
|
||||
/**
|
||||
* The maximum size in pixels of atlas images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.maxSize_ = options.maxSize !== undefined ?
|
||||
options.maxSize : MAX_ATLAS_SIZE != -1 ?
|
||||
MAX_ATLAS_SIZE : WEBGL_MAX_TEXTURE_SIZE !== undefined ?
|
||||
WEBGL_MAX_TEXTURE_SIZE : 2048;
|
||||
|
||||
/**
|
||||
* The size in pixels between images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.space_ = options.space !== undefined ? options.space : 1;
|
||||
/**
|
||||
* The size in pixels between images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.space_ = options.space !== undefined ? options.space : 1;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas>}
|
||||
*/
|
||||
this.atlases_ = [new Atlas(this.currentSize_, this.space_)];
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas>}
|
||||
*/
|
||||
this.atlases_ = [new Atlas(this.currentSize_, this.space_)];
|
||||
|
||||
/**
|
||||
* The size in pixels of the latest atlas image for hit-detection images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.currentHitSize_ = this.currentSize_;
|
||||
/**
|
||||
* The size in pixels of the latest atlas image for hit-detection images.
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.currentHitSize_ = this.currentSize_;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas>}
|
||||
*/
|
||||
this.hitAtlases_ = [new Atlas(this.currentHitSize_, this.space_)];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the entry is not part of the atlas manager.
|
||||
*/
|
||||
AtlasManager.prototype.getInfo = function(id) {
|
||||
/** @type {?module:ol/style/Atlas~AtlasInfo} */
|
||||
const info = this.getInfo_(this.atlases_, id);
|
||||
|
||||
if (!info) {
|
||||
return null;
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/style/Atlas>}
|
||||
*/
|
||||
this.hitAtlases_ = [new Atlas(this.currentHitSize_, this.space_)];
|
||||
}
|
||||
const hitInfo = /** @type {module:ol/style/Atlas~AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
|
||||
|
||||
return this.mergeInfos_(info, hitInfo);
|
||||
};
|
||||
/**
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the entry is not part of the atlas manager.
|
||||
*/
|
||||
getInfo(id) {
|
||||
/** @type {?module:ol/style/Atlas~AtlasInfo} */
|
||||
const info = this.getInfo_(this.atlases_, id);
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<module:ol/style/Atlas>} atlases The atlases to search.
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry,
|
||||
* or `null` if the entry is not part of the atlases.
|
||||
*/
|
||||
AtlasManager.prototype.getInfo_ = function(atlases, id) {
|
||||
for (let i = 0, ii = atlases.length; i < ii; ++i) {
|
||||
const atlas = atlases[i];
|
||||
const info = atlas.get(id);
|
||||
if (info) {
|
||||
return info;
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const hitInfo = /** @type {module:ol/style/Atlas~AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {module:ol/style/Atlas~AtlasInfo} info The info for the real image.
|
||||
* @param {module:ol/style/Atlas~AtlasInfo} hitInfo The info for the hit-detection
|
||||
* image.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the entry is not part of the atlases.
|
||||
*/
|
||||
AtlasManager.prototype.mergeInfos_ = function(info, hitInfo) {
|
||||
return (
|
||||
/** @type {module:ol/style/AtlasManager~AtlasManagerInfo} */ ({
|
||||
offsetX: info.offsetX,
|
||||
offsetY: info.offsetY,
|
||||
image: info.image,
|
||||
hitImage: hitInfo.image
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Add an image to the atlas manager.
|
||||
*
|
||||
* If an entry for the given id already exists, the entry will
|
||||
* be overridden (but the space on the atlas graphic will not be freed).
|
||||
*
|
||||
* If `renderHitCallback` is provided, the image (or the hit-detection version
|
||||
* of the image) will be rendered into a separate hit-detection atlas image.
|
||||
*
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)=}
|
||||
* opt_renderHitCallback Called to render a hit-detection image onto a hit
|
||||
* detection atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback` and `renderHitCallback`.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the image is too big.
|
||||
*/
|
||||
AtlasManager.prototype.add = function(id, width, height,
|
||||
renderCallback, opt_renderHitCallback, opt_this) {
|
||||
if (width + this.space_ > this.maxSize_ ||
|
||||
height + this.space_ > this.maxSize_) {
|
||||
return null;
|
||||
return this.mergeInfos_(info, hitInfo);
|
||||
}
|
||||
|
||||
/** @type {?module:ol/style/Atlas~AtlasInfo} */
|
||||
const info = this.add_(false, id, width, height, renderCallback, opt_this);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// even if no hit-detection entry is requested, we insert a fake entry into
|
||||
// the hit-detection atlas, to make sure that the offset is the same for
|
||||
// the original image and the hit-detection image.
|
||||
const renderHitCallback = opt_renderHitCallback !== undefined ?
|
||||
opt_renderHitCallback : UNDEFINED;
|
||||
|
||||
const hitInfo = /** @type {module:ol/style/Atlas~AtlasInfo} */ (this.add_(true,
|
||||
id, width, height, renderHitCallback, opt_this));
|
||||
|
||||
return this.mergeInfos_(info, hitInfo);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {boolean} isHitAtlas If the hit-detection atlases are used.
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback` and `renderHitCallback`.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry,
|
||||
* or `null` if the image is too big.
|
||||
*/
|
||||
AtlasManager.prototype.add_ = function(isHitAtlas, id, width, height, renderCallback, opt_this) {
|
||||
const atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
|
||||
let atlas, info, i, ii;
|
||||
for (i = 0, ii = atlases.length; i < ii; ++i) {
|
||||
atlas = atlases[i];
|
||||
info = atlas.add(id, width, height, renderCallback, opt_this);
|
||||
if (info) {
|
||||
return info;
|
||||
} else if (!info && i === ii - 1) {
|
||||
// the entry could not be added to one of the existing atlases,
|
||||
// create a new atlas that is twice as big and try to add to this one.
|
||||
let size;
|
||||
if (isHitAtlas) {
|
||||
size = Math.min(this.currentHitSize_ * 2, this.maxSize_);
|
||||
this.currentHitSize_ = size;
|
||||
} else {
|
||||
size = Math.min(this.currentSize_ * 2, this.maxSize_);
|
||||
this.currentSize_ = size;
|
||||
/**
|
||||
* @private
|
||||
* @param {Array.<module:ol/style/Atlas>} atlases The atlases to search.
|
||||
* @param {string} id The identifier of the entry to check.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry,
|
||||
* or `null` if the entry is not part of the atlases.
|
||||
*/
|
||||
getInfo_(atlases, id) {
|
||||
for (let i = 0, ii = atlases.length; i < ii; ++i) {
|
||||
const atlas = atlases[i];
|
||||
const info = atlas.get(id);
|
||||
if (info) {
|
||||
return info;
|
||||
}
|
||||
atlas = new Atlas(size, this.space_);
|
||||
atlases.push(atlas);
|
||||
// run the loop another time
|
||||
++ii;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {module:ol/style/Atlas~AtlasInfo} info The info for the real image.
|
||||
* @param {module:ol/style/Atlas~AtlasInfo} hitInfo The info for the hit-detection
|
||||
* image.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the entry is not part of the atlases.
|
||||
*/
|
||||
mergeInfos_(info, hitInfo) {
|
||||
return (
|
||||
/** @type {module:ol/style/AtlasManager~AtlasManagerInfo} */ ({
|
||||
offsetX: info.offsetX,
|
||||
offsetY: info.offsetY,
|
||||
image: info.image,
|
||||
hitImage: hitInfo.image
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an image to the atlas manager.
|
||||
*
|
||||
* If an entry for the given id already exists, the entry will
|
||||
* be overridden (but the space on the atlas graphic will not be freed).
|
||||
*
|
||||
* If `renderHitCallback` is provided, the image (or the hit-detection version
|
||||
* of the image) will be rendered into a separate hit-detection atlas image.
|
||||
*
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)=}
|
||||
* opt_renderHitCallback Called to render a hit-detection image onto a hit
|
||||
* detection atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback` and `renderHitCallback`.
|
||||
* @return {?module:ol/style/AtlasManager~AtlasManagerInfo} The position and atlas image for the
|
||||
* entry, or `null` if the image is too big.
|
||||
*/
|
||||
add(id, width, height, renderCallback, opt_renderHitCallback, opt_this) {
|
||||
if (width + this.space_ > this.maxSize_ ||
|
||||
height + this.space_ > this.maxSize_) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/** @type {?module:ol/style/Atlas~AtlasInfo} */
|
||||
const info = this.add_(false, id, width, height, renderCallback, opt_this);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// even if no hit-detection entry is requested, we insert a fake entry into
|
||||
// the hit-detection atlas, to make sure that the offset is the same for
|
||||
// the original image and the hit-detection image.
|
||||
const renderHitCallback = opt_renderHitCallback !== undefined ?
|
||||
opt_renderHitCallback : UNDEFINED;
|
||||
|
||||
const hitInfo = /** @type {module:ol/style/Atlas~AtlasInfo} */ (this.add_(true,
|
||||
id, width, height, renderHitCallback, opt_this));
|
||||
|
||||
return this.mergeInfos_(info, hitInfo);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {boolean} isHitAtlas If the hit-detection atlases are used.
|
||||
* @param {string} id The identifier of the entry to add.
|
||||
* @param {number} width The width.
|
||||
* @param {number} height The height.
|
||||
* @param {function(CanvasRenderingContext2D, number, number)} renderCallback
|
||||
* Called to render the new image onto an atlas image.
|
||||
* @param {Object=} opt_this Value to use as `this` when executing
|
||||
* `renderCallback` and `renderHitCallback`.
|
||||
* @return {?module:ol/style/Atlas~AtlasInfo} The position and atlas image for the entry,
|
||||
* or `null` if the image is too big.
|
||||
*/
|
||||
add_(isHitAtlas, id, width, height, renderCallback, opt_this) {
|
||||
const atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
|
||||
let atlas, info, i, ii;
|
||||
for (i = 0, ii = atlases.length; i < ii; ++i) {
|
||||
atlas = atlases[i];
|
||||
info = atlas.add(id, width, height, renderCallback, opt_this);
|
||||
if (info) {
|
||||
return info;
|
||||
} else if (!info && i === ii - 1) {
|
||||
// the entry could not be added to one of the existing atlases,
|
||||
// create a new atlas that is twice as big and try to add to this one.
|
||||
let size;
|
||||
if (isHitAtlas) {
|
||||
size = Math.min(this.currentHitSize_ * 2, this.maxSize_);
|
||||
this.currentHitSize_ = size;
|
||||
} else {
|
||||
size = Math.min(this.currentSize_ * 2, this.maxSize_);
|
||||
this.currentSize_ = size;
|
||||
}
|
||||
atlas = new Atlas(size, this.space_);
|
||||
atlases.push(atlas);
|
||||
// run the loop another time
|
||||
++ii;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default AtlasManager;
|
||||
|
||||
+43
-41
@@ -29,52 +29,54 @@ import RegularShape from '../style/RegularShape.js';
|
||||
* @extends {module:ol/style/RegularShape}
|
||||
* @api
|
||||
*/
|
||||
const CircleStyle = function(opt_options) {
|
||||
class CircleStyle {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
RegularShape.call(this, {
|
||||
points: Infinity,
|
||||
fill: options.fill,
|
||||
radius: options.radius,
|
||||
snapToPixel: options.snapToPixel,
|
||||
stroke: options.stroke,
|
||||
atlasManager: options.atlasManager
|
||||
});
|
||||
RegularShape.call(this, {
|
||||
points: Infinity,
|
||||
fill: options.fill,
|
||||
radius: options.radius,
|
||||
snapToPixel: options.snapToPixel,
|
||||
stroke: options.stroke,
|
||||
atlasManager: options.atlasManager
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too.
|
||||
* @return {module:ol/style/Circle} The cloned style.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
clone() {
|
||||
const style = new CircleStyle({
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
radius: this.getRadius(),
|
||||
snapToPixel: this.getSnapToPixel(),
|
||||
atlasManager: this.atlasManager_
|
||||
});
|
||||
style.setOpacity(this.getOpacity());
|
||||
style.setScale(this.getScale());
|
||||
return style;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the circle radius.
|
||||
*
|
||||
* @param {number} radius Circle radius.
|
||||
* @api
|
||||
*/
|
||||
setRadius(radius) {
|
||||
this.radius_ = radius;
|
||||
this.render_(this.atlasManager_);
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CircleStyle, RegularShape);
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too.
|
||||
* @return {module:ol/style/Circle} The cloned style.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
CircleStyle.prototype.clone = function() {
|
||||
const style = new CircleStyle({
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
radius: this.getRadius(),
|
||||
snapToPixel: this.getSnapToPixel(),
|
||||
atlasManager: this.atlasManager_
|
||||
});
|
||||
style.setOpacity(this.getOpacity());
|
||||
style.setScale(this.getScale());
|
||||
return style;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the circle radius.
|
||||
*
|
||||
* @param {number} radius Circle radius.
|
||||
* @api
|
||||
*/
|
||||
CircleStyle.prototype.setRadius = function(radius) {
|
||||
this.radius_ = radius;
|
||||
this.render_(this.atlasManager_);
|
||||
};
|
||||
export default CircleStyle;
|
||||
|
||||
+64
-65
@@ -21,74 +21,73 @@ import {asString} from '../color.js';
|
||||
* @param {module:ol/style/Fill~Options=} opt_options Options.
|
||||
* @api
|
||||
*/
|
||||
const Fill = function(opt_options) {
|
||||
class Fill {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color|module:ol/colorlike~ColorLike}
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? options.color : null;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color|module:ol/colorlike~ColorLike}
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? options.color : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style. The color is not cloned if it is an {@link module:ol/colorlike~ColorLike}.
|
||||
* @return {module:ol/style/Fill} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
Fill.prototype.clone = function() {
|
||||
const color = this.getColor();
|
||||
return new Fill({
|
||||
color: (color && color.slice) ? color.slice() : color || undefined
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the fill color.
|
||||
* @return {module:ol/color~Color|module:ol/colorlike~ColorLike} Color.
|
||||
* @api
|
||||
*/
|
||||
Fill.prototype.getColor = function() {
|
||||
return this.color_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the color.
|
||||
*
|
||||
* @param {module:ol/color~Color|module:ol/colorlike~ColorLike} color Color.
|
||||
* @api
|
||||
*/
|
||||
Fill.prototype.setColor = function(color) {
|
||||
this.color_ = color;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {string} The checksum.
|
||||
*/
|
||||
Fill.prototype.getChecksum = function() {
|
||||
if (this.checksum_ === undefined) {
|
||||
if (
|
||||
this.color_ instanceof CanvasPattern ||
|
||||
this.color_ instanceof CanvasGradient
|
||||
) {
|
||||
this.checksum_ = getUid(this.color_).toString();
|
||||
} else {
|
||||
this.checksum_ = 'f' + (this.color_ ? asString(this.color_) : '-');
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
return this.checksum_;
|
||||
};
|
||||
/**
|
||||
* Clones the style. The color is not cloned if it is an {@link module:ol/colorlike~ColorLike}.
|
||||
* @return {module:ol/style/Fill} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
clone() {
|
||||
const color = this.getColor();
|
||||
return new Fill({
|
||||
color: (color && color.slice) ? color.slice() : color || undefined
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the fill color.
|
||||
* @return {module:ol/color~Color|module:ol/colorlike~ColorLike} Color.
|
||||
* @api
|
||||
*/
|
||||
getColor() {
|
||||
return this.color_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the color.
|
||||
*
|
||||
* @param {module:ol/color~Color|module:ol/colorlike~ColorLike} color Color.
|
||||
* @api
|
||||
*/
|
||||
setColor(color) {
|
||||
this.color_ = color;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {string} The checksum.
|
||||
*/
|
||||
getChecksum() {
|
||||
if (this.checksum_ === undefined) {
|
||||
if (
|
||||
this.color_ instanceof CanvasPattern ||
|
||||
this.color_ instanceof CanvasGradient
|
||||
) {
|
||||
this.checksum_ = getUid(this.color_).toString();
|
||||
} else {
|
||||
this.checksum_ = 'f' + (this.color_ ? asString(this.color_) : '-');
|
||||
}
|
||||
}
|
||||
|
||||
return this.checksum_;
|
||||
}
|
||||
}
|
||||
|
||||
export default Fill;
|
||||
|
||||
+305
-315
@@ -61,374 +61,364 @@ import ImageStyle from '../style/Image.js';
|
||||
* @extends {module:ol/style/Image}
|
||||
* @api
|
||||
*/
|
||||
const Icon = function(opt_options) {
|
||||
class Icon {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.anchor_ = options.anchor !== undefined ? options.anchor : [0.5, 0.5];
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.anchor_ = options.anchor !== undefined ? options.anchor : [0.5, 0.5];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.normalizedAnchor_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.normalizedAnchor_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconOrigin}
|
||||
*/
|
||||
this.anchorOrigin_ = options.anchorOrigin !== undefined ?
|
||||
options.anchorOrigin : IconOrigin.TOP_LEFT;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconOrigin}
|
||||
*/
|
||||
this.anchorOrigin_ = options.anchorOrigin !== undefined ?
|
||||
options.anchorOrigin : IconOrigin.TOP_LEFT;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconAnchorUnits}
|
||||
*/
|
||||
this.anchorXUnits_ = options.anchorXUnits !== undefined ?
|
||||
options.anchorXUnits : IconAnchorUnits.FRACTION;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconAnchorUnits}
|
||||
*/
|
||||
this.anchorXUnits_ = options.anchorXUnits !== undefined ?
|
||||
options.anchorXUnits : IconAnchorUnits.FRACTION;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconAnchorUnits}
|
||||
*/
|
||||
this.anchorYUnits_ = options.anchorYUnits !== undefined ?
|
||||
options.anchorYUnits : IconAnchorUnits.FRACTION;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconAnchorUnits}
|
||||
*/
|
||||
this.anchorYUnits_ = options.anchorYUnits !== undefined ?
|
||||
options.anchorYUnits : IconAnchorUnits.FRACTION;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {?string}
|
||||
*/
|
||||
this.crossOrigin_ =
|
||||
options.crossOrigin !== undefined ? options.crossOrigin : null;
|
||||
/**
|
||||
* @private
|
||||
* @type {?string}
|
||||
*/
|
||||
this.crossOrigin_ =
|
||||
options.crossOrigin !== undefined ? options.crossOrigin : null;
|
||||
|
||||
/**
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
const image = options.img !== undefined ? options.img : null;
|
||||
/**
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
const image = options.img !== undefined ? options.img : null;
|
||||
|
||||
/**
|
||||
* @type {module:ol/size~Size}
|
||||
*/
|
||||
const imgSize = options.imgSize !== undefined ? options.imgSize : null;
|
||||
/**
|
||||
* @type {module:ol/size~Size}
|
||||
*/
|
||||
const imgSize = options.imgSize !== undefined ? options.imgSize : null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
let src = options.src;
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
let src = options.src;
|
||||
|
||||
assert(!(src !== undefined && image),
|
||||
4); // `image` and `src` cannot be provided at the same time
|
||||
assert(!image || (image && imgSize),
|
||||
5); // `imgSize` must be set when `image` is provided
|
||||
assert(!(src !== undefined && image),
|
||||
4); // `image` and `src` cannot be provided at the same time
|
||||
assert(!image || (image && imgSize),
|
||||
5); // `imgSize` must be set when `image` is provided
|
||||
|
||||
if ((src === undefined || src.length === 0) && image) {
|
||||
src = image.src || getUid(image).toString();
|
||||
}
|
||||
assert(src !== undefined && src.length > 0,
|
||||
6); // A defined and non-empty `src` or `image` must be provided
|
||||
|
||||
/**
|
||||
* @type {module:ol/ImageState}
|
||||
*/
|
||||
const imageState = options.src !== undefined ?
|
||||
ImageState.IDLE : ImageState.LOADED;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color}
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? asArray(options.color) : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconImage}
|
||||
*/
|
||||
this.iconImage_ = getIconImage(
|
||||
image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.offset_ = options.offset !== undefined ? options.offset : [0, 0];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconOrigin}
|
||||
*/
|
||||
this.offsetOrigin_ = options.offsetOrigin !== undefined ?
|
||||
options.offsetOrigin : IconOrigin.TOP_LEFT;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.origin_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/size~Size}
|
||||
*/
|
||||
this.size_ = options.size !== undefined ? options.size : null;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
const opacity = options.opacity !== undefined ? options.opacity : 1;
|
||||
|
||||
/**
|
||||
* @type {boolean}
|
||||
*/
|
||||
const rotateWithView = options.rotateWithView !== undefined ?
|
||||
options.rotateWithView : false;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
const rotation = options.rotation !== undefined ? options.rotation : 0;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
const scale = options.scale !== undefined ? options.scale : 1;
|
||||
|
||||
/**
|
||||
* @type {boolean}
|
||||
*/
|
||||
const snapToPixel = options.snapToPixel !== undefined ?
|
||||
options.snapToPixel : true;
|
||||
|
||||
ImageStyle.call(this, {
|
||||
opacity: opacity,
|
||||
rotation: rotation,
|
||||
scale: scale,
|
||||
snapToPixel: snapToPixel,
|
||||
rotateWithView: rotateWithView
|
||||
});
|
||||
|
||||
if ((src === undefined || src.length === 0) && image) {
|
||||
src = image.src || getUid(image).toString();
|
||||
}
|
||||
assert(src !== undefined && src.length > 0,
|
||||
6); // A defined and non-empty `src` or `image` must be provided
|
||||
|
||||
/**
|
||||
* @type {module:ol/ImageState}
|
||||
* Clones the style. The underlying Image/HTMLCanvasElement is not cloned.
|
||||
* @return {module:ol/style/Icon} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
const imageState = options.src !== undefined ?
|
||||
ImageState.IDLE : ImageState.LOADED;
|
||||
clone() {
|
||||
return new Icon({
|
||||
anchor: this.anchor_.slice(),
|
||||
anchorOrigin: this.anchorOrigin_,
|
||||
anchorXUnits: this.anchorXUnits_,
|
||||
anchorYUnits: this.anchorYUnits_,
|
||||
crossOrigin: this.crossOrigin_,
|
||||
color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined,
|
||||
src: this.getSrc(),
|
||||
offset: this.offset_.slice(),
|
||||
offsetOrigin: this.offsetOrigin_,
|
||||
size: this.size_ !== null ? this.size_.slice() : undefined,
|
||||
opacity: this.getOpacity(),
|
||||
scale: this.getScale(),
|
||||
snapToPixel: this.getSnapToPixel(),
|
||||
rotation: this.getRotation(),
|
||||
rotateWithView: this.getRotateWithView()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color}
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? asArray(options.color) : null;
|
||||
getAnchor() {
|
||||
if (this.normalizedAnchor_) {
|
||||
return this.normalizedAnchor_;
|
||||
}
|
||||
let anchor = this.anchor_;
|
||||
const size = this.getSize();
|
||||
if (this.anchorXUnits_ == IconAnchorUnits.FRACTION ||
|
||||
this.anchorYUnits_ == IconAnchorUnits.FRACTION) {
|
||||
if (!size) {
|
||||
return null;
|
||||
}
|
||||
anchor = this.anchor_.slice();
|
||||
if (this.anchorXUnits_ == IconAnchorUnits.FRACTION) {
|
||||
anchor[0] *= size[0];
|
||||
}
|
||||
if (this.anchorYUnits_ == IconAnchorUnits.FRACTION) {
|
||||
anchor[1] *= size[1];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.anchorOrigin_ != IconOrigin.TOP_LEFT) {
|
||||
if (!size) {
|
||||
return null;
|
||||
}
|
||||
if (anchor === this.anchor_) {
|
||||
anchor = this.anchor_.slice();
|
||||
}
|
||||
if (this.anchorOrigin_ == IconOrigin.TOP_RIGHT ||
|
||||
this.anchorOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
anchor[0] = -anchor[0] + size[0];
|
||||
}
|
||||
if (this.anchorOrigin_ == IconOrigin.BOTTOM_LEFT ||
|
||||
this.anchorOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
anchor[1] = -anchor[1] + size[1];
|
||||
}
|
||||
}
|
||||
this.normalizedAnchor_ = anchor;
|
||||
return this.normalizedAnchor_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconImage}
|
||||
* Set the anchor point. The anchor determines the center point for the
|
||||
* symbolizer.
|
||||
*
|
||||
* @param {Array.<number>} anchor Anchor.
|
||||
* @api
|
||||
*/
|
||||
this.iconImage_ = getIconImage(
|
||||
image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
|
||||
setAnchor(anchor) {
|
||||
this.anchor_ = anchor;
|
||||
this.normalizedAnchor_ = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
* Get the icon color.
|
||||
* @return {module:ol/color~Color} Color.
|
||||
* @api
|
||||
*/
|
||||
this.offset_ = options.offset !== undefined ? options.offset : [0, 0];
|
||||
getColor() {
|
||||
return this.color_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/IconOrigin}
|
||||
* Get the image icon.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
this.offsetOrigin_ = options.offsetOrigin !== undefined ?
|
||||
options.offsetOrigin : IconOrigin.TOP_LEFT;
|
||||
getImage(pixelRatio) {
|
||||
return this.iconImage_.getImage(pixelRatio);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
* @override
|
||||
*/
|
||||
this.origin_ = null;
|
||||
getImageSize() {
|
||||
return this.iconImage_.getSize();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/size~Size}
|
||||
* @override
|
||||
*/
|
||||
this.size_ = options.size !== undefined ? options.size : null;
|
||||
getHitDetectionImageSize() {
|
||||
return this.getImageSize();
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @override
|
||||
*/
|
||||
const opacity = options.opacity !== undefined ? options.opacity : 1;
|
||||
getImageState() {
|
||||
return this.iconImage_.getImageState();
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {boolean}
|
||||
* @override
|
||||
*/
|
||||
const rotateWithView = options.rotateWithView !== undefined ?
|
||||
options.rotateWithView : false;
|
||||
getHitDetectionImage(pixelRatio) {
|
||||
return this.iconImage_.getHitDetectionImage(pixelRatio);
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
const rotation = options.rotation !== undefined ? options.rotation : 0;
|
||||
getOrigin() {
|
||||
if (this.origin_) {
|
||||
return this.origin_;
|
||||
}
|
||||
let offset = this.offset_;
|
||||
|
||||
if (this.offsetOrigin_ != IconOrigin.TOP_LEFT) {
|
||||
const size = this.getSize();
|
||||
const iconImageSize = this.iconImage_.getSize();
|
||||
if (!size || !iconImageSize) {
|
||||
return null;
|
||||
}
|
||||
offset = offset.slice();
|
||||
if (this.offsetOrigin_ == IconOrigin.TOP_RIGHT ||
|
||||
this.offsetOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
offset[0] = iconImageSize[0] - size[0] - offset[0];
|
||||
}
|
||||
if (this.offsetOrigin_ == IconOrigin.BOTTOM_LEFT ||
|
||||
this.offsetOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
offset[1] = iconImageSize[1] - size[1] - offset[1];
|
||||
}
|
||||
}
|
||||
this.origin_ = offset;
|
||||
return this.origin_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* Get the image URL.
|
||||
* @return {string|undefined} Image src.
|
||||
* @api
|
||||
*/
|
||||
const scale = options.scale !== undefined ? options.scale : 1;
|
||||
getSrc() {
|
||||
return this.iconImage_.getSrc();
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {boolean}
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
const snapToPixel = options.snapToPixel !== undefined ?
|
||||
options.snapToPixel : true;
|
||||
getSize() {
|
||||
return !this.size_ ? this.iconImage_.getSize() : this.size_;
|
||||
}
|
||||
|
||||
ImageStyle.call(this, {
|
||||
opacity: opacity,
|
||||
rotation: rotation,
|
||||
scale: scale,
|
||||
snapToPixel: snapToPixel,
|
||||
rotateWithView: rotateWithView
|
||||
});
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
listenImageChange(listener, thisArg) {
|
||||
return listen(this.iconImage_, EventType.CHANGE,
|
||||
listener, thisArg);
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
* When rendering a feature with an icon style, the vector renderer will
|
||||
* automatically call this method. However, you might want to call this
|
||||
* method yourself for preloading or other purposes.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
load() {
|
||||
this.iconImage_.load();
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
unlistenImageChange(listener, thisArg) {
|
||||
unlisten(this.iconImage_, EventType.CHANGE,
|
||||
listener, thisArg);
|
||||
}
|
||||
}
|
||||
|
||||
inherits(Icon, ImageStyle);
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style. The underlying Image/HTMLCanvasElement is not cloned.
|
||||
* @return {module:ol/style/Icon} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.clone = function() {
|
||||
return new Icon({
|
||||
anchor: this.anchor_.slice(),
|
||||
anchorOrigin: this.anchorOrigin_,
|
||||
anchorXUnits: this.anchorXUnits_,
|
||||
anchorYUnits: this.anchorYUnits_,
|
||||
crossOrigin: this.crossOrigin_,
|
||||
color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined,
|
||||
src: this.getSrc(),
|
||||
offset: this.offset_.slice(),
|
||||
offsetOrigin: this.offsetOrigin_,
|
||||
size: this.size_ !== null ? this.size_.slice() : undefined,
|
||||
opacity: this.getOpacity(),
|
||||
scale: this.getScale(),
|
||||
snapToPixel: this.getSnapToPixel(),
|
||||
rotation: this.getRotation(),
|
||||
rotateWithView: this.getRotateWithView()
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getAnchor = function() {
|
||||
if (this.normalizedAnchor_) {
|
||||
return this.normalizedAnchor_;
|
||||
}
|
||||
let anchor = this.anchor_;
|
||||
const size = this.getSize();
|
||||
if (this.anchorXUnits_ == IconAnchorUnits.FRACTION ||
|
||||
this.anchorYUnits_ == IconAnchorUnits.FRACTION) {
|
||||
if (!size) {
|
||||
return null;
|
||||
}
|
||||
anchor = this.anchor_.slice();
|
||||
if (this.anchorXUnits_ == IconAnchorUnits.FRACTION) {
|
||||
anchor[0] *= size[0];
|
||||
}
|
||||
if (this.anchorYUnits_ == IconAnchorUnits.FRACTION) {
|
||||
anchor[1] *= size[1];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.anchorOrigin_ != IconOrigin.TOP_LEFT) {
|
||||
if (!size) {
|
||||
return null;
|
||||
}
|
||||
if (anchor === this.anchor_) {
|
||||
anchor = this.anchor_.slice();
|
||||
}
|
||||
if (this.anchorOrigin_ == IconOrigin.TOP_RIGHT ||
|
||||
this.anchorOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
anchor[0] = -anchor[0] + size[0];
|
||||
}
|
||||
if (this.anchorOrigin_ == IconOrigin.BOTTOM_LEFT ||
|
||||
this.anchorOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
anchor[1] = -anchor[1] + size[1];
|
||||
}
|
||||
}
|
||||
this.normalizedAnchor_ = anchor;
|
||||
return this.normalizedAnchor_;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the anchor point. The anchor determines the center point for the
|
||||
* symbolizer.
|
||||
*
|
||||
* @param {Array.<number>} anchor Anchor.
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.setAnchor = function(anchor) {
|
||||
this.anchor_ = anchor;
|
||||
this.normalizedAnchor_ = null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the icon color.
|
||||
* @return {module:ol/color~Color} Color.
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getColor = function() {
|
||||
return this.color_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the image icon.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getImage = function(pixelRatio) {
|
||||
return this.iconImage_.getImage(pixelRatio);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.getImageSize = function() {
|
||||
return this.iconImage_.getSize();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.getHitDetectionImageSize = function() {
|
||||
return this.getImageSize();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.getImageState = function() {
|
||||
return this.iconImage_.getImageState();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.getHitDetectionImage = function(pixelRatio) {
|
||||
return this.iconImage_.getHitDetectionImage(pixelRatio);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getOrigin = function() {
|
||||
if (this.origin_) {
|
||||
return this.origin_;
|
||||
}
|
||||
let offset = this.offset_;
|
||||
|
||||
if (this.offsetOrigin_ != IconOrigin.TOP_LEFT) {
|
||||
const size = this.getSize();
|
||||
const iconImageSize = this.iconImage_.getSize();
|
||||
if (!size || !iconImageSize) {
|
||||
return null;
|
||||
}
|
||||
offset = offset.slice();
|
||||
if (this.offsetOrigin_ == IconOrigin.TOP_RIGHT ||
|
||||
this.offsetOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
offset[0] = iconImageSize[0] - size[0] - offset[0];
|
||||
}
|
||||
if (this.offsetOrigin_ == IconOrigin.BOTTOM_LEFT ||
|
||||
this.offsetOrigin_ == IconOrigin.BOTTOM_RIGHT) {
|
||||
offset[1] = iconImageSize[1] - size[1] - offset[1];
|
||||
}
|
||||
}
|
||||
this.origin_ = offset;
|
||||
return this.origin_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the image URL.
|
||||
* @return {string|undefined} Image src.
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getSrc = function() {
|
||||
return this.iconImage_.getSrc();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.getSize = function() {
|
||||
return !this.size_ ? this.iconImage_.getSize() : this.size_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.listenImageChange = function(listener, thisArg) {
|
||||
return listen(this.iconImage_, EventType.CHANGE,
|
||||
listener, thisArg);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
* When rendering a feature with an icon style, the vector renderer will
|
||||
* automatically call this method. However, you might want to call this
|
||||
* method yourself for preloading or other purposes.
|
||||
* @override
|
||||
* @api
|
||||
*/
|
||||
Icon.prototype.load = function() {
|
||||
this.iconImage_.load();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Icon.prototype.unlistenImageChange = function(listener, thisArg) {
|
||||
unlisten(this.iconImage_, EventType.CHANGE,
|
||||
listener, thisArg);
|
||||
};
|
||||
export default Icon;
|
||||
|
||||
+197
-205
@@ -19,74 +19,227 @@ import {shared as iconImageCache} from '../style/IconImageCache.js';
|
||||
* @param {module:ol/color~Color} color Color.
|
||||
* @extends {module:ol/events/EventTarget}
|
||||
*/
|
||||
const IconImage = function(image, src, size, crossOrigin, imageState, color) {
|
||||
class IconImage {
|
||||
constructor(image, src, size, crossOrigin, imageState, color) {
|
||||
|
||||
EventTarget.call(this);
|
||||
EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
this.hitDetectionImage_ = null;
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
this.hitDetectionImage_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
this.image_ = !image ? new Image() : image;
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLImageElement|HTMLCanvasElement}
|
||||
*/
|
||||
this.image_ = !image ? new Image() : image;
|
||||
|
||||
if (crossOrigin !== null) {
|
||||
this.image_.crossOrigin = crossOrigin;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas_ = color ?
|
||||
/** @type {HTMLCanvasElement} */ (document.createElement('CANVAS')) :
|
||||
null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color}
|
||||
*/
|
||||
this.color_ = color;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/events~EventsKey>}
|
||||
*/
|
||||
this.imageListenerKeys_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/ImageState}
|
||||
*/
|
||||
this.imageState_ = imageState;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/size~Size}
|
||||
*/
|
||||
this.size_ = size;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.src_ = src;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.tainting_ = false;
|
||||
if (this.imageState_ == ImageState.LOADED) {
|
||||
this.determineTainting_();
|
||||
}
|
||||
|
||||
if (crossOrigin !== null) {
|
||||
this.image_.crossOrigin = crossOrigin;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas_ = color ?
|
||||
/** @type {HTMLCanvasElement} */ (document.createElement('CANVAS')) :
|
||||
null;
|
||||
determineTainting_() {
|
||||
const context = createCanvasContext2D(1, 1);
|
||||
try {
|
||||
context.drawImage(this.image_, 0, 0);
|
||||
context.getImageData(0, 0, 1, 1);
|
||||
} catch (e) {
|
||||
this.tainting_ = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color}
|
||||
*/
|
||||
this.color_ = color;
|
||||
dispatchChangeEvent_() {
|
||||
this.dispatchEvent(EventType.CHANGE);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<module:ol/events~EventsKey>}
|
||||
*/
|
||||
this.imageListenerKeys_ = null;
|
||||
handleImageError_() {
|
||||
this.imageState_ = ImageState.ERROR;
|
||||
this.unlistenImage_();
|
||||
this.dispatchChangeEvent_();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/ImageState}
|
||||
*/
|
||||
this.imageState_ = imageState;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/size~Size}
|
||||
*/
|
||||
this.size_ = size;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.src_ = src;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.tainting_ = false;
|
||||
if (this.imageState_ == ImageState.LOADED) {
|
||||
handleImageLoad_() {
|
||||
this.imageState_ = ImageState.LOADED;
|
||||
if (this.size_) {
|
||||
this.image_.width = this.size_[0];
|
||||
this.image_.height = this.size_[1];
|
||||
}
|
||||
this.size_ = [this.image_.width, this.image_.height];
|
||||
this.unlistenImage_();
|
||||
this.determineTainting_();
|
||||
this.replaceColor_();
|
||||
this.dispatchChangeEvent_();
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element.
|
||||
*/
|
||||
getImage(pixelRatio) {
|
||||
return this.canvas_ ? this.canvas_ : this.image_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {module:ol/ImageState} Image state.
|
||||
*/
|
||||
getImageState() {
|
||||
return this.imageState_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image element.
|
||||
*/
|
||||
getHitDetectionImage(pixelRatio) {
|
||||
if (!this.hitDetectionImage_) {
|
||||
if (this.tainting_) {
|
||||
const width = this.size_[0];
|
||||
const height = this.size_[1];
|
||||
const context = createCanvasContext2D(width, height);
|
||||
context.fillRect(0, 0, width, height);
|
||||
this.hitDetectionImage_ = context.canvas;
|
||||
} else {
|
||||
this.hitDetectionImage_ = this.image_;
|
||||
}
|
||||
}
|
||||
return this.hitDetectionImage_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {module:ol/size~Size} Image size.
|
||||
*/
|
||||
getSize() {
|
||||
return this.size_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {string|undefined} Image src.
|
||||
*/
|
||||
getSrc() {
|
||||
return this.src_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
*/
|
||||
load() {
|
||||
if (this.imageState_ == ImageState.IDLE) {
|
||||
this.imageState_ = ImageState.LOADING;
|
||||
this.imageListenerKeys_ = [
|
||||
listenOnce(this.image_, EventType.ERROR,
|
||||
this.handleImageError_, this),
|
||||
listenOnce(this.image_, EventType.LOAD,
|
||||
this.handleImageLoad_, this)
|
||||
];
|
||||
try {
|
||||
this.image_.src = this.src_;
|
||||
} catch (e) {
|
||||
this.handleImageError_();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
replaceColor_() {
|
||||
if (this.tainting_ || this.color_ === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.canvas_.width = this.image_.width;
|
||||
this.canvas_.height = this.image_.height;
|
||||
|
||||
const ctx = this.canvas_.getContext('2d');
|
||||
ctx.drawImage(this.image_, 0, 0);
|
||||
|
||||
const imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
|
||||
const data = imgData.data;
|
||||
const r = this.color_[0] / 255.0;
|
||||
const g = this.color_[1] / 255.0;
|
||||
const b = this.color_[2] / 255.0;
|
||||
|
||||
for (let i = 0, ii = data.length; i < ii; i += 4) {
|
||||
data[i] *= r;
|
||||
data[i + 1] *= g;
|
||||
data[i + 2] *= b;
|
||||
}
|
||||
ctx.putImageData(imgData, 0, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Discards event handlers which listen for load completion or errors.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
unlistenImage_() {
|
||||
this.imageListenerKeys_.forEach(unlistenByKey);
|
||||
this.imageListenerKeys_ = null;
|
||||
}
|
||||
}
|
||||
|
||||
inherits(IconImage, EventTarget);
|
||||
|
||||
@@ -110,165 +263,4 @@ export function get(image, src, size, crossOrigin, imageState, color) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.determineTainting_ = function() {
|
||||
const context = createCanvasContext2D(1, 1);
|
||||
try {
|
||||
context.drawImage(this.image_, 0, 0);
|
||||
context.getImageData(0, 0, 1, 1);
|
||||
} catch (e) {
|
||||
this.tainting_ = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.dispatchChangeEvent_ = function() {
|
||||
this.dispatchEvent(EventType.CHANGE);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.handleImageError_ = function() {
|
||||
this.imageState_ = ImageState.ERROR;
|
||||
this.unlistenImage_();
|
||||
this.dispatchChangeEvent_();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.handleImageLoad_ = function() {
|
||||
this.imageState_ = ImageState.LOADED;
|
||||
if (this.size_) {
|
||||
this.image_.width = this.size_[0];
|
||||
this.image_.height = this.size_[1];
|
||||
}
|
||||
this.size_ = [this.image_.width, this.image_.height];
|
||||
this.unlistenImage_();
|
||||
this.determineTainting_();
|
||||
this.replaceColor_();
|
||||
this.dispatchChangeEvent_();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element.
|
||||
*/
|
||||
IconImage.prototype.getImage = function(pixelRatio) {
|
||||
return this.canvas_ ? this.canvas_ : this.image_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {module:ol/ImageState} Image state.
|
||||
*/
|
||||
IconImage.prototype.getImageState = function() {
|
||||
return this.imageState_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLImageElement|HTMLCanvasElement} Image element.
|
||||
*/
|
||||
IconImage.prototype.getHitDetectionImage = function(pixelRatio) {
|
||||
if (!this.hitDetectionImage_) {
|
||||
if (this.tainting_) {
|
||||
const width = this.size_[0];
|
||||
const height = this.size_[1];
|
||||
const context = createCanvasContext2D(width, height);
|
||||
context.fillRect(0, 0, width, height);
|
||||
this.hitDetectionImage_ = context.canvas;
|
||||
} else {
|
||||
this.hitDetectionImage_ = this.image_;
|
||||
}
|
||||
}
|
||||
return this.hitDetectionImage_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {module:ol/size~Size} Image size.
|
||||
*/
|
||||
IconImage.prototype.getSize = function() {
|
||||
return this.size_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {string|undefined} Image src.
|
||||
*/
|
||||
IconImage.prototype.getSrc = function() {
|
||||
return this.src_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
*/
|
||||
IconImage.prototype.load = function() {
|
||||
if (this.imageState_ == ImageState.IDLE) {
|
||||
this.imageState_ = ImageState.LOADING;
|
||||
this.imageListenerKeys_ = [
|
||||
listenOnce(this.image_, EventType.ERROR,
|
||||
this.handleImageError_, this),
|
||||
listenOnce(this.image_, EventType.LOAD,
|
||||
this.handleImageLoad_, this)
|
||||
];
|
||||
try {
|
||||
this.image_.src = this.src_;
|
||||
} catch (e) {
|
||||
this.handleImageError_();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.replaceColor_ = function() {
|
||||
if (this.tainting_ || this.color_ === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.canvas_.width = this.image_.width;
|
||||
this.canvas_.height = this.image_.height;
|
||||
|
||||
const ctx = this.canvas_.getContext('2d');
|
||||
ctx.drawImage(this.image_, 0, 0);
|
||||
|
||||
const imgData = ctx.getImageData(0, 0, this.image_.width, this.image_.height);
|
||||
const data = imgData.data;
|
||||
const r = this.color_[0] / 255.0;
|
||||
const g = this.color_[1] / 255.0;
|
||||
const b = this.color_[2] / 255.0;
|
||||
|
||||
for (let i = 0, ii = data.length; i < ii; i += 4) {
|
||||
data[i] *= r;
|
||||
data[i + 1] *= g;
|
||||
data[i + 2] *= b;
|
||||
}
|
||||
ctx.putImageData(imgData, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Discards event handlers which listen for load completion or errors.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
IconImage.prototype.unlistenImage_ = function() {
|
||||
this.imageListenerKeys_.forEach(unlistenByKey);
|
||||
this.imageListenerKeys_ = null;
|
||||
};
|
||||
export default IconImage;
|
||||
|
||||
@@ -7,26 +7,87 @@ import {asString} from '../color.js';
|
||||
* Singleton class. Available through {@link module:ol/style/IconImageCache~shared}.
|
||||
* @constructor
|
||||
*/
|
||||
const IconImageCache = function() {
|
||||
class IconImageCache {
|
||||
constructor() {
|
||||
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/style/IconImage>}
|
||||
* @private
|
||||
*/
|
||||
this.cache_ = {};
|
||||
/**
|
||||
* @type {!Object.<string, module:ol/style/IconImage>}
|
||||
* @private
|
||||
*/
|
||||
this.cache_ = {};
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.cacheSize_ = 0;
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.cacheSize_ = 0;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.maxCacheSize_ = 32;
|
||||
};
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.maxCacheSize_ = 32;
|
||||
}
|
||||
|
||||
/**
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
clear() {
|
||||
this.cache_ = {};
|
||||
this.cacheSize_ = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
expire() {
|
||||
if (this.cacheSize_ > this.maxCacheSize_) {
|
||||
let i = 0;
|
||||
for (const key in this.cache_) {
|
||||
const iconImage = this.cache_[key];
|
||||
if ((i++ & 3) === 0 && !iconImage.hasListener()) {
|
||||
delete this.cache_[key];
|
||||
--this.cacheSize_;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} src Src.
|
||||
* @param {?string} crossOrigin Cross origin.
|
||||
* @param {module:ol/color~Color} color Color.
|
||||
* @return {module:ol/style/IconImage} Icon image.
|
||||
*/
|
||||
get(src, crossOrigin, color) {
|
||||
const key = getKey(src, crossOrigin, color);
|
||||
return key in this.cache_ ? this.cache_[key] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} src Src.
|
||||
* @param {?string} crossOrigin Cross origin.
|
||||
* @param {module:ol/color~Color} color Color.
|
||||
* @param {module:ol/style/IconImage} iconImage Icon image.
|
||||
*/
|
||||
set(src, crossOrigin, color, iconImage) {
|
||||
const key = getKey(src, crossOrigin, color);
|
||||
this.cache_[key] = iconImage;
|
||||
++this.cacheSize_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the cache size of the icon cache. Default is `32`. Change this value when
|
||||
* your map uses more than 32 different icon images and you are not caching icon
|
||||
* styles on the application level.
|
||||
* @param {number} maxCacheSize Cache max size.
|
||||
* @api
|
||||
*/
|
||||
setSize(maxCacheSize) {
|
||||
this.maxCacheSize_ = maxCacheSize;
|
||||
this.expire();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
@@ -41,68 +102,6 @@ function getKey(src, crossOrigin, color) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
IconImageCache.prototype.clear = function() {
|
||||
this.cache_ = {};
|
||||
this.cacheSize_ = 0;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* FIXME empty description for jsdoc
|
||||
*/
|
||||
IconImageCache.prototype.expire = function() {
|
||||
if (this.cacheSize_ > this.maxCacheSize_) {
|
||||
let i = 0;
|
||||
for (const key in this.cache_) {
|
||||
const iconImage = this.cache_[key];
|
||||
if ((i++ & 3) === 0 && !iconImage.hasListener()) {
|
||||
delete this.cache_[key];
|
||||
--this.cacheSize_;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} src Src.
|
||||
* @param {?string} crossOrigin Cross origin.
|
||||
* @param {module:ol/color~Color} color Color.
|
||||
* @return {module:ol/style/IconImage} Icon image.
|
||||
*/
|
||||
IconImageCache.prototype.get = function(src, crossOrigin, color) {
|
||||
const key = getKey(src, crossOrigin, color);
|
||||
return key in this.cache_ ? this.cache_[key] : null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} src Src.
|
||||
* @param {?string} crossOrigin Cross origin.
|
||||
* @param {module:ol/color~Color} color Color.
|
||||
* @param {module:ol/style/IconImage} iconImage Icon image.
|
||||
*/
|
||||
IconImageCache.prototype.set = function(src, crossOrigin, color, iconImage) {
|
||||
const key = getKey(src, crossOrigin, color);
|
||||
this.cache_[key] = iconImage;
|
||||
++this.cacheSize_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the cache size of the icon cache. Default is `32`. Change this value when
|
||||
* your map uses more than 32 different icon images and you are not caching icon
|
||||
* styles on the application level.
|
||||
* @param {number} maxCacheSize Cache max size.
|
||||
* @api
|
||||
*/
|
||||
IconImageCache.prototype.setSize = function(maxCacheSize) {
|
||||
this.maxCacheSize_ = maxCacheSize;
|
||||
this.expire();
|
||||
};
|
||||
export default IconImageCache;
|
||||
|
||||
|
||||
|
||||
+181
-199
@@ -24,231 +24,213 @@
|
||||
* @param {module:ol/style/Image~Options} options Options.
|
||||
* @api
|
||||
*/
|
||||
const ImageStyle = function(options) {
|
||||
class ImageStyle {
|
||||
constructor(options) {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.opacity_ = options.opacity;
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.opacity_ = options.opacity;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.rotateWithView_ = options.rotateWithView;
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.rotateWithView_ = options.rotateWithView;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.rotation_ = options.rotation;
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.rotation_ = options.rotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.scale_ = options.scale;
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.scale_ = options.scale;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.snapToPixel_ = options.snapToPixel;
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.snapToPixel_ = options.snapToPixel;
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the symbolizer opacity.
|
||||
* @return {number} Opacity.
|
||||
* @api
|
||||
*/
|
||||
getOpacity() {
|
||||
return this.opacity_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the symbolizer opacity.
|
||||
* @return {number} Opacity.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.getOpacity = function() {
|
||||
return this.opacity_;
|
||||
};
|
||||
/**
|
||||
* Determine whether the symbolizer rotates with the map.
|
||||
* @return {boolean} Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
getRotateWithView() {
|
||||
return this.rotateWithView_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the symoblizer rotation.
|
||||
* @return {number} Rotation.
|
||||
* @api
|
||||
*/
|
||||
getRotation() {
|
||||
return this.rotation_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the symbolizer rotates with the map.
|
||||
* @return {boolean} Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.getRotateWithView = function() {
|
||||
return this.rotateWithView_;
|
||||
};
|
||||
/**
|
||||
* Get the symbolizer scale.
|
||||
* @return {number} Scale.
|
||||
* @api
|
||||
*/
|
||||
getScale() {
|
||||
return this.scale_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the symbolizer should be snapped to a pixel.
|
||||
* @return {boolean} The symbolizer should snap to a pixel.
|
||||
* @api
|
||||
*/
|
||||
getSnapToPixel() {
|
||||
return this.snapToPixel_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the symoblizer rotation.
|
||||
* @return {number} Rotation.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.getRotation = function() {
|
||||
return this.rotation_;
|
||||
};
|
||||
/**
|
||||
* Get the anchor point in pixels. The anchor determines the center point for the
|
||||
* symbolizer.
|
||||
* @abstract
|
||||
* @return {Array.<number>} Anchor.
|
||||
*/
|
||||
getAnchor() {}
|
||||
|
||||
/**
|
||||
* Get the image element for the symbolizer.
|
||||
* @abstract
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
|
||||
*/
|
||||
getImage(pixelRatio) {}
|
||||
|
||||
/**
|
||||
* Get the symbolizer scale.
|
||||
* @return {number} Scale.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.getScale = function() {
|
||||
return this.scale_;
|
||||
};
|
||||
/**
|
||||
* @abstract
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
|
||||
*/
|
||||
getHitDetectionImage(pixelRatio) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/ImageState} Image state.
|
||||
*/
|
||||
getImageState() {}
|
||||
|
||||
/**
|
||||
* Determine whether the symbolizer should be snapped to a pixel.
|
||||
* @return {boolean} The symbolizer should snap to a pixel.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.getSnapToPixel = function() {
|
||||
return this.snapToPixel_;
|
||||
};
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Image size.
|
||||
*/
|
||||
getImageSize() {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Size of the hit-detection image.
|
||||
*/
|
||||
getHitDetectionImageSize() {}
|
||||
|
||||
/**
|
||||
* Get the anchor point in pixels. The anchor determines the center point for the
|
||||
* symbolizer.
|
||||
* @abstract
|
||||
* @return {Array.<number>} Anchor.
|
||||
*/
|
||||
ImageStyle.prototype.getAnchor = function() {};
|
||||
/**
|
||||
* Get the origin of the symbolizer.
|
||||
* @abstract
|
||||
* @return {Array.<number>} Origin.
|
||||
*/
|
||||
getOrigin() {}
|
||||
|
||||
/**
|
||||
* Get the size of the symbolizer (in pixels).
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Size.
|
||||
*/
|
||||
getSize() {}
|
||||
|
||||
/**
|
||||
* Get the image element for the symbolizer.
|
||||
* @abstract
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
|
||||
*/
|
||||
ImageStyle.prototype.getImage = function(pixelRatio) {};
|
||||
/**
|
||||
* Set the opacity.
|
||||
*
|
||||
* @param {number} opacity Opacity.
|
||||
* @api
|
||||
*/
|
||||
setOpacity(opacity) {
|
||||
this.opacity_ = opacity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set whether to rotate the style with the view.
|
||||
*
|
||||
* @param {boolean} rotateWithView Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
setRotateWithView(rotateWithView) {
|
||||
this.rotateWithView_ = rotateWithView;
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
|
||||
*/
|
||||
ImageStyle.prototype.getHitDetectionImage = function(pixelRatio) {};
|
||||
/**
|
||||
* Set the rotation.
|
||||
*
|
||||
* @param {number} rotation Rotation.
|
||||
* @api
|
||||
*/
|
||||
setRotation(rotation) {
|
||||
this.rotation_ = rotation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the scale.
|
||||
*
|
||||
* @param {number} scale Scale.
|
||||
* @api
|
||||
*/
|
||||
setScale(scale) {
|
||||
this.scale_ = scale;
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/ImageState} Image state.
|
||||
*/
|
||||
ImageStyle.prototype.getImageState = function() {};
|
||||
/**
|
||||
* Set whether to snap the image to the closest pixel.
|
||||
*
|
||||
* @param {boolean} snapToPixel Snap to pixel?
|
||||
* @api
|
||||
*/
|
||||
setSnapToPixel(snapToPixel) {
|
||||
this.snapToPixel_ = snapToPixel;
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
|
||||
* @param {T} thisArg Value to use as `this` when executing `listener`.
|
||||
* @return {module:ol/events~EventsKey|undefined} Listener key.
|
||||
* @template T
|
||||
*/
|
||||
listenImageChange(listener, thisArg) {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Image size.
|
||||
*/
|
||||
ImageStyle.prototype.getImageSize = function() {};
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
* @abstract
|
||||
*/
|
||||
load() {}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
|
||||
* @param {T} thisArg Value to use as `this` when executing `listener`.
|
||||
* @template T
|
||||
*/
|
||||
unlistenImageChange(listener, thisArg) {}
|
||||
}
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Size of the hit-detection image.
|
||||
*/
|
||||
ImageStyle.prototype.getHitDetectionImageSize = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* Get the origin of the symbolizer.
|
||||
* @abstract
|
||||
* @return {Array.<number>} Origin.
|
||||
*/
|
||||
ImageStyle.prototype.getOrigin = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* Get the size of the symbolizer (in pixels).
|
||||
* @abstract
|
||||
* @return {module:ol/size~Size} Size.
|
||||
*/
|
||||
ImageStyle.prototype.getSize = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* Set the opacity.
|
||||
*
|
||||
* @param {number} opacity Opacity.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.setOpacity = function(opacity) {
|
||||
this.opacity_ = opacity;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set whether to rotate the style with the view.
|
||||
*
|
||||
* @param {boolean} rotateWithView Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.setRotateWithView = function(rotateWithView) {
|
||||
this.rotateWithView_ = rotateWithView;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the rotation.
|
||||
*
|
||||
* @param {number} rotation Rotation.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.setRotation = function(rotation) {
|
||||
this.rotation_ = rotation;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the scale.
|
||||
*
|
||||
* @param {number} scale Scale.
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.setScale = function(scale) {
|
||||
this.scale_ = scale;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set whether to snap the image to the closest pixel.
|
||||
*
|
||||
* @param {boolean} snapToPixel Snap to pixel?
|
||||
* @api
|
||||
*/
|
||||
ImageStyle.prototype.setSnapToPixel = function(snapToPixel) {
|
||||
this.snapToPixel_ = snapToPixel;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
|
||||
* @param {T} thisArg Value to use as `this` when executing `listener`.
|
||||
* @return {module:ol/events~EventsKey|undefined} Listener key.
|
||||
* @template T
|
||||
*/
|
||||
ImageStyle.prototype.listenImageChange = function(listener, thisArg) {};
|
||||
|
||||
|
||||
/**
|
||||
* Load not yet loaded URI.
|
||||
* @abstract
|
||||
*/
|
||||
ImageStyle.prototype.load = function() {};
|
||||
|
||||
|
||||
/**
|
||||
* @abstract
|
||||
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
|
||||
* @param {T} thisArg Value to use as `this` when executing `listener`.
|
||||
* @template T
|
||||
*/
|
||||
ImageStyle.prototype.unlistenImageChange = function(listener, thisArg) {};
|
||||
export default ImageStyle;
|
||||
|
||||
+496
-515
File diff suppressed because it is too large
Load Diff
+241
-254
@@ -31,269 +31,256 @@ import {getUid} from '../util.js';
|
||||
* @param {module:ol/style/Stroke~Options=} opt_options Options.
|
||||
* @api
|
||||
*/
|
||||
const Stroke = function(opt_options) {
|
||||
class Stroke {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color|module:ol/colorlike~ColorLike}
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? options.color : null;
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/color~Color|module:ol/colorlike~ColorLike}
|
||||
*/
|
||||
this.color_ = options.color !== undefined ? options.color : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.lineCap_ = options.lineCap;
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.lineCap_ = options.lineCap;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.lineDash_ = options.lineDash !== undefined ? options.lineDash : null;
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.lineDash_ = options.lineDash !== undefined ? options.lineDash : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.lineDashOffset_ = options.lineDashOffset;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.lineDashOffset_ = options.lineDashOffset;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.lineJoin_ = options.lineJoin;
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.lineJoin_ = options.lineJoin;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.miterLimit_ = options.miterLimit;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.miterLimit_ = options.miterLimit;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.width_ = options.width;
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.width_ = options.width;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Stroke} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.clone = function() {
|
||||
const color = this.getColor();
|
||||
return new Stroke({
|
||||
color: (color && color.slice) ? color.slice() : color || undefined,
|
||||
lineCap: this.getLineCap(),
|
||||
lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined,
|
||||
lineDashOffset: this.getLineDashOffset(),
|
||||
lineJoin: this.getLineJoin(),
|
||||
miterLimit: this.getMiterLimit(),
|
||||
width: this.getWidth()
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the stroke color.
|
||||
* @return {module:ol/color~Color|module:ol/colorlike~ColorLike} Color.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getColor = function() {
|
||||
return this.color_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the line cap type for the stroke.
|
||||
* @return {string|undefined} Line cap.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getLineCap = function() {
|
||||
return this.lineCap_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the line dash style for the stroke.
|
||||
* @return {Array.<number>} Line dash.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getLineDash = function() {
|
||||
return this.lineDash_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the line dash offset for the stroke.
|
||||
* @return {number|undefined} Line dash offset.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getLineDashOffset = function() {
|
||||
return this.lineDashOffset_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the line join type for the stroke.
|
||||
* @return {string|undefined} Line join.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getLineJoin = function() {
|
||||
return this.lineJoin_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the miter limit for the stroke.
|
||||
* @return {number|undefined} Miter limit.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getMiterLimit = function() {
|
||||
return this.miterLimit_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the stroke width.
|
||||
* @return {number|undefined} Width.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.getWidth = function() {
|
||||
return this.width_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the color.
|
||||
*
|
||||
* @param {module:ol/color~Color|module:ol/colorlike~ColorLike} color Color.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setColor = function(color) {
|
||||
this.color_ = color;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the line cap.
|
||||
*
|
||||
* @param {string|undefined} lineCap Line cap.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setLineCap = function(lineCap) {
|
||||
this.lineCap_ = lineCap;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the line dash.
|
||||
*
|
||||
* Please note that Internet Explorer 10 and lower [do not support][mdn] the
|
||||
* `setLineDash` method on the `CanvasRenderingContext2D` and therefore this
|
||||
* property will have no visual effect in these browsers.
|
||||
*
|
||||
* [mdn]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility
|
||||
*
|
||||
* @param {Array.<number>} lineDash Line dash.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setLineDash = function(lineDash) {
|
||||
this.lineDash_ = lineDash;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the line dash offset.
|
||||
*
|
||||
* @param {number|undefined} lineDashOffset Line dash offset.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setLineDashOffset = function(lineDashOffset) {
|
||||
this.lineDashOffset_ = lineDashOffset;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the line join.
|
||||
*
|
||||
* @param {string|undefined} lineJoin Line join.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setLineJoin = function(lineJoin) {
|
||||
this.lineJoin_ = lineJoin;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the miter limit.
|
||||
*
|
||||
* @param {number|undefined} miterLimit Miter limit.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setMiterLimit = function(miterLimit) {
|
||||
this.miterLimit_ = miterLimit;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the width.
|
||||
*
|
||||
* @param {number|undefined} width Width.
|
||||
* @api
|
||||
*/
|
||||
Stroke.prototype.setWidth = function(width) {
|
||||
this.width_ = width;
|
||||
this.checksum_ = undefined;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @return {string} The checksum.
|
||||
*/
|
||||
Stroke.prototype.getChecksum = function() {
|
||||
if (this.checksum_ === undefined) {
|
||||
this.checksum_ = 's';
|
||||
if (this.color_) {
|
||||
if (typeof this.color_ === 'string') {
|
||||
this.checksum_ += this.color_;
|
||||
} else {
|
||||
this.checksum_ += getUid(this.color_).toString();
|
||||
}
|
||||
} else {
|
||||
this.checksum_ += '-';
|
||||
}
|
||||
this.checksum_ += ',' +
|
||||
(this.lineCap_ !== undefined ?
|
||||
this.lineCap_.toString() : '-') + ',' +
|
||||
(this.lineDash_ ?
|
||||
this.lineDash_.toString() : '-') + ',' +
|
||||
(this.lineDashOffset_ !== undefined ?
|
||||
this.lineDashOffset_ : '-') + ',' +
|
||||
(this.lineJoin_ !== undefined ?
|
||||
this.lineJoin_ : '-') + ',' +
|
||||
(this.miterLimit_ !== undefined ?
|
||||
this.miterLimit_.toString() : '-') + ',' +
|
||||
(this.width_ !== undefined ?
|
||||
this.width_.toString() : '-');
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
return this.checksum_;
|
||||
};
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Stroke} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
clone() {
|
||||
const color = this.getColor();
|
||||
return new Stroke({
|
||||
color: (color && color.slice) ? color.slice() : color || undefined,
|
||||
lineCap: this.getLineCap(),
|
||||
lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined,
|
||||
lineDashOffset: this.getLineDashOffset(),
|
||||
lineJoin: this.getLineJoin(),
|
||||
miterLimit: this.getMiterLimit(),
|
||||
width: this.getWidth()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the stroke color.
|
||||
* @return {module:ol/color~Color|module:ol/colorlike~ColorLike} Color.
|
||||
* @api
|
||||
*/
|
||||
getColor() {
|
||||
return this.color_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the line cap type for the stroke.
|
||||
* @return {string|undefined} Line cap.
|
||||
* @api
|
||||
*/
|
||||
getLineCap() {
|
||||
return this.lineCap_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the line dash style for the stroke.
|
||||
* @return {Array.<number>} Line dash.
|
||||
* @api
|
||||
*/
|
||||
getLineDash() {
|
||||
return this.lineDash_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the line dash offset for the stroke.
|
||||
* @return {number|undefined} Line dash offset.
|
||||
* @api
|
||||
*/
|
||||
getLineDashOffset() {
|
||||
return this.lineDashOffset_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the line join type for the stroke.
|
||||
* @return {string|undefined} Line join.
|
||||
* @api
|
||||
*/
|
||||
getLineJoin() {
|
||||
return this.lineJoin_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the miter limit for the stroke.
|
||||
* @return {number|undefined} Miter limit.
|
||||
* @api
|
||||
*/
|
||||
getMiterLimit() {
|
||||
return this.miterLimit_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the stroke width.
|
||||
* @return {number|undefined} Width.
|
||||
* @api
|
||||
*/
|
||||
getWidth() {
|
||||
return this.width_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the color.
|
||||
*
|
||||
* @param {module:ol/color~Color|module:ol/colorlike~ColorLike} color Color.
|
||||
* @api
|
||||
*/
|
||||
setColor(color) {
|
||||
this.color_ = color;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the line cap.
|
||||
*
|
||||
* @param {string|undefined} lineCap Line cap.
|
||||
* @api
|
||||
*/
|
||||
setLineCap(lineCap) {
|
||||
this.lineCap_ = lineCap;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the line dash.
|
||||
*
|
||||
* Please note that Internet Explorer 10 and lower [do not support][mdn] the
|
||||
* `setLineDash` method on the `CanvasRenderingContext2D` and therefore this
|
||||
* property will have no visual effect in these browsers.
|
||||
*
|
||||
* [mdn]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility
|
||||
*
|
||||
* @param {Array.<number>} lineDash Line dash.
|
||||
* @api
|
||||
*/
|
||||
setLineDash(lineDash) {
|
||||
this.lineDash_ = lineDash;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the line dash offset.
|
||||
*
|
||||
* @param {number|undefined} lineDashOffset Line dash offset.
|
||||
* @api
|
||||
*/
|
||||
setLineDashOffset(lineDashOffset) {
|
||||
this.lineDashOffset_ = lineDashOffset;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the line join.
|
||||
*
|
||||
* @param {string|undefined} lineJoin Line join.
|
||||
* @api
|
||||
*/
|
||||
setLineJoin(lineJoin) {
|
||||
this.lineJoin_ = lineJoin;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the miter limit.
|
||||
*
|
||||
* @param {number|undefined} miterLimit Miter limit.
|
||||
* @api
|
||||
*/
|
||||
setMiterLimit(miterLimit) {
|
||||
this.miterLimit_ = miterLimit;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the width.
|
||||
*
|
||||
* @param {number|undefined} width Width.
|
||||
* @api
|
||||
*/
|
||||
setWidth(width) {
|
||||
this.width_ = width;
|
||||
this.checksum_ = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {string} The checksum.
|
||||
*/
|
||||
getChecksum() {
|
||||
if (this.checksum_ === undefined) {
|
||||
this.checksum_ = 's';
|
||||
if (this.color_) {
|
||||
if (typeof this.color_ === 'string') {
|
||||
this.checksum_ += this.color_;
|
||||
} else {
|
||||
this.checksum_ += getUid(this.color_).toString();
|
||||
}
|
||||
} else {
|
||||
this.checksum_ += '-';
|
||||
}
|
||||
this.checksum_ += ',' +
|
||||
(this.lineCap_ !== undefined ?
|
||||
this.lineCap_.toString() : '-') + ',' +
|
||||
(this.lineDash_ ?
|
||||
this.lineDash_.toString() : '-') + ',' +
|
||||
(this.lineDashOffset_ !== undefined ?
|
||||
this.lineDashOffset_ : '-') + ',' +
|
||||
(this.lineJoin_ !== undefined ?
|
||||
this.lineJoin_ : '-') + ',' +
|
||||
(this.miterLimit_ !== undefined ?
|
||||
this.miterLimit_.toString() : '-') + ',' +
|
||||
(this.width_ !== undefined ?
|
||||
this.width_.toString() : '-');
|
||||
}
|
||||
|
||||
return this.checksum_;
|
||||
}
|
||||
}
|
||||
|
||||
export default Stroke;
|
||||
|
||||
+231
-245
@@ -149,260 +149,246 @@ import Stroke from '../style/Stroke.js';
|
||||
* @param {module:ol/style/Style~Options=} opt_options Style options.
|
||||
* @api
|
||||
*/
|
||||
const Style = function(opt_options) {
|
||||
class Style {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction}
|
||||
*/
|
||||
this.geometry_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {!module:ol/style/Style~GeometryFunction}
|
||||
*/
|
||||
this.geometryFunction_ = defaultGeometryFunction;
|
||||
|
||||
if (options.geometry !== undefined) {
|
||||
this.setGeometry(options.geometry);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.fill_ = options.fill !== undefined ? options.fill : null;
|
||||
|
||||
/**
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Image}
|
||||
* @type {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction}
|
||||
*/
|
||||
this.image_ = options.image !== undefined ? options.image : null;
|
||||
this.geometry_ = null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Style~RenderFunction|null}
|
||||
*/
|
||||
this.renderer_ = options.renderer !== undefined ? options.renderer : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.stroke_ = options.stroke !== undefined ? options.stroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Text}
|
||||
*/
|
||||
this.text_ = options.text !== undefined ? options.text : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.zIndex_ = options.zIndex;
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Style} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.clone = function() {
|
||||
let geometry = this.getGeometry();
|
||||
if (geometry && geometry.clone) {
|
||||
geometry = geometry.clone();
|
||||
}
|
||||
return new Style({
|
||||
geometry: geometry,
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
image: this.getImage() ? this.getImage().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
text: this.getText() ? this.getText().clone() : undefined,
|
||||
zIndex: this.getZIndex()
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the custom renderer function that was configured with
|
||||
* {@link #setRenderer} or the `renderer` constructor option.
|
||||
* @return {module:ol/style/Style~RenderFunction|null} Custom renderer function.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getRenderer = function() {
|
||||
return this.renderer_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Sets a custom renderer function for this style. When set, `fill`, `stroke`
|
||||
* and `image` options of the style will be ignored.
|
||||
* @param {module:ol/style/Style~RenderFunction|null} renderer Custom renderer function.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setRenderer = function(renderer) {
|
||||
this.renderer_ = renderer;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the geometry to be rendered.
|
||||
* @return {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction}
|
||||
* Feature property or geometry or function that returns the geometry that will
|
||||
* be rendered with this style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getGeometry = function() {
|
||||
return this.geometry_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the function used to generate a geometry for rendering.
|
||||
* @return {!module:ol/style/Style~GeometryFunction} Function that is called with a feature
|
||||
* and returns the geometry to render instead of the feature's geometry.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getGeometryFunction = function() {
|
||||
return this.geometryFunction_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the fill style.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getFill = function() {
|
||||
return this.fill_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the fill style.
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setFill = function(fill) {
|
||||
this.fill_ = fill;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the image style.
|
||||
* @return {module:ol/style/Image} Image style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getImage = function() {
|
||||
return this.image_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the image style.
|
||||
* @param {module:ol/style/Image} image Image style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setImage = function(image) {
|
||||
this.image_ = image;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the stroke style.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getStroke = function() {
|
||||
return this.stroke_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the stroke style.
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setStroke = function(stroke) {
|
||||
this.stroke_ = stroke;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text style.
|
||||
* @return {module:ol/style/Text} Text style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getText = function() {
|
||||
return this.text_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the text style.
|
||||
* @param {module:ol/style/Text} text Text style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setText = function(text) {
|
||||
this.text_ = text;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the z-index for the style.
|
||||
* @return {number|undefined} ZIndex.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.getZIndex = function() {
|
||||
return this.zIndex_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set a geometry that is rendered instead of the feature's geometry.
|
||||
*
|
||||
* @param {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction} geometry
|
||||
* Feature property or geometry or function returning a geometry to render
|
||||
* for this style.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setGeometry = function(geometry) {
|
||||
if (typeof geometry === 'function') {
|
||||
this.geometryFunction_ = geometry;
|
||||
} else if (typeof geometry === 'string') {
|
||||
this.geometryFunction_ = function(feature) {
|
||||
return (
|
||||
/** @type {module:ol/geom/Geometry} */ (feature.get(geometry))
|
||||
);
|
||||
};
|
||||
} else if (!geometry) {
|
||||
/**
|
||||
* @private
|
||||
* @type {!module:ol/style/Style~GeometryFunction}
|
||||
*/
|
||||
this.geometryFunction_ = defaultGeometryFunction;
|
||||
} else if (geometry !== undefined) {
|
||||
this.geometryFunction_ = function() {
|
||||
return (
|
||||
/** @type {module:ol/geom/Geometry} */ (geometry)
|
||||
);
|
||||
};
|
||||
|
||||
if (options.geometry !== undefined) {
|
||||
this.setGeometry(options.geometry);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.fill_ = options.fill !== undefined ? options.fill : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Image}
|
||||
*/
|
||||
this.image_ = options.image !== undefined ? options.image : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Style~RenderFunction|null}
|
||||
*/
|
||||
this.renderer_ = options.renderer !== undefined ? options.renderer : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.stroke_ = options.stroke !== undefined ? options.stroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Text}
|
||||
*/
|
||||
this.text_ = options.text !== undefined ? options.text : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.zIndex_ = options.zIndex;
|
||||
|
||||
}
|
||||
this.geometry_ = geometry;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Style} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
clone() {
|
||||
let geometry = this.getGeometry();
|
||||
if (geometry && geometry.clone) {
|
||||
geometry = geometry.clone();
|
||||
}
|
||||
return new Style({
|
||||
geometry: geometry,
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
image: this.getImage() ? this.getImage().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
text: this.getText() ? this.getText().clone() : undefined,
|
||||
zIndex: this.getZIndex()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the z-index.
|
||||
*
|
||||
* @param {number|undefined} zIndex ZIndex.
|
||||
* @api
|
||||
*/
|
||||
Style.prototype.setZIndex = function(zIndex) {
|
||||
this.zIndex_ = zIndex;
|
||||
};
|
||||
/**
|
||||
* Get the custom renderer function that was configured with
|
||||
* {@link #setRenderer} or the `renderer` constructor option.
|
||||
* @return {module:ol/style/Style~RenderFunction|null} Custom renderer function.
|
||||
* @api
|
||||
*/
|
||||
getRenderer() {
|
||||
return this.renderer_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a custom renderer function for this style. When set, `fill`, `stroke`
|
||||
* and `image` options of the style will be ignored.
|
||||
* @param {module:ol/style/Style~RenderFunction|null} renderer Custom renderer function.
|
||||
* @api
|
||||
*/
|
||||
setRenderer(renderer) {
|
||||
this.renderer_ = renderer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the geometry to be rendered.
|
||||
* @return {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction}
|
||||
* Feature property or geometry or function that returns the geometry that will
|
||||
* be rendered with this style.
|
||||
* @api
|
||||
*/
|
||||
getGeometry() {
|
||||
return this.geometry_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the function used to generate a geometry for rendering.
|
||||
* @return {!module:ol/style/Style~GeometryFunction} Function that is called with a feature
|
||||
* and returns the geometry to render instead of the feature's geometry.
|
||||
* @api
|
||||
*/
|
||||
getGeometryFunction() {
|
||||
return this.geometryFunction_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the fill style.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
getFill() {
|
||||
return this.fill_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the fill style.
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
setFill(fill) {
|
||||
this.fill_ = fill;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the image style.
|
||||
* @return {module:ol/style/Image} Image style.
|
||||
* @api
|
||||
*/
|
||||
getImage() {
|
||||
return this.image_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the image style.
|
||||
* @param {module:ol/style/Image} image Image style.
|
||||
* @api
|
||||
*/
|
||||
setImage(image) {
|
||||
this.image_ = image;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the stroke style.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
getStroke() {
|
||||
return this.stroke_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the stroke style.
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
setStroke(stroke) {
|
||||
this.stroke_ = stroke;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text style.
|
||||
* @return {module:ol/style/Text} Text style.
|
||||
* @api
|
||||
*/
|
||||
getText() {
|
||||
return this.text_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the text style.
|
||||
* @param {module:ol/style/Text} text Text style.
|
||||
* @api
|
||||
*/
|
||||
setText(text) {
|
||||
this.text_ = text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the z-index for the style.
|
||||
* @return {number|undefined} ZIndex.
|
||||
* @api
|
||||
*/
|
||||
getZIndex() {
|
||||
return this.zIndex_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a geometry that is rendered instead of the feature's geometry.
|
||||
*
|
||||
* @param {string|module:ol/geom/Geometry|module:ol/style/Style~GeometryFunction} geometry
|
||||
* Feature property or geometry or function returning a geometry to render
|
||||
* for this style.
|
||||
* @api
|
||||
*/
|
||||
setGeometry(geometry) {
|
||||
if (typeof geometry === 'function') {
|
||||
this.geometryFunction_ = geometry;
|
||||
} else if (typeof geometry === 'string') {
|
||||
this.geometryFunction_ = function(feature) {
|
||||
return (
|
||||
/** @type {module:ol/geom/Geometry} */ (feature.get(geometry))
|
||||
);
|
||||
};
|
||||
} else if (!geometry) {
|
||||
this.geometryFunction_ = defaultGeometryFunction;
|
||||
} else if (geometry !== undefined) {
|
||||
this.geometryFunction_ = function() {
|
||||
return (
|
||||
/** @type {module:ol/geom/Geometry} */ (geometry)
|
||||
);
|
||||
};
|
||||
}
|
||||
this.geometry_ = geometry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the z-index.
|
||||
*
|
||||
* @param {number|undefined} zIndex ZIndex.
|
||||
* @api
|
||||
*/
|
||||
setZIndex(zIndex) {
|
||||
this.zIndex_ = zIndex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
|
||||
+449
-480
@@ -53,484 +53,453 @@ const DEFAULT_FILL_COLOR = '#333';
|
||||
* @param {module:ol/style/Text~Options=} opt_options Options.
|
||||
* @api
|
||||
*/
|
||||
const Text = function(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.font_ = options.font;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation_ = options.rotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView_ = options.rotateWithView;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale_ = options.scale;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.text_ = options.text;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.textAlign_ = options.textAlign;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.textBaseline_ = options.textBaseline;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.fill_ = options.fill !== undefined ? options.fill :
|
||||
new Fill({color: DEFAULT_FILL_COLOR});
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.maxAngle_ = options.maxAngle !== undefined ? options.maxAngle : Math.PI / 4;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/TextPlacement|string}
|
||||
*/
|
||||
this.placement_ = options.placement !== undefined ? options.placement : TextPlacement.POINT;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.overflow_ = !!options.overflow;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.stroke_ = options.stroke !== undefined ? options.stroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.offsetX_ = options.offsetX !== undefined ? options.offsetX : 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.offsetY_ = options.offsetY !== undefined ? options.offsetY : 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.backgroundFill_ = options.backgroundFill ? options.backgroundFill : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.backgroundStroke_ = options.backgroundStroke ? options.backgroundStroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.padding_ = options.padding === undefined ? null : options.padding;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Text} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.clone = function() {
|
||||
return new Text({
|
||||
font: this.getFont(),
|
||||
placement: this.getPlacement(),
|
||||
maxAngle: this.getMaxAngle(),
|
||||
overflow: this.getOverflow(),
|
||||
rotation: this.getRotation(),
|
||||
rotateWithView: this.getRotateWithView(),
|
||||
scale: this.getScale(),
|
||||
text: this.getText(),
|
||||
textAlign: this.getTextAlign(),
|
||||
textBaseline: this.getTextBaseline(),
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
offsetX: this.getOffsetX(),
|
||||
offsetY: this.getOffsetY(),
|
||||
backgroundFill: this.getBackgroundFill() ? this.getBackgroundFill().clone() : undefined,
|
||||
backgroundStroke: this.getBackgroundStroke() ? this.getBackgroundStroke().clone() : undefined
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the `overflow` configuration.
|
||||
* @return {boolean} Let text overflow the length of the path they follow.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getOverflow = function() {
|
||||
return this.overflow_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the font name.
|
||||
* @return {string|undefined} Font.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getFont = function() {
|
||||
return this.font_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the maximum angle between adjacent characters.
|
||||
* @return {number} Angle in radians.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getMaxAngle = function() {
|
||||
return this.maxAngle_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the label placement.
|
||||
* @return {module:ol/style/TextPlacement|string} Text placement.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getPlacement = function() {
|
||||
return this.placement_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the x-offset for the text.
|
||||
* @return {number} Horizontal text offset.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getOffsetX = function() {
|
||||
return this.offsetX_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the y-offset for the text.
|
||||
* @return {number} Vertical text offset.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getOffsetY = function() {
|
||||
return this.offsetY_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the fill style for the text.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getFill = function() {
|
||||
return this.fill_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Determine whether the text rotates with the map.
|
||||
* @return {boolean|undefined} Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getRotateWithView = function() {
|
||||
return this.rotateWithView_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text rotation.
|
||||
* @return {number|undefined} Rotation.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getRotation = function() {
|
||||
return this.rotation_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text scale.
|
||||
* @return {number|undefined} Scale.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getScale = function() {
|
||||
return this.scale_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the stroke style for the text.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getStroke = function() {
|
||||
return this.stroke_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text to be rendered.
|
||||
* @return {string|undefined} Text.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getText = function() {
|
||||
return this.text_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text alignment.
|
||||
* @return {string|undefined} Text align.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getTextAlign = function() {
|
||||
return this.textAlign_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the text baseline.
|
||||
* @return {string|undefined} Text baseline.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getTextBaseline = function() {
|
||||
return this.textBaseline_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the background fill style for the text.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getBackgroundFill = function() {
|
||||
return this.backgroundFill_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the background stroke style for the text.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getBackgroundStroke = function() {
|
||||
return this.backgroundStroke_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the padding for the text.
|
||||
* @return {Array.<number>} Padding.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.getPadding = function() {
|
||||
return this.padding_;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the `overflow` property.
|
||||
*
|
||||
* @param {boolean} overflow Let text overflow the path that it follows.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setOverflow = function(overflow) {
|
||||
this.overflow_ = overflow;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the font.
|
||||
*
|
||||
* @param {string|undefined} font Font.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setFont = function(font) {
|
||||
this.font_ = font;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the maximum angle between adjacent characters.
|
||||
*
|
||||
* @param {number} maxAngle Angle in radians.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setMaxAngle = function(maxAngle) {
|
||||
this.maxAngle_ = maxAngle;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the x offset.
|
||||
*
|
||||
* @param {number} offsetX Horizontal text offset.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setOffsetX = function(offsetX) {
|
||||
this.offsetX_ = offsetX;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the y offset.
|
||||
*
|
||||
* @param {number} offsetY Vertical text offset.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setOffsetY = function(offsetY) {
|
||||
this.offsetY_ = offsetY;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the text placement.
|
||||
*
|
||||
* @param {module:ol/style/TextPlacement|string} placement Placement.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setPlacement = function(placement) {
|
||||
this.placement_ = placement;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the fill.
|
||||
*
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setFill = function(fill) {
|
||||
this.fill_ = fill;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the rotation.
|
||||
*
|
||||
* @param {number|undefined} rotation Rotation.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setRotation = function(rotation) {
|
||||
this.rotation_ = rotation;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the scale.
|
||||
*
|
||||
* @param {number|undefined} scale Scale.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setScale = function(scale) {
|
||||
this.scale_ = scale;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the stroke.
|
||||
*
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setStroke = function(stroke) {
|
||||
this.stroke_ = stroke;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the text.
|
||||
*
|
||||
* @param {string|undefined} text Text.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setText = function(text) {
|
||||
this.text_ = text;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the text alignment.
|
||||
*
|
||||
* @param {string|undefined} textAlign Text align.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setTextAlign = function(textAlign) {
|
||||
this.textAlign_ = textAlign;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the text baseline.
|
||||
*
|
||||
* @param {string|undefined} textBaseline Text baseline.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setTextBaseline = function(textBaseline) {
|
||||
this.textBaseline_ = textBaseline;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the background fill.
|
||||
*
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setBackgroundFill = function(fill) {
|
||||
this.backgroundFill_ = fill;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the background stroke.
|
||||
*
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setBackgroundStroke = function(stroke) {
|
||||
this.backgroundStroke_ = stroke;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the padding (`[top, right, bottom, left]`).
|
||||
*
|
||||
* @param {!Array.<number>} padding Padding.
|
||||
* @api
|
||||
*/
|
||||
Text.prototype.setPadding = function(padding) {
|
||||
this.padding_ = padding;
|
||||
};
|
||||
class Text {
|
||||
constructor(opt_options) {
|
||||
|
||||
const options = opt_options || {};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.font_ = options.font;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.rotation_ = options.rotation;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean|undefined}
|
||||
*/
|
||||
this.rotateWithView_ = options.rotateWithView;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number|undefined}
|
||||
*/
|
||||
this.scale_ = options.scale;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.text_ = options.text;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.textAlign_ = options.textAlign;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {string|undefined}
|
||||
*/
|
||||
this.textBaseline_ = options.textBaseline;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.fill_ = options.fill !== undefined ? options.fill :
|
||||
new Fill({color: DEFAULT_FILL_COLOR});
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.maxAngle_ = options.maxAngle !== undefined ? options.maxAngle : Math.PI / 4;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/TextPlacement|string}
|
||||
*/
|
||||
this.placement_ = options.placement !== undefined ? options.placement : TextPlacement.POINT;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
this.overflow_ = !!options.overflow;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.stroke_ = options.stroke !== undefined ? options.stroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.offsetX_ = options.offsetX !== undefined ? options.offsetX : 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {number}
|
||||
*/
|
||||
this.offsetY_ = options.offsetY !== undefined ? options.offsetY : 0;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Fill}
|
||||
*/
|
||||
this.backgroundFill_ = options.backgroundFill ? options.backgroundFill : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {module:ol/style/Stroke}
|
||||
*/
|
||||
this.backgroundStroke_ = options.backgroundStroke ? options.backgroundStroke : null;
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @type {Array.<number>}
|
||||
*/
|
||||
this.padding_ = options.padding === undefined ? null : options.padding;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clones the style.
|
||||
* @return {module:ol/style/Text} The cloned style.
|
||||
* @api
|
||||
*/
|
||||
clone() {
|
||||
return new Text({
|
||||
font: this.getFont(),
|
||||
placement: this.getPlacement(),
|
||||
maxAngle: this.getMaxAngle(),
|
||||
overflow: this.getOverflow(),
|
||||
rotation: this.getRotation(),
|
||||
rotateWithView: this.getRotateWithView(),
|
||||
scale: this.getScale(),
|
||||
text: this.getText(),
|
||||
textAlign: this.getTextAlign(),
|
||||
textBaseline: this.getTextBaseline(),
|
||||
fill: this.getFill() ? this.getFill().clone() : undefined,
|
||||
stroke: this.getStroke() ? this.getStroke().clone() : undefined,
|
||||
offsetX: this.getOffsetX(),
|
||||
offsetY: this.getOffsetY(),
|
||||
backgroundFill: this.getBackgroundFill() ? this.getBackgroundFill().clone() : undefined,
|
||||
backgroundStroke: this.getBackgroundStroke() ? this.getBackgroundStroke().clone() : undefined
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the `overflow` configuration.
|
||||
* @return {boolean} Let text overflow the length of the path they follow.
|
||||
* @api
|
||||
*/
|
||||
getOverflow() {
|
||||
return this.overflow_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the font name.
|
||||
* @return {string|undefined} Font.
|
||||
* @api
|
||||
*/
|
||||
getFont() {
|
||||
return this.font_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the maximum angle between adjacent characters.
|
||||
* @return {number} Angle in radians.
|
||||
* @api
|
||||
*/
|
||||
getMaxAngle() {
|
||||
return this.maxAngle_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the label placement.
|
||||
* @return {module:ol/style/TextPlacement|string} Text placement.
|
||||
* @api
|
||||
*/
|
||||
getPlacement() {
|
||||
return this.placement_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the x-offset for the text.
|
||||
* @return {number} Horizontal text offset.
|
||||
* @api
|
||||
*/
|
||||
getOffsetX() {
|
||||
return this.offsetX_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the y-offset for the text.
|
||||
* @return {number} Vertical text offset.
|
||||
* @api
|
||||
*/
|
||||
getOffsetY() {
|
||||
return this.offsetY_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the fill style for the text.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
getFill() {
|
||||
return this.fill_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the text rotates with the map.
|
||||
* @return {boolean|undefined} Rotate with map.
|
||||
* @api
|
||||
*/
|
||||
getRotateWithView() {
|
||||
return this.rotateWithView_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text rotation.
|
||||
* @return {number|undefined} Rotation.
|
||||
* @api
|
||||
*/
|
||||
getRotation() {
|
||||
return this.rotation_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text scale.
|
||||
* @return {number|undefined} Scale.
|
||||
* @api
|
||||
*/
|
||||
getScale() {
|
||||
return this.scale_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the stroke style for the text.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
getStroke() {
|
||||
return this.stroke_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text to be rendered.
|
||||
* @return {string|undefined} Text.
|
||||
* @api
|
||||
*/
|
||||
getText() {
|
||||
return this.text_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text alignment.
|
||||
* @return {string|undefined} Text align.
|
||||
* @api
|
||||
*/
|
||||
getTextAlign() {
|
||||
return this.textAlign_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text baseline.
|
||||
* @return {string|undefined} Text baseline.
|
||||
* @api
|
||||
*/
|
||||
getTextBaseline() {
|
||||
return this.textBaseline_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the background fill style for the text.
|
||||
* @return {module:ol/style/Fill} Fill style.
|
||||
* @api
|
||||
*/
|
||||
getBackgroundFill() {
|
||||
return this.backgroundFill_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the background stroke style for the text.
|
||||
* @return {module:ol/style/Stroke} Stroke style.
|
||||
* @api
|
||||
*/
|
||||
getBackgroundStroke() {
|
||||
return this.backgroundStroke_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the padding for the text.
|
||||
* @return {Array.<number>} Padding.
|
||||
* @api
|
||||
*/
|
||||
getPadding() {
|
||||
return this.padding_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the `overflow` property.
|
||||
*
|
||||
* @param {boolean} overflow Let text overflow the path that it follows.
|
||||
* @api
|
||||
*/
|
||||
setOverflow(overflow) {
|
||||
this.overflow_ = overflow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the font.
|
||||
*
|
||||
* @param {string|undefined} font Font.
|
||||
* @api
|
||||
*/
|
||||
setFont(font) {
|
||||
this.font_ = font;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the maximum angle between adjacent characters.
|
||||
*
|
||||
* @param {number} maxAngle Angle in radians.
|
||||
* @api
|
||||
*/
|
||||
setMaxAngle(maxAngle) {
|
||||
this.maxAngle_ = maxAngle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the x offset.
|
||||
*
|
||||
* @param {number} offsetX Horizontal text offset.
|
||||
* @api
|
||||
*/
|
||||
setOffsetX(offsetX) {
|
||||
this.offsetX_ = offsetX;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the y offset.
|
||||
*
|
||||
* @param {number} offsetY Vertical text offset.
|
||||
* @api
|
||||
*/
|
||||
setOffsetY(offsetY) {
|
||||
this.offsetY_ = offsetY;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the text placement.
|
||||
*
|
||||
* @param {module:ol/style/TextPlacement|string} placement Placement.
|
||||
* @api
|
||||
*/
|
||||
setPlacement(placement) {
|
||||
this.placement_ = placement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the fill.
|
||||
*
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
setFill(fill) {
|
||||
this.fill_ = fill;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the rotation.
|
||||
*
|
||||
* @param {number|undefined} rotation Rotation.
|
||||
* @api
|
||||
*/
|
||||
setRotation(rotation) {
|
||||
this.rotation_ = rotation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the scale.
|
||||
*
|
||||
* @param {number|undefined} scale Scale.
|
||||
* @api
|
||||
*/
|
||||
setScale(scale) {
|
||||
this.scale_ = scale;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the stroke.
|
||||
*
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
setStroke(stroke) {
|
||||
this.stroke_ = stroke;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the text.
|
||||
*
|
||||
* @param {string|undefined} text Text.
|
||||
* @api
|
||||
*/
|
||||
setText(text) {
|
||||
this.text_ = text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the text alignment.
|
||||
*
|
||||
* @param {string|undefined} textAlign Text align.
|
||||
* @api
|
||||
*/
|
||||
setTextAlign(textAlign) {
|
||||
this.textAlign_ = textAlign;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the text baseline.
|
||||
*
|
||||
* @param {string|undefined} textBaseline Text baseline.
|
||||
* @api
|
||||
*/
|
||||
setTextBaseline(textBaseline) {
|
||||
this.textBaseline_ = textBaseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the background fill.
|
||||
*
|
||||
* @param {module:ol/style/Fill} fill Fill style.
|
||||
* @api
|
||||
*/
|
||||
setBackgroundFill(fill) {
|
||||
this.backgroundFill_ = fill;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the background stroke.
|
||||
*
|
||||
* @param {module:ol/style/Stroke} stroke Stroke style.
|
||||
* @api
|
||||
*/
|
||||
setBackgroundStroke(stroke) {
|
||||
this.backgroundStroke_ = stroke;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the padding (`[top, right, bottom, left]`).
|
||||
*
|
||||
* @param {!Array.<number>} padding Padding.
|
||||
* @api
|
||||
*/
|
||||
setPadding(padding) {
|
||||
this.padding_ = padding;
|
||||
}
|
||||
}
|
||||
|
||||
export default Text;
|
||||
|
||||
Reference in New Issue
Block a user