Skip to content

Commit

Permalink
更新监听时间以支持移动端 更新精度 更新css
Browse files Browse the repository at this point in the history
  • Loading branch information
@cXiaof
cXiaof committed Aug 17, 2020
1 parent 23c7bc0 commit 7fadd02
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 95 deletions.
48 changes: 22 additions & 26 deletions css/maptalks.control.compass.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/maptalks.control.compass.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

90 changes: 44 additions & 46 deletions css/maptalks.control.compass.scss
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
$dialWidth: 2px;
$size: 4px;
$sizeX2: $size * 2;
$sizeX4: $size * 4;
$sizeX5: $size * 5;
$sizeX10: $size * 10;
$dial-width: 2px !default;
$dial-height: $dial-width * 2;
$dial-height-even: $dial-height;
$dial-height-odd: $dial-height * 2;

$compass-size: $dial-width * 20;
$compass-size-hf: $compass-size / 2;

@mixin margin-middle() {
position: absolute;
margin: auto;
left: 0;
right: 0;
}

.maptalks-compass {
width: $sizeX10;
height: $sizeX10;
width: $compass-size;
height: $compass-size;
border-radius: 50%;
.maptalks-compass-dial {
.maptalks-compass-dial-clock {
position: absolute;
width: $dialWidth;
height: $sizeX10;
left: calc(50% - #{$dialWidth / 2});
&::before,
&::after {
content: '\20';
display: block;
width: $dialWidth;
background: white;
}
@include margin-middle;
width: $dial-width;
height: $compass-size;
&:nth-child(odd) {
&::before,
&::after {
height: $sizeX2;
}
&::after {
margin-top: ($sizeX10 - ($sizeX2 * 2));
}
background: linear-gradient(
white $dial-height-odd,
transparent $dial-height-odd,
transparent calc(100% - #{$dial-height-odd}),
white calc(100% - #{$dial-height-odd})
);
}
&:nth-child(even) {
&::before,
&::after {
height: $size;
}
&::after {
margin-top: ($sizeX10 - ($size * 2));
}
background: linear-gradient(
white $dial-height-even,
transparent $dial-height-even,
transparent calc(100% - #{$dial-height-even}),
white calc(100% - #{$dial-height-even})
);
}
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
Expand All @@ -50,28 +48,28 @@ $sizeX10: $size * 10;

.maptalks-compass-needle {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
top: 50%;
&::before,
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
@include margin-middle;
border-style: solid;
left: $sizeX4;
width: 0;
}
&::before {
top: 0;
border-width: $sizeX5 $size 0;
border-color: white transparent transparent;
transform-origin: top center;
}
&::after {
top: -$sizeX5;
border-width: 0 $size $sizeX5;
bottom: 50%;
border-width: 0 $dial-height $compass-size-hf;
border-color: transparent transparent red;
transform-origin: bottom center;
}
&::after {
top: 50%;
border-width: $compass-size-hf $dial-height 0;
border-color: white transparent transparent;
transform-origin: top center;
}
}
}
14 changes: 7 additions & 7 deletions dist/maptalks.control.compass.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,25 @@ var CompassControl = function (_maptalks$control$Con) {

CompassControl.prototype.onAdd = function onAdd() {
this.map = this.getMap();
this.map.on('mousemove animating', this._rotateCompass, this);
this.map.on('animating mousemove touchmove', this._rotateCompass, this);
this._rotateCompass();
};

CompassControl.prototype.onRemove = function onRemove() {
this.map.off('mousemove animating', this._rotateCompass, this);
this.map.off('animating mousemove touchmove', this._rotateCompass, this);
this._compass.remove();
delete this._deg;
delete this._compass;
delete this._bearing;
delete this._needle;
delete this.map;
};

CompassControl.prototype._rotateCompass = function _rotateCompass() {
var bearing = parseInt(this.map.getBearing(), 0);
var bearing = this.map.getBearing().toFixed(1);
if (bearing <= 180) bearing *= -1;
if (bearing !== parseInt(this._deg, 0)) {
this._deg = bearing;
maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._deg + 'deg);');
if (bearing !== this._bearing) {
this._bearing = bearing;
maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._bearing + 'deg);');
}
};

Expand Down
14 changes: 7 additions & 7 deletions dist/maptalks.control.compass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,25 @@ var CompassControl = function (_maptalks$control$Con) {

CompassControl.prototype.onAdd = function onAdd() {
this.map = this.getMap();
this.map.on('mousemove animating', this._rotateCompass, this);
this.map.on('animating mousemove touchmove', this._rotateCompass, this);
this._rotateCompass();
};

CompassControl.prototype.onRemove = function onRemove() {
this.map.off('mousemove animating', this._rotateCompass, this);
this.map.off('animating mousemove touchmove', this._rotateCompass, this);
this._compass.remove();
delete this._deg;
delete this._compass;
delete this._bearing;
delete this._needle;
delete this.map;
};

CompassControl.prototype._rotateCompass = function _rotateCompass() {
var bearing = parseInt(this.map.getBearing(), 0);
var bearing = this.map.getBearing().toFixed(1);
if (bearing <= 180) bearing *= -1;
if (bearing !== parseInt(this._deg, 0)) {
this._deg = bearing;
maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._deg + 'deg);');
if (bearing !== this._bearing) {
this._bearing = bearing;
maptalks.DomUtil.setStyle(this._needle, 'transform: rotate(' + this._bearing + 'deg);');
}
};

Expand Down
2 changes: 1 addition & 1 deletion dist/maptalks.control.compass.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file modified dist/maptalks.control.compass.min.js.gz
View file
Binary file not shown.
14 changes: 7 additions & 7 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,27 @@ export class CompassControl extends maptalks.control.Control {

onAdd() {
this.map = this.getMap()
this.map.on('mousemove animating', this._rotateCompass, this)
this.map.on('animating mousemove touchmove', this._rotateCompass, this)
this._rotateCompass()
}

onRemove() {
this.map.off('mousemove animating', this._rotateCompass, this)
this.map.off('animating mousemove touchmove', this._rotateCompass, this)
this._compass.remove()
delete this._deg
delete this._compass
delete this._bearing
delete this._needle
delete this.map
}

_rotateCompass() {
let bearing = parseInt(this.map.getBearing(), 0)
let bearing = this.map.getBearing().toFixed(1)
if (bearing <= 180) bearing *= -1
if (bearing !== parseInt(this._deg, 0)) {
this._deg = bearing
if (bearing !== this._bearing) {
this._bearing = bearing
maptalks.DomUtil.setStyle(
this._needle,
`transform: rotate(${this._deg}deg);`
`transform: rotate(${this._bearing}deg);`
)
}
}
Expand Down

0 comments on commit 7fadd02

Please sign in to comment.