Compare commits
5 Commits
main
...
v4.6.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
43637e2de8 | ||
|
|
0d1dead5c1 | ||
|
|
9c1561a496 | ||
|
|
84fd7477ed | ||
|
|
23ccd0e56e |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "openlayers",
|
"name": "openlayers",
|
||||||
"version": "4.5.0",
|
"version": "4.6.0-beta.1",
|
||||||
"description": "Build tools and sources for developing OpenLayers based mapping applications",
|
"description": "Build tools and sources for developing OpenLayers based mapping applications",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"map",
|
"map",
|
||||||
|
|||||||
@@ -1139,11 +1139,15 @@ ol.PluggableMap.prototype.renderFrame_ = function(time) {
|
|||||||
layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i];
|
layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i];
|
||||||
}
|
}
|
||||||
viewState = view.getState();
|
viewState = view.getState();
|
||||||
|
var center = viewState.center;
|
||||||
|
var pixelResolution = viewState.resolution / this.pixelRatio_;
|
||||||
|
center[0] = Math.round(center[0] / pixelResolution) * pixelResolution;
|
||||||
|
center[1] = Math.round(center[1] / pixelResolution) * pixelResolution;
|
||||||
frameState = /** @type {olx.FrameState} */ ({
|
frameState = /** @type {olx.FrameState} */ ({
|
||||||
animate: false,
|
animate: false,
|
||||||
coordinateToPixelTransform: this.coordinateToPixelTransform_,
|
coordinateToPixelTransform: this.coordinateToPixelTransform_,
|
||||||
extent: extent,
|
extent: extent,
|
||||||
focus: !this.focus_ ? viewState.center : this.focus_,
|
focus: !this.focus_ ? center : this.focus_,
|
||||||
index: this.frameIndex_++,
|
index: this.frameIndex_++,
|
||||||
layerStates: layerStates,
|
layerStates: layerStates,
|
||||||
layerStatesArray: layerStatesArray,
|
layerStatesArray: layerStatesArray,
|
||||||
|
|||||||
@@ -281,7 +281,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
|
|||||||
*/
|
*/
|
||||||
ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
|
ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
|
||||||
var label;
|
var label;
|
||||||
var key = strokeKey + textKey + text + fillKey;
|
var key = strokeKey + textKey + text + fillKey + this.pixelRatio;
|
||||||
|
|
||||||
var labelCache = ol.render.canvas.labelCache;
|
var labelCache = ol.render.canvas.labelCache;
|
||||||
if (!labelCache.containsKey(key)) {
|
if (!labelCache.containsKey(key)) {
|
||||||
@@ -323,19 +323,19 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey
|
|||||||
if (fillKey) {
|
if (fillKey) {
|
||||||
context.fillStyle = fillState.fillStyle;
|
context.fillStyle = fillState.fillStyle;
|
||||||
}
|
}
|
||||||
context.textBaseline = 'top';
|
context.textBaseline = 'middle';
|
||||||
context.textAlign = 'center';
|
context.textAlign = 'center';
|
||||||
var leftRight = (0.5 - align);
|
var leftRight = (0.5 - align);
|
||||||
var x = align * label.width / scale + leftRight * strokeWidth;
|
var x = align * label.width / scale + leftRight * strokeWidth;
|
||||||
var i;
|
var i;
|
||||||
if (strokeKey) {
|
if (strokeKey) {
|
||||||
for (i = 0; i < numLines; ++i) {
|
for (i = 0; i < numLines; ++i) {
|
||||||
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
|
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (fillKey) {
|
if (fillKey) {
|
||||||
for (i = 0; i < numLines; ++i) {
|
for (i = 0; i < numLines; ++i) {
|
||||||
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight);
|
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ BUILDS=dist
|
|||||||
#
|
#
|
||||||
# URL for canonical repo.
|
# URL for canonical repo.
|
||||||
#
|
#
|
||||||
REMOTE=https://github.com/openlayers/openlayers.git
|
REMOTE=https://github.com/ahocevar/openlayers.git
|
||||||
|
|
||||||
#
|
#
|
||||||
# Display usage and exit.
|
# Display usage and exit.
|
||||||
@@ -98,7 +98,7 @@ main() {
|
|||||||
npm install
|
npm install
|
||||||
build_js ${PROFILES}
|
build_js ${PROFILES}
|
||||||
build_css
|
build_css
|
||||||
npm publish
|
npm publish --tag beta
|
||||||
}
|
}
|
||||||
|
|
||||||
if test ${#} -ne 1; then
|
if test ${#} -ne 1; then
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -163,7 +163,7 @@ describe('ol.rendering.style.Text', function() {
|
|||||||
it('renders correct stroke with pixelRatio != 1', function(done) {
|
it('renders correct stroke with pixelRatio != 1', function(done) {
|
||||||
createMap('canvas', 2);
|
createMap('canvas', 2);
|
||||||
createFeatures();
|
createFeatures();
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.8, done);
|
expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.9, done);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders text correctly with scale != 1', function(done) {
|
it('renders text correctly with scale != 1', function(done) {
|
||||||
@@ -260,6 +260,101 @@ describe('ol.rendering.style.Text', function() {
|
|||||||
expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done);
|
expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders text along a MultiLineString', function(done) {
|
||||||
|
createMap('canvas');
|
||||||
|
var line = new ol.geom.LineString();
|
||||||
|
line.setFlatCoordinates('XY', nicePath);
|
||||||
|
var geom = new ol.geom.MultiLineString(null);
|
||||||
|
geom.appendLineString(line);
|
||||||
|
line = line.clone();
|
||||||
|
line.translate(0, 50);
|
||||||
|
geom.appendLineString(line);
|
||||||
|
line = line.clone();
|
||||||
|
line.translate(0, -100);
|
||||||
|
geom.appendLineString(line);
|
||||||
|
var feature = new ol.Feature(geom);
|
||||||
|
feature.setStyle(new ol.style.Style({
|
||||||
|
text: new ol.style.Text({
|
||||||
|
text: 'Hello world',
|
||||||
|
placement: 'line',
|
||||||
|
font: 'bold 30px sans-serif'
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
vectorSource.addFeature(feature);
|
||||||
|
map.getView().fit(vectorSource.getExtent());
|
||||||
|
expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 7, done);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders text along a Polygon', function(done) {
|
||||||
|
createMap('canvas');
|
||||||
|
var geom = new ol.geom.Polygon(null);
|
||||||
|
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
|
||||||
|
var feature = new ol.Feature(geom);
|
||||||
|
feature.setStyle(new ol.style.Style({
|
||||||
|
text: new ol.style.Text({
|
||||||
|
text: 'Hello world',
|
||||||
|
font: 'bold 24px sans-serif',
|
||||||
|
placement: 'line',
|
||||||
|
overflow: true
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
vectorSource.addFeature(feature);
|
||||||
|
map.getView().fit(vectorSource.getExtent());
|
||||||
|
expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders text along a MultiPolygon', function(done) {
|
||||||
|
createMap('canvas');
|
||||||
|
var geom = new ol.geom.Polygon(null);
|
||||||
|
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
|
||||||
|
var multiPolygon = new ol.geom.MultiPolygon(null);
|
||||||
|
multiPolygon.appendPolygon(geom);
|
||||||
|
geom = geom.clone();
|
||||||
|
geom.translate(0, 30);
|
||||||
|
multiPolygon.appendPolygon(geom);
|
||||||
|
geom = geom.clone();
|
||||||
|
geom.translate(0, -60);
|
||||||
|
multiPolygon.appendPolygon(geom);
|
||||||
|
var feature = new ol.Feature(multiPolygon);
|
||||||
|
feature.setStyle(new ol.style.Style({
|
||||||
|
text: new ol.style.Text({
|
||||||
|
text: 'Hello world',
|
||||||
|
font: 'bold 24px sans-serif',
|
||||||
|
placement: 'line',
|
||||||
|
overflow: true
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
vectorSource.addFeature(feature);
|
||||||
|
map.getView().fit(vectorSource.getExtent());
|
||||||
|
expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders text background', function(done) {
|
||||||
|
createMap('canvas');
|
||||||
|
createFeatures();
|
||||||
|
var features = vectorSource.getFeatures();
|
||||||
|
features[0].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
||||||
|
color: 'red'
|
||||||
|
}));
|
||||||
|
features[1].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
||||||
|
color: 'red'
|
||||||
|
}));
|
||||||
|
features[1].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
|
||||||
|
color: 'blue',
|
||||||
|
width: 3
|
||||||
|
}));
|
||||||
|
features[2].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
||||||
|
color: 'red'
|
||||||
|
}));
|
||||||
|
features[2].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
|
||||||
|
color: 'blue',
|
||||||
|
width: 3
|
||||||
|
}));
|
||||||
|
features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
|
||||||
|
map.getView().fit(vectorSource.getExtent());
|
||||||
|
expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
|
||||||
|
});
|
||||||
|
|
||||||
describe('Text along an ugly upside down path, keep text upright', function() {
|
describe('Text along an ugly upside down path, keep text upright', function() {
|
||||||
|
|
||||||
it('renders text along a linestring with auto-align', function(done) {
|
it('renders text along a linestring with auto-align', function(done) {
|
||||||
@@ -347,97 +442,7 @@ describe('ol.rendering.style.Text', function() {
|
|||||||
createLineString(nicePath, 'left');
|
createLineString(nicePath, 'left');
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
|
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
it('renders text along a MultiLineString', function(done) {
|
|
||||||
createMap('canvas');
|
|
||||||
var line = new ol.geom.LineString();
|
|
||||||
line.setFlatCoordinates('XY', nicePath);
|
|
||||||
var geom = new ol.geom.MultiLineString(null);
|
|
||||||
geom.appendLineString(line);
|
|
||||||
line.translate(0, 50);
|
|
||||||
geom.appendLineString(line);
|
|
||||||
line.translate(0, -100);
|
|
||||||
geom.appendLineString(line);
|
|
||||||
var feature = new ol.Feature(geom);
|
|
||||||
feature.setStyle(new ol.style.Style({
|
|
||||||
text: new ol.style.Text({
|
|
||||||
text: 'Hello world',
|
|
||||||
placement: 'line',
|
|
||||||
font: 'bold 30px sans-serif'
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
vectorSource.addFeature(feature);
|
|
||||||
map.getView().fit(vectorSource.getExtent());
|
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 7, done);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders text along a Polygon', function(done) {
|
|
||||||
createMap('canvas');
|
|
||||||
var geom = new ol.geom.Polygon(null);
|
|
||||||
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
|
|
||||||
var feature = new ol.Feature(geom);
|
|
||||||
feature.setStyle(new ol.style.Style({
|
|
||||||
text: new ol.style.Text({
|
|
||||||
text: 'Hello world',
|
|
||||||
font: 'bold 24px sans-serif',
|
|
||||||
placement: 'line',
|
|
||||||
overflow: true
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
vectorSource.addFeature(feature);
|
|
||||||
map.getView().fit(vectorSource.getExtent());
|
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders text along a MultiPolygon', function(done) {
|
|
||||||
createMap('canvas');
|
|
||||||
var geom = new ol.geom.Polygon(null);
|
|
||||||
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
|
|
||||||
var multiPolygon = new ol.geom.MultiPolygon(null);
|
|
||||||
multiPolygon.appendPolygon(geom);
|
|
||||||
geom.translate(0, 30);
|
|
||||||
multiPolygon.appendPolygon(geom);
|
|
||||||
geom.translate(0, -60);
|
|
||||||
multiPolygon.appendPolygon(geom);
|
|
||||||
var feature = new ol.Feature(multiPolygon);
|
|
||||||
feature.setStyle(new ol.style.Style({
|
|
||||||
text: new ol.style.Text({
|
|
||||||
text: 'Hello world',
|
|
||||||
font: 'bold 24px sans-serif',
|
|
||||||
placement: 'line',
|
|
||||||
overflow: true
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
vectorSource.addFeature(feature);
|
|
||||||
map.getView().fit(vectorSource.getExtent());
|
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders text background', function(done) {
|
|
||||||
createMap('canvas');
|
|
||||||
createFeatures();
|
|
||||||
var features = vectorSource.getFeatures();
|
|
||||||
features[0].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
|
||||||
color: 'red'
|
|
||||||
}));
|
|
||||||
features[1].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
|
||||||
color: 'red'
|
|
||||||
}));
|
|
||||||
features[1].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
|
|
||||||
color: 'blue',
|
|
||||||
width: 3
|
|
||||||
}));
|
|
||||||
features[2].getStyle().getText().setBackgroundFill(new ol.style.Fill({
|
|
||||||
color: 'red'
|
|
||||||
}));
|
|
||||||
features[2].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
|
|
||||||
color: 'blue',
|
|
||||||
width: 3
|
|
||||||
}));
|
|
||||||
features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
|
|
||||||
map.getView().fit(vectorSource.getExtent());
|
|
||||||
expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
where('WebGL').it('tests the webgl renderer without rotation', function(done) {
|
where('WebGL').it('tests the webgl renderer without rotation', function(done) {
|
||||||
|
|||||||