0

我正在关注一个在线研讨会和示例，您可以在此处找到它：

https://openlayers.org/en/latest/examples/mouse-position.html

在上述链接中发布的示例中，在两个函数中

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
  mousePositionControl.setProjection(event.target.value);//<------HERE
});

和

var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function (event) {
  var format = createStringXY(event.target.valueAsNumber);//<------HERE
  mousePositionControl.setCoordinateFormat(format);
});

分别使用了以下属性

 event.target.value , event.target.valueAsNumber

但是，当我尝试在 Visual Studio 代码中运行代码时，它强调了两者

 .value  and .valueAsNumber

红色，表示不存在此类属性。请让我知道哪些属性可以使用，以便我可以访问包含在

 event.target

代码：

ngOnInit(){
    this.todaydate2 = this.myservice.showTodayDate();
    this.value = this.myservice.observablesTest();

    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });

    this.map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
      target: 'map-container',
      layers: [
        new TileLayer({
          source: new XYZSource({
            url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
          })
        })
      ],
      view: new View({
        center: fromLonLat([13.2232,52.4059]),
        zoom: 6
      })
    });

    var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection(event.target);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY(event.target);
    mousePositionControl.setCoordinateFormat(format);
    });
}
4

2 回答 2

1

我通过类型转换解决了这个问题，如下所示：

mousePositionControl.setProjection((event.target as HTMLInputElement).value);
var format = createStringXY((event.target as HTMLInputElement).value);
于 2021-03-26T09:46:29.663 回答
1

targetinevent.target是类型，EventTarget并且每个都HTMLElement继承自它。因此，您使用方法接收的任何 HTML 元素document.getElementById()都是 anEventTarget并且可用属性将根据特定元素类型而有所不同。文件 -

使用以下代码 -

var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function (event) {
    mousePositionControl.setProjection(event.target.value);
});

即使在运行时您会HTMLElement通过.event.targetEventTargetEventTargetvalue

如果将上面的代码放在一个 JavaScript 文件中，并在 VS Code 中打开它，它不会抱怨value.

但是如果你将相同的代码放在 TypeScript 文件中，VS Code 会尝试应用类型检查并找出EventTarget没有value属性的代码。

为了减轻 VS Code 显示的错误，您可以强制转换event.target为any，并且any类型可以具有任何属性 -

mousePositionControl.setProjection((event.target as any).value);

或者，由于您知道document.getElementById()方法返回的元素代表一个select元素和一个input元素，您可以将它们转换为HTMLSelectElement-HTMLInputElement

mousePositionControl.setProjection((event.target as HTMLSelectElement).value);

// and
var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);
于 2021-03-26T10:30:11.440 回答