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

Question

我在 Angular 14 的项目中使用 Openlayers 6。

我不知道如何写入坐标格式。

以下代码无法正常工作

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);
  }
}

错误信息是

类型 '(coordinate: number[]) => string' 不可分配给类型 'CoordinateFormat'。 参数 'coordinate' 和 'arg0' 的类型不兼容。 输入“号码[] | undefined' 不能分配给类型 'number[]'。 类型 'undefined' 不能分配给类型 'number[]'。 ts(2322)

Answer 1

我发现问题并解决它

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);
  }
}