OpenLayers :只需单击div以更改值(以地图为中心)就可以编辑坐标。

Question

我想通过点击我的坐标来对我的地图进行居中。这个坐标将是可编辑的，然后改变中心的值( my Map的视图)。我在寻找一种方法

​

​

html：

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

联署材料：

    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‘然后选项卡或输入，地图将改变到那个位置。

如果您确实希望查看当前坐标并能够在同一个控件中输入坐标，则可能需要使用map事件实现鼠标/中心位置检测，然后使用相关值更新自定义输入。