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>

在多个地图中显示mousepointer（同步mousepointer）

1 个答案: