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

您需要：

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

这里是使用新输入框的示例。使用MousePosition创建的控件将非常棘手，因为该控件没有也不打算有输入。我怀疑这也会使用户感到困惑。

https://stackblitz.com/edit/ol-center-on-entered-coordinates?file=index.js输入一个值，即：“ 45,1”，然后按Tab键或输入，地图将更改为该位置。