如何在 Openlayers 6 中编写 ControlMousePosition 的自定义坐标格式？

Question

I use Openlayers 6 in project of Angular 14.

I don't know how write to coordinateFormat.

The following code does not work properly

import { createStringXY, format } from 'ol/coordinate';
import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  ElementRef,
} from '@angular/core';
import Map from 'ol/Map';
import ControlMousePosition from 'ol/control/MousePosition';


@Component({
  selector: 'app-mouse-position',
  template: ``,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MousePositionComponent implements OnInit {

  @Input()
  map!: Map;
  @Input()
  positionTemplate!: string;
  control!: ControlMousePosition;

  constructor(private element: ElementRef) {

  }

  ngOnInit() {
    this.control = new ControlMousePosition({
      className: 'mouseposition-control',
      coordinateFormat: (coordinate: number[]) => { return format(coordinate, this.positionTemplate);},
      target: this.element.nativeElement,
      undefinedHTML: undefined,
    });
    this.map.addControl(this.control);
  }
}

the error message is

Type '(coordinate: number[]) => string' is not assignable to type 'CoordinateFormat'. The types of arguments 'coordinate' and 'arg0' are incompatible. Type 'number[] | undefined' is not assignable to type 'number[]'. Type 'undefined' is not assignable to type 'number[]'. ts(2322)

Answer 1

I find problem, and resolve it

import { createStringXY, format, CoordinateFormat } from 'ol/coordinate';
import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  ElementRef,
} from '@angular/core';
import Map from 'ol/Map';
import ControlMousePosition from 'ol/control/MousePosition';


@Component({
  selector: 'app-mouse-position',
  template: ``,
  styles: [`::ng-deep .ol-scale-line {
      position: relative;
  }
  ::ng-deep .ol-scale-line, ::ng-deep .ol-scale-line-inner {
      background-color: transparent;
      border-color: var(--text-color);
      color: var(--text-color);
      font-size: inherit;
      bottom: auto;
  }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MousePositionComponent implements OnInit {

  @Input()
  map!: Map;
  @Input()
  positionTemplate!: string;
  control!: ControlMousePosition;

  constructor(private element: ElementRef) {

  }

  ngOnInit() {

    let customFormat = function(template: string): CoordinateFormat {
      return (coordinate: number[] | undefined) => format(coordinate || [0, 0], template);
    }

    this.control = new ControlMousePosition({
      className: 'mouseposition-control',
      coordinateFormat: customFormat(this.positionTemplate),
      target: this.element.nativeElement,
      undefinedHTML: undefined,
    });
    this.map.addControl(this.control);
  }
}