时间戳

首页 > 解决方案 > OpenLayers 3 捕获各种点击事件

javascript - OpenLayers 3 捕获各种点击事件

问题描述

我正在做一个网络地图应用程序。我想在绘图结束时打开一个弹出屏幕。但是有一点不对劲。

首先，如果我在地图中添加了多边形或线，则可以。但是，如果首先我添加了它在点图层上工作的点，但是如果我更改然后在点图层之后添加多边形或线，当我在每个点打开弹出窗口上绘制线时。没有画完。

我怎么解决这个问题？

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);
    });
  }
}

标签： javascripteventsopenlayers-3

解决方案

在条件甚至函数中使用点击事件是没有意义的。我要做的就是把它从函数中取出并改变一点你的逻辑，例如

   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);
           }
     });

希望这会有所帮助，问候！

推荐阅读