Skip to content

Commit

Permalink
fix Marker rotate Not effective when textPlacement/markerPlacement (#…
Browse files Browse the repository at this point in the history 
…2441)

* fix Marker rotate Not effective when textPlacement/markerPlacement

* spec

* updates
  • Loading branch information
@deyihu
deyihu authored Oct 24, 2024
1 parent 4da962a commit 23b2368
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 9 deletions.
5 changes: 3 additions & 2 deletions src/renderer/geometry/symbolizers/ImageMarkerSymbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ export default class ImageMarkerSymbolizer extends PointSymbolizer {
TEMP_SIZE.width = width;
TEMP_SIZE.height = height;
const alignPoint = getAlignPoint(TEMP_SIZE, style['markerHorizontalAlignment'], style['markerVerticalAlignment']);
this.rotations = [];
for (let i = 0, len = cookedPoints.length; i < len; i++) {
let p = cookedPoints[i];
// //for debug
// ctx.fillStyle = 'red';
// ctx.fillRect(p.x - 2, p.y - 160, 4, 4);
// const origin = this._rotate(ctx, p, this._getRotationAt(i));
const origin = this.getRotation() ? this._rotate(ctx, p, this._getRotationAt(i)) : null;
const origin = this._rotate(ctx, p, this._getRotationAt(i));
let extent: PointExtent;
if (origin) {
//坐标对应的像素点
Expand All @@ -89,6 +89,7 @@ export default class ImageMarkerSymbolizer extends PointSymbolizer {
const rad = this._getRotationAt(i);
extent = getMarkerRotationExtent(TEMP_EXTENT, rad, width, height, p, alignPoint);
extent._add(pixel);
this.rotations.push(rad);
}
const x = p.x + alignPoint.x,
y = p.y + alignPoint.y;
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/geometry/symbolizers/PointSymbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,13 @@ abstract class PointSymbolizer extends CanvasSymbolizer {
symbol: any;
geometry: Geometry;
painter: Painter;
rotations: Array<number>;
constructor(symbol: any, geometry: Geometry, painter: Painter) {
super();
this.symbol = symbol;
this.geometry = geometry;
this.painter = painter;
this.rotations = [];
}

get2DExtent(): PointExtent {
Expand Down Expand Up @@ -130,10 +132,12 @@ abstract class PointSymbolizer extends CanvasSymbolizer {

//@internal
_getRotationAt(i: number): number {
//from style
let r = this.getRotation();
if (!r) {
r = 0;
}
//from markerPlacement ,textPlacement
const rotations = this._getRenderPoints()[1];
if (!rotations || !rotations[i]) {
return r;
Expand Down
5 changes: 3 additions & 2 deletions src/renderer/geometry/symbolizers/TextMarkerSymbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ export default class TextMarkerSymbolizer extends PointSymbolizer {
this.prepareCanvas(ctx, strokeAndFill, resources);
Canvas.prepareCanvasFont(ctx, style);
const textHaloRadius = style.textHaloRadius || 0;
this.rotations = [];
for (let i = 0, len = cookedPoints.length; i < len; i++) {
let p = cookedPoints[i];
// const origin = this._rotate(ctx, p, this._getRotationAt(i));
const origin = this.getRotation() ? this._rotate(ctx, p, this._getRotationAt(i)) : null;
const origin = this._rotate(ctx, p, this._getRotationAt(i));
let extent: PointExtent;
if (origin) {
//坐标对应的像素点
Expand All @@ -77,6 +77,7 @@ export default class TextMarkerSymbolizer extends PointSymbolizer {
const alignPoint = getAlignPoint(textDesc.size, style['textHorizontalAlignment'], style['textVerticalAlignment']);
extent = getMarkerRotationExtent(TEMP_EXTENT, rad, width, height, p, alignPoint);
extent._add(pixel);
this.rotations.push(rad);
}
const bbox = Canvas.text(ctx, textContent, p, style, textDesc);
if (origin) {
Expand Down
10 changes: 6 additions & 4 deletions src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,16 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
let point = cookedPoints[i];
const size = calVectorMarkerSize(MARKER_SIZE, this.style);
const [width, height] = size;
// const origin = this._rotate(ctx, point, this._getRotationAt(i));
const origin = this._rotate(ctx, point, this._getRotationAt(i));
this.rotations = [];
let extent: PointExtent;
const origin = this.getRotation() ? this._rotate(ctx, point, this._getRotationAt(i)) : null;
if (origin) {
const pixel = point.sub(origin);
point = origin;
const rad = this._getRotationAt(i);
extent = getMarkerRotationExtent(TEMP_EXTENT, rad, width, height, point, DEFAULT_ANCHOR);
extent._add(pixel);
this.rotations.push(rad);
}

this._drawVectorMarker(ctx, point, resources);
Expand All @@ -111,8 +112,8 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
const anchor = getVectorMarkerAnchor(this.style, image.width, image.height);
for (let i = cookedPoints.length - 1; i >= 0; i--) {
let point = cookedPoints[i];
// const origin = this._rotate(ctx, point, this._getRotationAt(i));
const origin = this.getRotation() ? this._rotate(ctx, point, this._getRotationAt(i)) : null;
const origin = this._rotate(ctx, point, this._getRotationAt(i));
this.rotations = [];
let extent: PointExtent;
if (origin) {
//坐标对应的像素点
Expand All @@ -121,6 +122,7 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
const rad = this._getRotationAt(i);
extent = getMarkerRotationExtent(TEMP_EXTENT, rad, image.width, image.height, point, anchor);
extent._add(pixel);
this.rotations.push(rad);
}
const x = point.x + anchor.x, y = point.y + anchor.y;
Canvas.image(ctx, image, x, y);
Expand Down
3 changes: 3 additions & 0 deletions test/core/ResourceProxySpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ describe('ResourceProxy.Spec', function () {
ResourceProxy.proxy['/geojson/'] = {
target: `${MTKHOST}/geojson/`
}
ResourceProxy.proxy['/resources/'] = {
target: `${hostUrl}/`
}
ResourceProxy.origin['https://www.abc.com/'] = {
target: `${MTKHOST}/`
}
Expand Down
119 changes: 118 additions & 1 deletion test/geometry/LineStringSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,75 @@ describe('Geometry.LineString', function () {
var center = new maptalks.Coordinate(118.846825, 32.046534);
var layer;

function getLineCoordinates() {
return [
[
120.61225798855435,
31.182050959259158
],
[
120.61296882457759,
31.180502956281003
],
[
120.61345348550253,
31.178719957200855
],
[
120.61354234000555,
31.176992212883675
],
[
120.61343733013837,
31.175789684232683
],
[
120.61305767908061,
31.17428304632554
],
[
120.61212066795895,
31.172278766086123
],
[
120.61136944352529,
31.170972505445064
],
[
120.61023049035157,
31.168712424644156
],
[
120.60917231399878,
31.166479937150513
],
[
120.60837262347263,
31.164579171038184
],
[
120.60768602049563,
31.16311382713033
],
[
120.60683786387699,
31.161005627505375
],
[
120.60644205745484,
31.160079387264744
],
[
120.60547273560496,
31.157950382837186
],
[
120.6051334729575,
31.157058675212028
]
];
}

beforeEach(function () {
var setups = COMMON_CREATE_MAP(center, null, {
width: 400,
Expand Down Expand Up @@ -97,7 +166,6 @@ describe('Geometry.LineString', function () {


describe('creation', function () {

it('normal constructor', function () {
var points = [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]];
var polyline = new maptalks.LineString(points);
Expand Down Expand Up @@ -633,4 +701,53 @@ describe('Geometry.LineString', function () {

});

describe('#2440 symbol textPlacement/markerPlacement marker should rotate', function () {
it('#2440 textPlacement=line ', function (done) {

layer.clear();
const line = new maptalks.LineString(getLineCoordinates(), {
symbol: {
lineWidth: 16,
lineColor: 'black',
textName: '苏州湾大道',
// // textPlacement?: 'point' | 'vertex' | 'line' | 'vertex-first' | 'vertex-last';
textPlacement: 'line',
textFill: 'yellow'
}
}).addTo(layer);

map.setView({
"center": [120.61702517, 31.17030688], "zoom": 14.838606578929996, "pitch": 0.20000000000003001, "bearing": -3
});


setTimeout(() => {
expect(line._getPainter().symbolizers[0].rotations.length).to.be.above(0);
done();
}, 1000);
});

it('#2440 markerPlacement=line ', function (done) {
layer.clear();
var base64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const line = new maptalks.LineString(getLineCoordinates(), {
symbol: {
lineWidth: 16,
lineColor: 'black',
markerFile: '/resources/arrow.png',
markerPlacement: 'line',
markerVerticalAlignment: 'middle'
}
}).addTo(layer);
map.setView({
"center": [120.61702517, 31.17030688], "zoom": 14.838606578929996, "pitch": 0.20000000000003001, "bearing": -3
});

setTimeout(() => {
expect(line._getPainter().symbolizers[0].rotations.length).to.be.above(0);
done();
}, 1000);
});
});

});
Binary file added test/resources/arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 23b2368

Please sign in to comment.