移动 OpenLayer 点答案

【问题标题】：Move an OpenLayer point移动 OpenLayer 点
【发布时间】：2021-05-13 04:16:47
【问题描述】：

我想绘制一个矩形并能够通过移动它的角来移动它。我希望它始终保持为矩形。我画了矩形和它的角，我知道如何擦除它的边。我想在它的角落放置一个 EventListener，并能够擦除或移动它的角落。你知道怎么做吗？谢谢。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <style>
      .map {
        height: 600px;
        width: 100%;
      }
    </style>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map">
    </div>
    <script>

//alert("Rectangle_interactif_Openlayers.js");

// Fonction renvoyant une ligne.
function create_line(lon1, lon2, lat1, lat2) {
  var points = [ [lon1, lat1], [lon2, lat2] ];
  for (var i = 0; i < points.length; i++) { // Partie à revoir
    points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
  }
  var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(points)
  });
  var vectorLine = new ol.source.Vector({});
  vectorLine.addFeature(featureLine);
  var vectorLineLayer = new ol.layer.Vector({
    source: vectorLine,
    style: new ol.style.Style({
        fill: new ol.style.Fill({ color: '#007bff', weight: 4 }),
        stroke: new ol.style.Stroke({ color: '#007bff', width: 2 })
    })
  });
  return vectorLineLayer
}

// Fonction renvoyant la liste des lignes traçant un rectangle
function create_rectangle(lon1, lon2, lat1, lat2) {
  let r = []; // liste des traits traçant le rectangle
  n = 50;
  step_lon = (lon2-lon1)/n;
  step_lat = (lat2-lat1)/n;
  for (let i = 0; i < n; i++) {
    lon = lon1 + i*step_lon;
    lat = lat1 + i*step_lat
    a = create_line(lon, lon + step_lon, lat1, lat1);
    r.push(a);
    b = create_line(lon, lon + step_lon, lat2, lat2);
    r.push(b);
    c = create_line(lon1, lon1, lat, lat + step_lat);
    r.push(c);
    d = create_line(lon2, lon2, lat, lat + step_lat);
    r.push(d);
  }
  return r;
}

// fonction traçant les traits d'un tableau
function draw_lines_tab(t) {
  t.forEach(function(line){
    map.addLayer(line);
});
}

// fonction effaçant les traits d'un tableau
function erase_lines_tab(t) {
  t.forEach(function(line){
    map.removeLayer(line);
});
}

// Longitudes et latitudes de départ du rectangle.
lon1 = 2;
lon2 = -74;
lat1 = 48;
lat2 = 40;

// generate the 4 points
const features = [];
p1 = new ol.geom.Point(ol.proj.fromLonLat([lon1, lat1]));
p2 = new ol.geom.Point(ol.proj.fromLonLat([lon1, lat2]));
p3 = new ol.geom.Point(ol.proj.fromLonLat([lon2, lat1]));
p4 = new ol.geom.Point(ol.proj.fromLonLat([lon2, lat2]));
points_rectangle = [p1, p2, p3, p4];
for (i = 0; i < 4; i++) {
  features.push(new ol.Feature({
    geometry: points_rectangle[i]
  }));
}

// create the source and layer for random features
const vectorSource = new ol.source.Vector({
  features
});
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
     fill: new ol.style.Fill({color: 'blue'})
    })
  })
});
// create map and add layers
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-36, 44]),
    zoom: 4
  })
});

rectangle = create_rectangle(lon1, lon2, lat1, lat2);
//line = create_line(lon1, lon2, lat1, lat2);
draw_lines_tab(rectangle);
//erase_lines_tab(rectangle);

p1.addEventListener('click', function(){
  alert("click p1");
});

p2.addEventListener('click', function(){
  alert("click p2");
});

p3.addEventListener('click', function(){
  alert("click p3");
});

p4.addEventListener('click', function(){
  alert("click p4");
});

// Fonction main
function main() {
  
}

main();

    </script>
    <script src="Rectangle_interactif_Openlayers.js"></script>
  </body>
</html>

【问题讨论】：

标签： openlayers

【解决方案1】：

你可以看看 ol-ext 转换交互。

?https://viglino.github.io/ol-ext/examples/interaction/map.interaction.transform.html

【讨论】：

实际上，当我移动一个角c时，我只希望c及其相邻的角移动。第 4 个角不应该移动。它看起来像 ol.interaction.Transform 所做的，但略有不同。