使用Open Layers自动绘制路径的第一个折点

2022-07-11 00:00:00 javascript openlayers

我想帮助用户使用OpenLayers输入线段的方向。

我有一个表单，用户可以在其中输入点方位角，但我想通过以下方式帮助他：

当用户单击按钮时，开始在地图上绘制线段的第一个顶点(第一个顶点为已知点)
然后用户只需单击第二个顶点，就会自动计算方位角。

请参阅下面的小提琴here片段。

我差不多完成了：我可以在绘制线段时计算方向角了。但在脚本的最后有一个例外：我无法让OL自动绘制我片段的第一个点。

感谢任何能提供帮助的人。

<script src="http://openlayers.org/api/OpenLayers.js"></script>

<body>
  <div id="map" style="height: 500px"></div>
</body>



<script>
  var CONSTANTS = {
    MAP_FROM_PROJECTION: new OpenLayers.Projection("EPSG:4326"), // Transform from WGS 1984
    MAP_TO_PROJECTION: new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
  };

  function radians(n) {
    return n * (Math.PI / 180);
  }

  function degrees(n) {
    return n * (180 / Math.PI);
  }


  function computeBearing(startLat, startLong, endLat, endLong) {
    startLat = radians(startLat);
    startLong = radians(startLong);
    endLat = radians(endLat);
    endLong = radians(endLong);

    var dLong = endLong - startLong;

    var dPhi = Math.log(Math.tan(endLat / 2.0 + Math.PI / 4.0) / Math.tan(startLat / 2.0 + Math.PI / 4.0));
    if (Math.abs(dLong) > Math.PI) {
      if (dLong > 0.0) dLong = -(2.0 * Math.PI - dLong);
      else dLong = (2.0 * Math.PI + dLong);
    }

    return (degrees(Math.atan2(dLong, dPhi)) + 360.0) % 360.0;
  }


  map = new OpenLayers.Map("map");
  map.addLayer(new OpenLayers.Layer.OSM());
  map.setCenter(new OpenLayers.LonLat(3, 47).transform(CONSTANTS.MAP_FROM_PROJECTION, CONSTANTS.MAP_TO_PROJECTION), 6);


  var lineLayer = new OpenLayers.Layer.Vector("Line Layer");

  map.addLayers([lineLayer]);

  var lineControl = new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path, {
    handlerOptions: {
      maxVertices: 2,
      freehandMode: function(evt) {
        return false;
      }
    },
    featureAdded: function(feature) {
      var drawnLinePoints = feature.geometry.getVertices();
      var lonlat1 = drawnLinePoints[0].transform(CONSTANTS.MAP_TO_PROJECTION, CONSTANTS.MAP_FROM_PROJECTION);
      var lonlat2 = drawnLinePoints[1].transform(CONSTANTS.MAP_TO_PROJECTION, CONSTANTS.MAP_FROM_PROJECTION);
      var bearingValue = computeBearing(lonlat1.y, lonlat1.x, lonlat2.y, lonlat2.x);
      console.log(bearingValue);
    }
  });
  map.addControl(lineControl);
  lineControl.activate();


  var handler;
  for (var i = 0; i < map.controls.length; i++) {
    var control = map.controls[i];
    if (control.displayClass === "olControlDrawFeature") {
      handler = control.handler;
      break;
    }
  }

  // Here I have an exception in the console : I would like
  // OL to draw hat point automatically.
  handler.addPoint(new OpenLayers.Pixel(50, 50));
</script>

解决方案

See this fiddle用于解决方案。

tldr：

// draw the first point as I needed, as if a user has clicked on the map
handler.modifyFeature(new OpenLayers.Pixel(50, 50), true); 

// draw a first point on the map (not clicked). 
// This will be the initial point where the "cursor" is on the map, as long as 
// the user hasn't hovered onto the map with its mouse. This make the blue 
// line showing current segment to appear, without this segment is drawn but 
// no feedback is given to the user as long as he hasn't clicked.
handler.addPoint(new OpenLayers.Pixel(50, 50)); //

相关文章