показ указателя мыши на нескольких картах (синхронизация указателя мыши) - PullRequest
Новая
       13

показ указателя мыши на нескольких картах (синхронизация указателя мыши)

0 голосов
/ 26 мая 2019

Когда у меня есть указатель мыши на одной карте, мне нужно, чтобы указатель мыши также был виден на другой карте в одно и то же время (и, конечно, показывать в том же месте) ........ поэтому синхронизация указателя мыши между картами.

Как мне этого добиться?

1 Ответ

1 голос
/ 26 мая 2019

Вы можете иметь только один реальный указатель мыши на дисплее 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>
...