OpenLayers ：只需单击 div 更改值（使地图居中）即可编辑坐标

Question

我想通过单击我的坐标使我的地图居中。该坐标将是可编辑的，然后更改中心的值（我的地图视图）。我正在寻找一种方法来做到这一点：

html :

<div id="mouse-position" class="mouse-position"></div>

js :

    var mouse_position = document.getElementById('mouse-position').addEventListener('click');
    var coord_centre;
    var mousePositionControl = new MousePosition({
      coordinateFormat: createStringXY(4),
      projection: 'EPSG:3857',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
      undefinedHTML: '&nbsp;'
    });
    var map = new Map({
      interactions: defaultInteractions().extend([dragAndDropInteraction]),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        }),
        coucheWMS
      ],
      target: 'map',
      controls: allcontrol({
        attributionOptions: false
      }).extend([mousePositionControl]),
      view: new View({
        center: coord_centre, // Value of mouse_position ? 
        zoom: 5
      })

Answer 1

您需要：

接受用户输入
解析它并在必要时转换为所需的投影
使用 view.setCenter(..) 或 view.animate(..) 将地图移动到该位置。

使用 MousePosition 创建的控件将非常棘手，因为该控件没有也无意提供输入。我怀疑它也会让用户感到困惑。

下面是一个使用新输入框的例子：
https://stackblitz.com/edit/ol-center-on-entered-coordinates?file=index.js
输入一个值，例如：“45,1”，然后按 Tab 或回车，地图将更改为该位置。

如果您真的想查看当前坐标并能够在同一个控件中输入坐标，您可能需要使用地图事件自己实现 mouse/center 位置检测，然后更新自定义输入与相关的价值。

OpenLayers ：只需单击 div 更改值（使地图居中）即可编辑坐标

OpenLayers : Edit coordinates just by clicking in div to change the value (to center the map)

html

javascript

openlayers