在多个地图中显示鼠标指针（同步鼠标指针）

Question

当我的鼠标指针在一张地图上时，我需要鼠标指针同时在另一张地图上可见（当然还要显示在同一位置）......所以在地图之间同步鼠标指针。

我怎样才能做到这一点？

Answer 1

您在 windows 显示器上只能有一个真实的鼠标指针，但您可以在每张地图上显示一个共享功能，该功能跟随任一地图上的真实鼠标指针。如果你愿意，你甚至可以用一个图标来设计它，让它看起来像一个指针。

var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
style = new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  });

  var pointer = new ol.Feature(new ol.geom.Point([0,0]));
  pointer.setStyle(style);

  var map1 = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [pointer]
        })
      })
    ],
    target: 'map1',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  var map2 = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [pointer]
        })
      }),
 
    ],
    target: 'map2',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  map1.on('pointermove', function(evt) {
    pointer.getGeometry().setCoordinates(evt.coordinate);
  });
  map2.on('pointermove', function(evt) {
    pointer.getGeometry().setCoordinates(evt.coordinate);
  });

  .wrapper {
      display: flex;
      height: 90%;
  }
  @media (min-width: 800px) {
    .half {
      padding: 0 10px;
      width: 50%;
      float: left;
    }
  }

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <div class="wrapper">
<div class="half">
  <div id="map1" class="map"></div>
</div>
<div class="half">
  <div id="map2" class="map"></div>
</div>
  </div>

在多个地图中显示鼠标指针（同步鼠标指针）

show mousepointer in multiple maps (syncing mousepointer)

openlayers

openlayers-5