如何在javascript中从函数中删除.onchange处理程序

如何在javascript中从函数中删除.onchange处理程序,javascript,events,leaflet,Javascript,Events,Leaflet,我在这里发现了一个代码:。基本上,它做了我想要的(在我从openweathermap获得的风向上围绕一个固定点旋转多边形)。但仅当我单击该滑块时: 我的全部调整代码如下: var max_val_bounds = L.latLngBounds( L.latLng(-90, 180), L.latLng(90, -180)); // initialize map var map = L.map( 'map', { center: [50, 10], maxZoom: 18, mi

我在这里发现了一个代码:。基本上,它做了我想要的(在我从openweathermap获得的风向上围绕一个固定点旋转多边形)。但仅当我单击该滑块时:

我的全部调整代码如下:

 var max_val_bounds =  L.latLngBounds( L.latLng(-90, 180), L.latLng(90, -180));
// initialize map
var map = L.map( 'map', {
  center: [50, 10],
  maxZoom: 18,
  minZoom: 2,
  maxBounds: max_val_bounds,
  zoom:5
})

var layer = L.esri.basemapLayer('Topographic').addTo(map);
var layerLabels;
// set up map type
function setBasemap(basemap)
{
  if (layer){ map.removeLayer(layer); }
  layer = L.esri.basemapLayer(basemap);
  map.addLayer(layer);
  if (layerLabels){ map.removeLayer(layerLabels);   }
  if (basemap === 'ShadedRelief' || basemap === 'Oceans' || 
      basemap === 'Gray' || basemap === 'DarkGray' || 
      basemap === 'Imagery' || basemap === 'Terrain')
  {
    layerLabels = L.esri.basemapLayer(basemap + 'Labels');
    map.addLayer(layerLabels);
  }
}

var basemaps = document.getElementById('basemaps');
basemaps.addEventListener('change', function()
                          {
  setBasemap(basemaps.value);
});

// INTERESTING PART
// setting up latitude, longitude
var decimal_lat = 50,
        decimal_lon = 10;

var winddirection = 270; //Getting the value from openweathermap; Its static for this example

// creating polygon for this place
var polygon = L.polygon( [ 
        [parseFloat(decimal_lat),           parseFloat(decimal_lon)], 
        [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1],                     [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],       
    {
                color:'green'
        });
polygon.addTo(map);

// creating marker for this place
var newMarker = L.marker([decimal_lat, decimal_lon]);
newMarker.addTo( map );

// This is what I do not want
// slider to move polygon
var range_yaw = document.createElement("input");
range_yaw.setAttribute("type", "range");
range_yaw.min = "0";
range_yaw.max = "819";
range_yaw.step = "2.275";
range_yaw.defaultValue = 90;
// End of what I do not want

// creating polyline for this place
var SIN = Math.sin((winddirection/(819/360) - 90)*(Math.PI/180));
var COS = Math.cos((winddirection/(819/360) - 90)*(Math.PI/180));
var pointA = new L.LatLng(parseFloat(decimal_lat),                  
                                                    parseFloat(decimal_lon));
var pointB = new L.LatLng(parseFloat(decimal_lat) + 2*COS,                                                                          parseFloat(decimal_lon) + 2*SIN);
var pointList = [pointA, pointB];
//Actually I dont want a line but removing it messes up other things
var polyline = new L.Polyline(pointList, {
  color: 'red',
  weight: 3,
  opacity: 0.00,
  smoothFactor: 1
});
polyline.addTo(map);

document.body.appendChild( range_yaw );

// The polygon needs to be rotated without this .onchange handler. It should rotate when the page/script loads
 //changing polyline with slider but I want to change polygon there
range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
};

//
// rotate a list of points in [lat, lng] format about the center.
//
function rotatePoints(center, points, yaw) {
  var res = []
  var angle = yaw * (Math.PI / 180) // not really sure what this is
  for(var i=0; i<points.length; i++) {
    var p = points[i]
    // translate to center
    var p2 = [ p[0]-center[0], p[1]-center[1] ]
    // rotate using matrix rotation
    var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]
    // translate back to center
    var p4 = [ p3[0]+center[0], p3[1]+center[1]]
    // done with that point
    res.push(p4)
  }
  return res
}

如何在不单击滑块的情况下使多边形旋转?我希望多边形在脚本加载后立即显示在风角中。

您可以删除
onchange
事件处理程序:

//range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
//};

请将您的代码移到这里,放入StackOverflow代码段中。只有当您需要SO代码段中不可用的功能时,才可以接受外部代码站点。我看不出你的代码是这样的。
//range_yaw.onchange = function() {
  var yawAngle = (parseFloat(winddirection) / (819 / 360) + 90)
  // line
  var center = [decimal_lat, decimal_lon]
  var end = [decimal_lat + 2, decimal_lon + 2]
  var pointListRotated = rotatePoints(center, [center, end], yawAngle)
  polyline.setLatLngs(pointListRotated);
  // polygon
  var polygonPoints = [
    center,
    [center[0] + 1, center[1] - 1],
    [center[0] + 1, center[1] + 1]
  ]
  polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
  polygon.setLatLngs(polygonRotated)
//};