Question

我正在做一个网络地图应用程序。绘图结束后，我想打开一个弹出屏幕。但是出了点问题。

首先，如果我在地图中添加了多边形或直线，那就可以了。但是，如果首先我添加了该点在点图层上的工作，但是如果我更改了点，则在点图层之后添加多边形或线，当我在每个点打开弹出窗口上绘制线时。不是图纸的尽头。

我该如何解决这个问题？

function addInteraction() {
  draw = new ol.interaction.Draw({
    features: features,
    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
    geometryFunction: function(coords, geom) {
      if (typeSelect.value == "Point") {
        if (!geom) geom = new ol.geom.Point(null);
      }
      if (typeSelect.value == "LineString") {
        if (!geom) geom = new ol.geom.LineString(null);
      }
      if (typeSelect.value == "Polygon") {
        if (!geom) geom = new ol.geom.Polygon(null);
      }
      geom.setCoordinates(coords);
      //if linestring changed
      if (coords.length !== coords_length) {
        coords_element.innerHTML = coords;
      }
      return geom;
    }
  });
  draw.on('drawend', function() {
    myFunction()
  });
  map.addInteraction(draw);
}

typeSelect.onchange = function() {
  map.removeInteraction(draw);
  addInteraction();
};

addInteraction();

/**
 * Add a click handler to the map to render the popup.
 */
function myFunction() {
  if (typeSelect.value == "LineString") {
    map.on('dblclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
  if (typeSelect.value == "Polygon") {
    map.on('dblclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
  if (typeSelect.value == "Point") {
    map.on('singleclick', function(evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
      content.innerHTML = '<p>You clicked here:</p><code>' + overlay + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }
}

Answer 1

在条件甚至函数中使用click事件是没有意义的。我要做的就是从功能中删除它，并稍微更改一下逻辑，例如

   map.on('dblclick', function (evt) {
       if (typeSelect.value == "LineString") {
            var coordinate = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

            content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                '</code>';
            overlay.setPosition(coordinate);
         }else 
         if (typeSelect.value == "Polygon") {

                 var coordinate = evt.coordinate;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

                content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                    '</code>';
                overlay.setPosition(coordinate);
           }
    });
     map.on('singleclick', function (evt) {
           if (typeSelect.value == "Point") {
               var coordinate = evt.coordinate;
            var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                coordinate, 'EPSG:3857', 'EPSG:4326'));

            content.innerHTML = '<p>You clicked here:</p><code>' + overlay + hdms +
                '</code>';
            overlay.setPosition(coordinate);
           }
     });

希望这对您有帮助！

OpenLayers 3捕获各种单击事件

1 个答案: