Skip to content

Commit a0aae2c

Browse files
Link-Fightfuzhenn
Link-Fight
and
fuzhenn
authored
Add padding options to setCenter and fixExtent (#1417)
* fix jsdoc comment * add padding option to setCenter and fitExtent * remove 'in' operator to search --------- Co-authored-by: Fu Zhen <fuzhen@maptalks.org>
1 parent 2f748e6 commit a0aae2c

File tree

2 files changed

+165
-7
lines changed

2 files changed

+165
-7
lines changed

‎src/map/Map.js‎

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -483,13 +483,21 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
483483
/**
484484
* Set a new center to the map.
485485
* @param {Coordinate} center
486+
* @param {Object} [padding]
487+
* @param {Number} [padding.paddingLeft] - Sets the amount of padding in the left of a map container
488+
* @param {Number} [padding.paddingTop] - Sets the amount of padding in the top of a map container
489+
* @param {Number} [padding.paddingRight] - Sets the amount of padding in the right of a map container
490+
* @param {Number} [padding.paddingBottom] - Sets the amount of padding in the bottom of a map container
486491
* @return {Map} this
487492
*/
488-
setCenter(center) {
493+
setCenter(center, padding) {
489494
if (!center) {
490495
return this;
491496
}
492497
center = new Coordinate(center);
498+
if (padding) {
499+
center = this._getCenterByPadding(center, this.getZoom(), padding);
500+
}
493501
const projection = this.getProjection();
494502
const pcenter = projection.project(center);
495503
if (!this._verifyExtent(pcenter)) {
@@ -856,22 +864,51 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
856864
return this;
857865
}
858866

859-
867+
/**
868+
* Get the padding Size
869+
* @param {Object} options
870+
* @param {Number} [options.paddingLeft] - Sets the amount of padding in the left of a map container
871+
* @param {Number} [options.paddingTop] - Sets the amount of padding in the top of a map container
872+
* @param {Number} [options.paddingRight] - Sets the amount of padding in the right of a map container
873+
* @param {Number} [options.paddingBottom] - Sets the amount of padding in the bottom of a map container
874+
* @returns {Object|null}
875+
*/
876+
_getPaddingSize(options = {}) {
877+
if (options['paddingLeft'] || options['paddingTop'] || options['paddingRight'] || options['paddingBottom']) {
878+
return {
879+
width: (options['paddingLeft'] || 0) + (options['paddingRight'] || 0),
880+
height: (options['paddingTop'] || 0) + (options['paddingBottom'] || 0)
881+
};
882+
}
883+
return null;
884+
}
860885
/**
861886
* Caculate the zoom level that contains the given extent with the maximum zoom level possible.
862887
* @param {Extent} extent
863888
* @param {Boolean} isFraction - can return fractional zoom
889+
* @param {Object} [padding] [padding] - padding
890+
* @param {Object} [padding.paddingLeft] - Sets the amount of padding in the left of a map container
891+
* @param {Object} [padding.paddingTop] - Sets the amount of padding in the top of a map container
892+
* @param {Object} [padding.paddingRight] - Sets the amount of padding in the right of a map container
893+
* @param {Object} [padding.paddingBottom] - Sets the amount of padding in the bottom of a map container
864894
* @return {Number} zoom fit for scale starting from fromZoom
865895
*/
866-
getFitZoom(extent, isFraction) {
896+
getFitZoom(extent, isFraction, padding) {
867897
if (!extent || !(extent instanceof Extent)) {
868898
return this._zoomLevel;
869899
}
870900
//It's a point
871901
if (extent['xmin'] === extent['xmax'] && extent['ymin'] === extent['ymax']) {
872902
return this.getMaxZoom();
873903
}
874-
const size = this.getSize();
904+
let size = this.getSize();
905+
const paddingSize = this._getPaddingSize(padding);
906+
if (paddingSize) {
907+
size = {
908+
width: size.width - (paddingSize.width || 0),
909+
height: size.height - (paddingSize.height || 0)
910+
};
911+
}
875912
const containerExtent = extent.convertTo(p => this.coordToPoint(p));
876913
const w = containerExtent.getWidth(),
877914
h = containerExtent.getHeight();
@@ -941,19 +978,61 @@ class Map extends Handlerable(Eventable(Renderable(Class))) {
941978
return res / max;
942979
}
943980

981+
/**
982+
* Get center by the padding.
983+
* @private
984+
* @param {Coordinate} center
985+
* @param {Number} zoom
986+
* @param {Object} padding
987+
* @param {Number} [padding.paddingLeft] - Sets the amount of padding in the left of a map container
988+
* @param {Number} [padding.paddingTop] - Sets the amount of padding in the top of a map container
989+
* @param {Number} [padding.paddingRight] - Sets the amount of padding in the right of a map container
990+
* @param {Number} [padding.paddingBottom] - Sets the amount of padding in the bottom of a map container
991+
* @return {Coordinate}
992+
*/
993+
_getCenterByPadding(center, zoom, padding = {}) {
994+
const point = this.coordinateToPoint(center, zoom);
995+
const { paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0 } = padding;
996+
let pX = 0;
997+
let pY = 0;
998+
if (paddingLeft || paddingRight) {
999+
pX = (paddingRight - paddingLeft) / 2;
1000+
}
1001+
if (paddingTop || paddingBottom) {
1002+
pY = (paddingTop - paddingBottom) / 2;
1003+
}
1004+
const newPoint = new Point({
1005+
x: point.x + pX,
1006+
y: point.y + pY
1007+
});
1008+
return this.pointToCoordinate(newPoint, zoom);
1009+
}
1010+
9441011
/**
9451012
* Set the map to be fit for the given extent with the max zoom level possible.
9461013
* @param {Extent} extent - extent
9471014
* @param {Number} zoomOffset - zoom offset
1015+
* @param {Object} [options={}] - options
1016+
* @param {Object} [options.animation]
1017+
* @param {Object} [options.duration]
1018+
* @param {Object} [options.zoomAnimationDuration]
1019+
* @param {Object} [options.easing='out']
1020+
* @param {Number} [options.paddingLeft] - Sets the amount of padding in the left of a map container
1021+
* @param {Number} [options.paddingTop] - Sets the amount of padding in the top of a map container
1022+
* @param {Number} [options.paddingRight] - Sets the amount of padding in the right of a map container
1023+
* @param {Number} [options.paddingBottom] - Sets the amount of padding in the bottom of a map container
9481024
* @return {Map} - this
9491025
*/
9501026
fitExtent(extent, zoomOffset, options = {}, step) {
9511027
if (!extent) {
9521028
return this;
9531029
}
9541030
extent = new Extent(extent, this.getProjection());
955-
const zoom = this.getFitZoom(extent) + (zoomOffset || 0);
956-
const center = extent.getCenter();
1031+
const zoom = this.getFitZoom(extent, false, options) + (zoomOffset || 0);
1032+
let center = extent.getCenter();
1033+
if (this._getPaddingSize(options)) {
1034+
center = this._getCenterByPadding(center, zoom, options);
1035+
}
9571036
if (typeof (options['animation']) === 'undefined' || options['animation'])
9581037
return this._animateTo({
9591038
center,
@@ -2349,7 +2428,7 @@ Map.include(/** @lends Map.prototype */{
23492428
* Convert a geographical coordinate to the container point. <br>
23502429
* Batch conversion for better performance <br>
23512430
* A container point is a point relative to map container's top-left corner. <br>
2352-
* @param {Coordinate[]} - coordinates
2431+
* @param {Coordinate[]} Coordinate - coordinates
23532432
* @param {Number} [zoom=undefined] - zoom level
23542433
* @return {Point[]}
23552434
* @function

‎test/map/MapCenterSpec.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
describe('MapSetCenter.Spec', function () {
2+
var container;
3+
var eventContainer;
4+
var map;
5+
var baseLayer;
6+
var center = new maptalks.Coordinate(118.846825, 32.046534);
7+
8+
beforeEach(function () {
9+
container = document.createElement('div');
10+
container.style.width = '400px';
11+
container.style.height = '400px';
12+
document.body.appendChild(container);
13+
var option = {
14+
zoomAnimation: false,
15+
zoom: 17,
16+
center: center
17+
};
18+
map = new maptalks.Map(container, option);
19+
map.config('zoomAnimationDuration', 20);
20+
map._getRenderer()._setCheckSizeInterval(20);
21+
baseLayer = new maptalks.VectorLayer('base_', new maptalks.Marker(center));
22+
eventContainer = map._panels.front;
23+
});
24+
25+
afterEach(function () {
26+
map.remove();
27+
REMOVE_CONTAINER(container);
28+
});
29+
30+
describe('#setCenterWidthPadding', function () {
31+
it('set center with paddingLeft', function () {
32+
map.setCenter(center, { paddingLeft: 100 });
33+
var pCenter = map.getCenter();
34+
var pPoint = map.coordinateToViewPoint(pCenter);
35+
var tPoint = map.coordinateToViewPoint(center);
36+
expect(Math.round(tPoint.x - pPoint.x)).to.equal(100/2);
37+
});
38+
39+
it('set center with paddingRight', function () {
40+
map.setCenter(center, { paddingRight: 100 });
41+
var pCenter = map.getCenter();
42+
var pPoint = map.coordinateToViewPoint(pCenter);
43+
var tPoint = map.coordinateToViewPoint(center);
44+
expect(Math.round(tPoint.x - pPoint.x)).to.equal(-100/2);
45+
});
46+
47+
it('set center with paddingLeft and paddingRight', function () {
48+
map.setCenter(center, { paddingLeft: 100, paddingRight: 180 });
49+
var pCenter = map.getCenter();
50+
var pPoint = map.coordinateToViewPoint(pCenter);
51+
var tPoint = map.coordinateToViewPoint(center);
52+
expect(Math.round(tPoint.x - pPoint.x)).to.equal((100 - 180) / 2);
53+
});
54+
55+
it('set center with paddingTop', function () {
56+
map.setCenter(center, { paddingTop: 100 });
57+
var pCenter = map.getCenter();
58+
var pPoint = map.coordinateToViewPoint(pCenter);
59+
var tPoint = map.coordinateToViewPoint(center);
60+
expect(Math.round(tPoint.y - pPoint.y)).to.equal(100/2);
61+
});
62+
63+
it('set center with paddingBottom', function () {
64+
map.setCenter(center, { paddingBottom: 100 });
65+
var pCenter = map.getCenter();
66+
var pPoint = map.coordinateToViewPoint(pCenter);
67+
var tPoint = map.coordinateToViewPoint(center);
68+
expect(Math.round(tPoint.y - pPoint.y)).to.equal(-100/2);
69+
});
70+
71+
it('set center with paddingTop and paddingBottom', function () {
72+
map.setCenter(center, { paddingTop: 100, paddingBottom: 180 });
73+
var pCenter = map.getCenter();
74+
var pPoint = map.coordinateToViewPoint(pCenter);
75+
var tPoint = map.coordinateToViewPoint(center);
76+
expect(Math.round(tPoint.y - pPoint.y)).to.equal((100 - 180) / 2);
77+
});
78+
})
79+
})

0 commit comments

Comments
 (0)